2.6　数组的扩展

ECMAScript 6对数组进行了扩展，为数组Array构造函数添加了from（）、of（）等静态方法，也为数组实例添加了find（）、findIndex（）等方法。下面一起来看一下这些方法的用法。

2.6.1　扩展运算符

扩展运算符“...”用于将数组转化为逗号分隔的参数序列。

1．用于函数调用

可以在函数参数传递的时候，使用扩展运算符，如代码示例2-33所示。

代码示例2-33　参数使用扩展运算符

2．实现数组的操作

下面介绍通过扩展运算符实现求最大值、拼接数组、复制数组、合并数组、将字符串转化为真正的数组。

例如在Math.max（）中使用数组的扩展运算符求最大值，如代码示例2-34所示。

代码示例2-34　Math.max

（1）拼接数组，通过push（）将一个数组添加到另一个数组的尾部，如代码示例2-35所示。

代码示例2-35　拼接数组

（2）复制数组（arr2复制arr1，该arr2不改变arr1），如代码示例2-36所示。

代码示例2-36　复制数组

当数组是一维数组时，扩展运算符可以深复制一个数组（对象同理），如代码示例2-37所示。

代码示例2-37

当数组为多维时，数组中的数组变成浅复制（对象同理），如代码示例2-38所示。

代码示例2-38　当数组为多维数组时，变成浅复制

合并数组（多个），如代码示例2-39所示。

代码示例2-39　合并多数组

结合解构赋值，生成剩余数组（扩展运算符只能置于参数的最后面），如代码示例2-40所示。

代码示例2-40

将字符串扩展成数组，如代码示例2-41所示。

代码示例2-41

可以把类数组对象转换为真正的数组，如代码示例2-42所示。

代码示例2-42

2.6.2　Array.from（）

Array.from（）函数用于将类数组对象、可遍历的对象转换为真正的数组，如代码示例2-43所示。

代码示例2-43

下面的例子，查询所有的div元素，如代码示例2-44所示。

代码示例2-44

使用Array.from（）还可以这样写，如代码示例2-45所示。

代码示例2-45

Array.from（）也可以将ES6中新增的Set、Map等结构转化为数组，如代码示例2-46所示。

代码示例2-46

Array.from（）可接收第2个参数，用于对数组的每一项进行处理并返回，如代码示例2-47所示。

代码示例2-47

Array.from（）还可接收第3个参数，这样在处理函数中就可以使用传进去的对象域中的值，如代码示例2-48所示。

代码示例2-48

2.6.3　Array.of（）

用于将一组值转换为数组，存在的意义是替代以构造函数的形式创建数组，修复数组创建因参数不一致而导致表现形式不同的伪Bug，如代码示例2-49所示。

代码示例2-49 Array.of （）

2.6.4　Array.find（）和Array.findIndex（）

find（）方法用于查找第一条符合要求的数据，找到后返回该数据，否则返回undefined。

参数包括一个回调函数和一个可选参数（执行环境上下文）。回调函数会遍历数组的所有元素，直到找到符合条件的元素，然后find（）方法返回该元素，如代码示例2-50所示。

代码示例2-50 Array.find （）

findIndex（）方法与find（）方法的用法类似，返回的是第1个符合条件的元素的索引，如果没有，则返回－1，如代码示例2-51所示。

代码示例2-51 Array.findIndex （）

2.6.5　Array.includes（）

Array.includes（）函数用于检查数组中是否包含某个元素，如代码示例2-52所示。

代码示例2-52

2.6.6　Array.copyWithin（）

Array增加了copyWithin（）函数，用于操作当前数组自身，用来把某些位置的元素复制并覆盖到其他位置上去。copyWithin（）方法的语法如下：

代码示例2-53

最后一个参数为可选参数，如果省略，则为数组长度。该方法在数组内复制从start（包含start）位置到end（不包含end）位置的一组元素覆盖以target为开始位置的地方，如代码示例2-54所示。

代码示例2-54　copyWithin

如果start、end参数是负数，则用数组长度加上该参数来确定相应的位置，如代码示例2-55所示。

代码示例2-55

需要注意copyWithin（）改变的是数组本身，并返回改变后的数组，而不是返回原数组的副本。

2.6.7　Array.entries（）∕.keys（）∕.values（）

entries（）、keys（）与values（）都返回一个数组迭代器对象，如代码示例2-56所示。

代码示例2-56

迭代器的next（）方法返回的是一个包含value属性与done属性的对象，而value属性是当前遍历位置的值，done属性是一个布尔值，表示遍历是否结束。

也可以用for…of来遍历迭代器，如代码示例2-57所示。

代码示例2-57

2.6.8　Array.fill（）

Array.fill（）方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引，语法如下：

参数start、end是填充区间，包含start位置，但不包含end位置。如果省略，则start的默认值为0，end的默认值为数组长度。如果两个可选参数中有一个是负数，则用数组长度加上该数来确定相应的位置，如代码示例2-58所示。

代码示例2-58

2.6.9　flat（）、flatMap（）

flat（）和flatMap（）函数可以实现将嵌套数组转为一维数组。

1．flat（）

把多维数组转换成一维数组，如代码示例2-59所示。

代码示例2-59

指定转换的嵌套层数，如代码示例2-60所示。

代码示例2-60

不管嵌套多少层，如代码示例2-61所示。

代码示例2-61

自动跳过空位，如代码示例2-62所示。

代码示例2-62

2．flatMap（）

先对数组中的每个元素进行处理，再对数组执行flat（）方法，如代码示例2-63所示。

代码示例2-63 x9Eodld8FkSaXy0gDbAOWGgCv0yIHvHrD/Olnx7mpagjxV7KDPAKtmIcvByH72wR