ECMAScript6 笔记(三):数组的扩展

  • A+
所属分类:前端

扩展运算符

...ES6 中新增的 扩展运算符 。它可以将一个数组转换为用逗号分隔的参数序列。

利用这个特性我们可以很方便的将实现了 Iterator 的对象转为数组:

扩展运算符还可以用来取代函数的 apply 方法:

其它实际运用:

1. 克隆简单数组

通过 ... 运算符来拷贝数组的方法是浅拷贝,所以不能用来直接拷贝深数组。

2. 合并数组

3. 将字符串转为数组

使用此方法可以正确识别四个字节的 Unicode 字符,可用于字符统计。

4. 将任意实现了 Iterator 接口的对象转为数组

在写代码中我们经常遇到类数组不能使用 forEach 方法的问题,如:NodeList、HTMLCollection。之前我们做类型转换可能用到了:

或者

现在又多了一个方法:

上面的 NodeListHTMLCollection 之所以可以使用扩展运算符将其转为真正的数组,原因就在于它们均实现了 Iterator

Array.from()

Array.from() 同样来自 ECMAScript6,它与扩展运算符的用途很相似,但又有很大的不同。

Array.from() 和 ... 的区别

Array.from: 该方法支持所有的类数组对象,所谓类数组对象就是具有 length 属性的所有对象。因此,只要有 length 属性的对象都可以通过 Array.from 方法转为数组。

Array.from 方法还可以接受第二个参数,作用类似于数组的 map 方法,用来对每个元素进行处理,将处理后的值放入返回的数组中去。

扩展运算符(...): 扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。

Array.of()

Array.of 方法用于将一组值,转为数组,是扩展运算符的逆运算。它的出现弥补了数组构造函数 Array() 的不足。

ES5 中可以用下面的方法模拟实现 Array.of 方法。

find() 和 findIndex()

数组实例的 find 方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数,该回调函数可以接收三个参数,依次代表: 当前值、当前索引、源数组。

findIndex 方法与 find 方法相似。不同的是 findIndex 返回的是第一个符合条件数组成员的下标,find 方法返回的是第一个符合条件数组成员本身。

它们都可以接收第二个参数,用于指定回调函数的 this 指向:

fill()

fill 方法使用给定值填充数组。

fill 方法的第二参数和第三个参数代表要填充起始位置和结束位置:

entries()、keys()、values()

ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

includes()

Array.prototype.includes 方法用于检测一个数组是否包含给定值,返回的是 Boolean 类型。

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

在没有 includes 方法前,我们通常使用 indexOf 方法来辅助判断数组中是否包含给定值。但是 indexOf 不够语义化,且使用 indexOf 方法不能判断 NaN 的成员。

flat() 和 flatMap

数组实例的 flat 方法可以将嵌套数组一层一层的展开,它接收一个参数,代表要展开多少层,值为 0 的时候代表不展开。

flatMap 方法相当于 map 方法和 flat 方法的组合

数组的空位

虽然 [1, 1, 1, 1][ , , , ] 都有三个 ',' 但是前者的长度是 4, 后者的长度是 3,请各位不要想当然的去猜测。

空位代表什么都没有,并不等同于 undefined

ultravires

发表评论

您必须才能发表评论!