ES6 数组的扩展

Question

扩展运算符替代函数的 apply 方法

// ES5 的写法
function f(x, y, z) {
    // ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6 的写法
function f(x, y, z) {
    // ...
}
let args = [0, 1, 2];
f(...args);

应用：

复制数组

const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

合并数组

// 这两种方法都是浅拷贝
const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);

const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true

与解构赋值结合

将字符串、类数组转为真正的数组

能够正确识别四个字节的 Unicode 字符

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

Map 和 Set 结构，Generator 函数

扩展运算符内部调用的是数据结构的 Iterator 接口（Symbol.iterator），因此只要具有 Iterator 接口的对象，都可以使用扩展运算符

数组的空位

数组的空位指，数组的某一个位置没有任何值。比如， Array 构造函数返回的数组都是空位.空位不是 undefined ，一个位置的值等于 undefined ，依然是有值的。空位是没有任何值，in 运算符可以说明这一点

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

ES5 对空位的处理，已经很不一致了，大多数情况下会忽略空位。

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

// forEach 方法
[,'a'].forEach((x,i) => console.log(i)); // 1
// filter 方法
['a',,'b'].filter(x => true) // ['a','b']
// every 方法
[,'a'].every(x => x==='a') // true
// reduce 方法
[1,,2].reduce((x,y) => x+y) // 3
// some 方法
[,'a'].some(x => x !== 'a') // false
// map 方法
[,'a'].map(x => 1) // [,1]
// join 方法
[,'a',undefined,null].join('#') // "#a##"
// toString 方法
[,'a',undefined,null].toString() // ",a,,"

ES6 则是明确将空位转为 undefined：

• Array.from() 方法会将数组的空位，转为 undefined
• 扩展运算符 （...） 也会将空位转为 undefined
• copyWithin() 会连空位一起拷贝
• fill() 会将空位视为正常的数组位置
• for...of 循环也会遍历空位
• entries()、keys()、values()、find() 和 findIndex() 会将空位处理成 undefined