ES6 简单入门
主要学习 @阮一峰 的ES6电子书,梳理今后工作中可能用到的一些功能和细节
1 数值的新增功能
Number.isFinite()对于非数值一律返回false
Number.isNaN()只有对于NaN才返回true,非NaN一律返回false
Number.parseInt(), Number.parseFloat()
ES6 将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变
Number.isInteger()用来判断一个值是否为整数。需要注意的是,在 JavaScript 内部,整数和浮点数是同样的储存方法,所以3和3.0被视为同一个值
Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内
Math增加方法
Math.trunc方法用于去除一个数的小数部分,返回整数部分
对于非数值,Math.trunc内部使用Number方法将其先转为数值
对于空值和无法截取整数的值,返回NaN
Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值
参数为正数,返回+1
参数为负数,返回-1
参数为0,返回0
参数为-0,返回-0
其他值,返回NaN
2函数新增功能
函数参数的默认值
|
|
另外一种写法
函数的 length 属性
指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真
作用域
一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失
|
|
rest
rest 参数(形式为…变量名),用于获取函数的多余参数(类似java可变参数)
|
|
name 属性
函数的name属性,返回该函数的函数名。
|
|
箭头函数
基本用法
|
|
等价于
|
|
|
|
箭头符内如果有多行,必须用{}包裹,同时将结果return
如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。
|
|
使用注意点
箭头函数有几个使用注意点。
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
|
|
下面是一个部署管道机制(pipeline)的例子,即前一个函数的输出是后一个函数的输入。
|
|
如果觉得上面的写法可读性比较差,也可以采用下面的写法。
|
|
函数参数的尾逗号
|
|
数组拓展功能
扩展运算符
扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
|
|
如果扩展运算符后面是一个空数组,则不产生任何效果。
替代数组的 apply 方法
|
|
扩展运算符的应用
(1)合并数组
|
|
(2)与解构赋值结合(如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。)
|
|
(3)函数的返回值
JavaScript 的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。
(4)字符串
|
|
(5)实现了 Iterator 接口的对象
任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。
|
|
(6)Map 和 Set 结构
扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。
|
|
如果对没有 Iterator 接口的对象,使用扩展运算符,将会报错。
|
|
Array.from()
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
|
|
Array.of()
Array.of方法将一组值,转换为数组。
|
|
Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
数组实例的 find() 和 findIndex()
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
|
|
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
|
|
数组实例的fill()
fill方法使用给定值,填充一个数组。
fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
|
|
数组实例的 entries(),keys() 和 values()
可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
|
|
如果不使用for…of循环,可以手动调用遍历器对象的next方法,进行遍历。
|
|
数组实例的 includes()
Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。
|
|
该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。
|
|
没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值
indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。
|
|
includes使用的是不一样的判断算法,就没有这个问题。
数组的空位
ES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位。
- forEach(), filter(), every() 和some()都会跳过空位。
- map()会跳过空位,但会保留这个值
- join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
|
|
ES6 则是明确将空位转为undefined。
Array.from方法会将数组的空位,转为undefined,也就是说,这个方法不会忽略空位。
|
|
扩展运算符(…)也会将空位转为undefined。
|
|
copyWithin()会连空位一起拷贝。
|
|
fill()会将空位视为正常的数组位置。
for…of循环也会遍历空位。
上面代码中,数组arr有两个空位,for…of并没有忽略它们。如果改成map方法遍历,空位是会跳过的。
entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。
|
|
由于空位的处理规则非常不统一,所以建议避免出现空位。