淺談ES6中基本數據類型的操作方法

longmon 發布于2019-08-23 18:24 / 1621人閱讀

摘要：值得注意的是，中整數和浮點數采用的是同樣的儲存方法位雙精度浮點數，所以和被視為同一個值。

在Javascript中，數據類型分為基本數據類型和引用數據類型兩大類，其中，Array和Function在本質上仍然是一種特殊的對象:

基本類型: String / Number / Boolean / Null / Undefined
引用類型: Object / Array / Function

ES6中引入了一種新的基本數據類型Symbol，表示獨一無二的值，這里暫不作討論

對于js中數據類型的判斷，可以用typeof方法:

typeof ""  // string
typeof 1  // number
typeof false  // boolean
typeof null  // object
typeof undefined  // undefined

typeof {a: 1}  // object
typeof []  // object
typeof function(){}  // function

其中，null作為基本類型之一，為什么類型返回為object，這里做了一些解答。

另外，也可以使用以下方法作為判斷依據，這里不做贅述。

instanceof   // A instanceof B， 檢測A是否為B的實例
toString   // 作為object的原型方法，通過Object.prototype.toString().call("")返回[object Xxx]，可得數據類型
constructor   // 當重寫prototype后，原有的constructor引用會丟失，constructor會默認為object

接下來，對各種js基本數據類型對常用處理方法做一下簡要對概述，并重點講一下在ES6中帶來的新的處理方法。

String

字符串是js中最常見的數據類型，同樣，我們對其運用到的處理方法也是最多的，以下是ES5中，針對string的最常用處理方法：

concat( ) / indexOf( ) / replace( ) / slice( ) / split( ) / toUpperCase( )

在ES6中，又為字符串增添了一些新的方法和API，首先增加了includes( )等三個方法，作為對之前indexOf( )方法對補充：

includes( ): 返回布爾值，表示字符串中是否含有某個局部"串兒"

startsWith( ): 返回布爾值，表示參數字符串是否在原字符串的頭部

endsWith( ): 返回布爾值，表示參數字符串是否在原字符串的尾部

let str = "need sleep early";
str.includes("d sleep e");   //true
str.startsWith("nee");   //true;
str.endsWith("earl");   //false;

repeat( ): 返回一個新的字符串，表示將原來對字符串重復n次

"hello".repeat(2) // "hellohello"
"world".repeat(0) // ""

padStart( ): 用參數從頭部將原字符串補全至指定長度

padEnd( ): 用參數從尾部將原字符串補全至指定長度

let str = "E"
str.padStart(5, "abc")   //"abcaE"
str.padStart(5, "abcdefg")   //"abcdE"
str.padEnd(5, "abc")   //"Eabca"
str.padEnd(5, "abcdefg")   //"Eabcd"

for...of: 字符串的遍歷器接口，控制獲取單個字符

for (let singleChar of "Chunhui") {
  console.log(singleChar)
}
// "C"
// "h"
// "u"
// "n"
// "h"
// "u"
// "i"

遍歷字符串接口可以代替傳統的split( ) + forEach( )的方式，除此之外，ES6中的遍歷器還可以識別大于0xFFFF的碼點，這是傳統的for循環做不到的。另外，ES6中還給字符串帶來了一些其他的處理方法，詳情可以去阮一峰的ECMAScript6入門中索引。

Number

眾所周知，相比較于Java，javascript中number類型的使用要方便許多，沒有int，long，float，double等類型，根據IEEE 754標準，js數字始終以64位雙精度浮點數來存儲，其中：

值(Fraction/Mantissa)	指數	符號
52 bits(0 - 51)	1 bit (63)	11 bits (52 - 62)

正是因為64位浮點數的精度不足的問題，導致number類型經常會出現一些匪夷所思的計算問題，如

console.log(0.2 + 0.1)   // 輸出0.30000000000000004
console.log(0.4 + 0.1)   // 輸出0.5
console.log(0.7 + 0.1)   // 輸出0.7999999999999999

關于number類型的精度問題，下次會專門寫一篇文章進行分析，這次先講一下在ES5中，number類型的一些常用的處理方法：

