浅谈ES6中基本数据类型的操作方法

jiezi

5 年前

在 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 中带来的新的处理方法。

字符串是 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 入门中索引。

众所周知，相比较于 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 个新的方法，这里不赘述。

布尔值作为一种比较简单的基本数据类型，在 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 放在一起讲是因为这两种数据类型在 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 新增的处理方法。