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

javascript/jquery

浏览数:600

2019-7-7

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

作者:ERIC