toString( ) / toFixed( ) / toPrecision( ) / parseInt( ) / parseFloat( )

在ES6中，對number類型的處理方法做了擴展，提供了一些新的方法：

Number.isFinite( ): 檢測數字是否為有限的(非Infinity)

Number.isNaN( ): 用來檢查一個值是否為NaN

Number.isFinite(10); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isNaN(15) // false
Number.isNaN("15") // false
Number.isNaN(NaN) // true

它們與傳統的全局方法isFinite()和isNaN()的區別在于，傳統方法先調用Number()將非數值的值轉為數值，再進行判斷，而這兩個新方法只對數值有效，Number.isFinite()對于非數值一律返回false, Number.isNaN()只有對于NaN才返回true，非NaN一律返回false。ES6將上面的ES5中的這幾個全局方法，移植到Number對象上面，是為了逐步減少全局性方法，使得語言逐步模塊化。

ES6中提供了Number.isInteger()用來判斷一個數值是否為整數。值得注意的是，JavaScript 中整數和浮點數采用的是同樣的儲存方法(64位雙精度浮點數)，所以15和15.0被視為同一個值。

Number.isInteger(15)   // true
Number.isInteger(15.0)   // true
Number.isInteger(15.1)   // false
Number.isInteger("15")   // false

除此之外，ES6還對與number關系密切的Math( )作了很大的擴展，添加了17個新的方法，這里不贅述。

Boolean

布爾值作為一種比較簡單的基本數據類型，在ES5中就僅有幾種簡單的方法，通過引用構造函數，很清楚的就能知道一些常見值的布爾值：

Boolean(1)   // true
Boolean(0)   // false
Boolean(false)   // false
Boolean("false")   // true
Boolean(null)   // false
Boolean(undefined)   // false
Boolean(NaN)   // false

此外，還有一些簡單的常用方法：

toString( ) / toSource( ) / valueOf( )

Null / Undefined

把null和undefined放在一起講是因為這兩種數據類型在js都是很特殊的，并且它們表達的意義很相近，初學者經常會混淆這二者。null的意思是"nothing"，它被看做不存在的事物，理論上講，null應該是一種多帶帶的數據類型，但是我們在前面講過,typeof null的結果是object，這不得不說是一件令人困惑的事情。

對于undefined，它表示的意思是"未定義的"，它與null雖然類型不同(type undefined 為undefined)，但是二者的值卻是相同的。

typeof null   // object
typeof undefined    // undefined
null == undefined   //true
null === undefined   // false

暫時就寫到這里，下次有時間來聊聊ES6中object新增的處理方法。

GPU云服務器云服務器 js中基本數據類型 c語言中基本數據類型詳解關于JAVA中順序IO的基本操作 js的基本數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105160.html

2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

stormgens 2019-08-22 15:34 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 評論0 收藏0
淺談javascript中的基本類型和引用類型

摘要：在中，變量可以存在兩種類型的值，即原始值和引用值。中總共定義了六種數據類型，分別是對象，其中前五種叫做基本數據類型，最后一種叫做引用數據類型。在ECMAScript 中，變量可以存在兩種類型的值，即原始值和引用值。ES5中總共定義了六種數據類型，分別是undefined、null、Boolean、String、Number、對象（Object），其中前五種叫做基本數據類型，最后一種叫...

RobinTang 2019-08-26 13:21 評論0 收藏0
淺談JavaScript的淺拷貝與深拷貝

摘要：引用數據類型是存放在堆內存中的，變量實際上是一個存放在棧內存的指針，這個指針指向堆內存中的地址。棧和堆的區別其實淺拷貝和深拷貝的主要區別就是數據在內存中的存儲類型不同。這里，對存在子對象的對象進行拷貝的時候，就是深拷貝了。數據類型在開始拷貝之前，我們從JavaScript的數據類型和內存存放地址講起。數據類型分為基本數據類型和引用數據類型基本數據類型主要包括undefin...

娣辯孩 2019-08-23 13:44 評論0 收藏0