ES6中数组的扩展

1. 扩展运算符

用三个点(...)表示，它如同rest参数的逆运算，将数组转为用逗号分隔的参数序列。扩展就是将一个集合分成一个个的。

console.log(...[1, 2, 3]); // 1, 2, 3
1

可以用于函数调用

扩展运算符后还可以放置表达式

...(x > 0 ? ['a'] : [])
1

如果扩展运算符后是一个空数组，则不产生任何效果

[...[], 1]  // [1]
1

可以替代数组的apply方法

扩展运算符的应用

合并数组

ES5中使用concat方法

const arr1 = ['a', 'b'];
arr1.concat(['c']); // ['a', 'b', 'c']
1
2

ES6的合并数组

[...[1, 2, 3], ...[4, 5]]; // [1, 2, 3, 4, 5]
1

与解构赋值结合

用来生成数组

// ES5
a = list[0]; rest = list.slice(1);
// ES6
[a, ...rest] = list;
1
2
3
4

如果用于数组赋值，只能将其放在参数的最后一位，否则会报错。

const [...first, last] = [1, 2, 3, 4, 5]; // 报错
1

函数的返回值

函数只能返回一个值，如果要返回多个值，可以使用扩展运算符

字符串

将字符串转为真正的数组

[...'hello'] // ['h', 'e', 'l', 'l', 'o']
1

实现了Iterator接口的对象

任何Iterator接口的对象都可以用扩展运算符转为真正的数组。

Map和Set结构、Generator函数

扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对

象，都可以使用扩展运算符。

2. Array.from()

将类似数组的对象、可遍历对象转为真正的数组

只要是部署了Iterator接口的数据结构，Array.from都能转为数组。

Array.from('he');
// ['h', 'e']
1
2

类似数组的对象本质就是有length属性

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

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * X);
1
2
3

另一个应用，将字符串转为数组，返回字符串长度。

Array.from({length: 2}, () => 'jack');
// ['jack', 'jack']
// 通过length可以确定第二个参数的运行次数
1
2
3
4

3. Array.of()

将一组值转为数组

Array.of(3, 22, 3); // [3, 22, 3]
1

Array()的不足

Array() // []
Array(3) // [, , , ]
Array(3, 11, 8) // [3, 11, 8]
1
2
3

Array.of总是返回参数值组成的数组，如果没有参数就返回一个空数组。

Array.of方法可以用代码模拟

function ArrayOf() {
    return [].slice.call(arguments);
}
1
2
3

4. 数组实例的copyWithin()

会在当前数组内部将指定位置的成员复制到其他位置(会覆盖原有成员)，然后返回当前数组，也就是说，使用这个方法会修改当前的数组。

3个参数

• target(必选)，从该位置开始替换数据
• start(可选)， 从该位置开始读取数据，默认为0，如果是负数，表示倒数。
• end(可选)， 到该位置停止读取，默认数组的长度，如果是负数，表示倒数。

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
1
2

表示从下标为3的位置开始复制到数组末尾的数据，在下标为0的位置开始换数据。

对于没有copyWithin方法可以使用以下代码

[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);

// Int32Array [4, 2, 3, 4, 5]
1
2
3

5. 数组实例的find()和findIndex()

• find

find方法用于找出第一个符合条件的数组成员，参数是一个回调数，所有成员都会依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合的，返回undefined。

[1, 2, -5, 10].find((value, index, arr) => {
    return value > 0
})
// -5
1
2
3
4

上面的代码找出小于0的成员。

回调函数可以接受3个参数，依次是当前的值、当前的index以及原数组。

• findIndex

findIndex返回第一个符合条件的数组成员的位置，如果都不符合，返回-1。

第一个参数是回调函数，第二个参数可选，绑定this对象。

6. 数组实例的fill()

给定值填充一个数组。

['a', 'b', 'c'].fill(7); // [7, 7, 7]

1
2

特别适合空数组的初始化。

还可以接受第二个和第三个参数，用来指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2);
// ['a', 7, 'c']
1
2

上面的代码表示，fill方法从1号位开始向原数组填充7，到2号位之前结束。

7. 数组实例的entries()、keys()和values()

用来遍历数组，可用于for…of循环遍历。

分别是遍历键值对、键、值

for(let index of ['a', 'b'].keys()) {
    // code
}
1
2
3

8. 数组实例的includes()

方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串中的includes类似。

2个参数

• 第一个：要检测的值
• 第二个：开始搜索的位置，默认0。负数表示倒数，负数大于数组长度时，会重置为0

[1, 2, 3].includes(3, 3); // false

1
2

indexOf缺点

• 不够语气化，其含义是找到参数值第一个出现的位置，所以要比较是否不等于-1， 表达起来不直观。
• 内部使用严格相等运算符(===),会导致对NaN误判。

NaN和自身都不相等。

代替模拟代码

const contains = (() => {
    Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value);
})
1
2
3

Map结构中的has方法是用来查找键名的

Set结构中的has方法用来查找值的

9. 数组的空位

Array当参数为一个值是，则代表生成length为该值的空数组。

Array(3); // [, , ,]
1

在ES5中对空位处理很不一致

• forEach()、filter()、every()和some()都会跳过空位
• map()会跳过空位，但会保留这个值
• join()和toString()会将空位视为undefined，而undefined和null会被理解成空字符串。

在ES6中明确规定空位转为undefined

Array.from方法会将数组的空位转为undefined。

扩展运算符也会转为undefined

copyWithin方法会连空位一起复制

fill方法会将空位视为正常的数组位置

for…of 循环也会遍历空位

entries()、keys()、values()、find()和findIndex()会将空位转为undefined