ES6 数组的扩展速记

振作精神，努力更新！

先定个小目标，每周更新3篇内容！

本周：2022 - 06 - 27 ~ 2022 - 07 - 03 （ 第一篇 ）

三点运算符

应用：

1. 克隆数组

   let arr2 = [...arr1]

2. 合并数组

   let arr3 = [...arr1, ...arr2]

3. 与解构赋值结合

   let [a, ...arr2] = arr1

4. 字符串

   [...'hello']
   // [ "h", "e", "l", "l", "o" ]
   // 可识别四个字节的字符

5. 实现了 Iterator 接口的对象

   任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。

6. Map、Set结构，Generator 函数

数组的空位

ES5：

• forEach(), filter(), reduce(), every() 和some()都会跳过空位。

• map()会跳过空位，但会保留这个值

• join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

ES6：明确将空位转为undefined

• Array.from

• ...

• entries()、keys()、values()、find()和findIndex()会将空位处理成undefined

copyWithin()会连空位一起拷贝。

fill()会将空位视为正常的数组位置。

for...of循环也会遍历空位。

注意：由于空位的处理规则非常不统一，所以建议避免出现空位。

Array.from()

Array.from方法用于将两类对象转为真正的数组：

1. 类似数组的对象（array-like object）

2. 可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

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

Array.of()

Array.of方法用于将一组值，转换为数组。

主要目的是弥补数组构造函数Array()的不足.

参数个数的不同，会导致Array()的行为有差异。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

• target（必需）：从该位置开始替换数据。如果为负值，表示倒数。

• start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。

• end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

find() 和 findIndex()

find()，参数为回调函数，返回符合条件的第一个值。

findIndex方法的用法与find方法类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

这两个方法的回调函数都可以接受三个参数：当前值 value，当前位置 index，原数组 arr。

这两个方法都可以发现NaN。

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

arr.find(callback, obj)

fill()

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
​
new Array(3).fill(7)
// [7, 7, 7]
​
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

注意：填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]

entries()、keys()、values()

用于遍历数组，

keys()是对键名的遍历、

values()是对键值的遍历，

entries()是对键值对的遍历。

可以手动调用遍历器对象的next方法，进行遍历

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。

该方法的第二个参数表示搜索的起始位置，默认为0。

该方法可以检测 NaN。

flat()、flatMap()

该方法用于拉平嵌套的数组。

该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flat()默认只会“拉平”一层

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
​
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

原数组有空位，flat()方法会跳过空位

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。

flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。