一、扩展运算符

扩展运算符是三个点...。它好比rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

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

扩展运算符可以与函数参数结合使用，较为灵活：

function f(v, w, x, y, z) { }
const args = [0, 1]
f(-1, ...args, 2, ...[3])

扩展运算符后面还可以写表达式：

const arr = [
  ...(x > 0 ? ['a'] : [])
  'b'
]

下面介绍扩展运算符的几种用法

1. 替代apply方法

由于扩展运算符可以展开数组，所以就不需要apply方法了，我们可以直接将数组当做参数传入函数中，比如：

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

2. 复制数组

当然，这里也只是复制了数组的指针而非真正的复制。

// ES5写法
var a = [1,2,3]
var b = a.concat()

// ES6写法
var a = [1,2,3]
var b = [...a]
// 也可以这么写，利用了解构赋值
vat [...b] = a

3. 合并数组

同样，这里也是浅拷贝。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

4. 与解构赋值结合使用

扩展运算符可以与解构赋值结合起来，用于生成数组。

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

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

值得注意的是，扩展运算符必须放在参数的最后一位，否则会报错，这里我把它也理解为rest，即扩展运算符已经代表剩下的部分了，如果后面再有参数，也没法再复制了，会造成不完全解构。

5. 字符串的转换

扩展运算符可以把字符串转为真正的数组，以前在使用python的时候，我们可以通过list()轻易的将一个字符串转为数组，但是在JavaScript中就比较困难了

a = 'string'
b = []
for (let i in a) {
    b.push(a[i])
}
console.log(b) // ["s", "t", "r", "i", "n", "g"]

但是如果使用扩展运算符就会变得非常简单

a = [...'string']
console.log(a) // ["s", "t", "r", "i", "n", "g"]

这种写法还有一个非常棒的地方就是能够正确识别四个字节的Unicode字符。

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

6. 部署了Iterator接口的对象的转换

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

Number.prototype[Symbol.iterator] = function*() {
  let i = 0;
  let num = this.valueOf();
  while (i < num) {
    yield i++;
  }
}

console.log([...5]) // [0, 1, 2, 3, 4]

上面代码中，先定义了Number对象的遍历器接口，扩展运算符将5自动转成Number实例以后，就会调用这个接口，就会返回自定义的结果。
对于没有部署Iterator接口的对象，扩展运算符无法将其转换为数组，而是会报错。

二、Array.from()

1. 数组的生成和转换

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构Set和Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

总的来说只要是部署Iterator接口的对象，都可以被Array.from()转为真正的数组，前面提到扩展运算符也有相同的作用，那么两者的区别在哪里呢：区别在于扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

obj = {
    '0':'name',
    '1':'age',
    '3':'tel',
    'length':5
}

[...obj] // Uncaught TypeError: object is not iterable

Array.from(obj) // ["name", "age", undefined, "tel", undefined]

我们可以用该方法生成长度固定的数组：

Array.from({ length: 3 }) // [ undefined, undefined, undefined ]

2. Array.from()的回调函数

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

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

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

比如，我们可以通过该方法将数组中的undefined转为0:

Array.from([1,2,3,undefined,5], item => item || 0) // [1, 2, 3, 0, 5]

如果map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。

三、Array.of()

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

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。比如：

arr = new Array(3) // [empty × 3]

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

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

四、find()和findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。类似于filter，只不过是filter会把所有符合条件的值都找出来，而find只找到第一个

[1, 4, -5, 10].find((n) => n < 0) // -5

[1, 4, -5, 10].filter((n) => n < 0) // [-5]

find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

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

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

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

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

五、copyWithin()

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

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

它接受三个参数：

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

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

六、fill()方法

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

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

new Array(3).fill(7)
// [7, 7, 7]

该方法可以用来初始化数组，比如：

let arr = new Array(3).fill('jack')
console.log(arr) // ["jack", "jack", "jack"]

当然我们亦可以通过其他方法初始化数组，比如：

let arr = Array.from({length:3}, () => 'jack')
console.log(arr) // ["jack", "jack", "jack"]

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

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

七、includes()方法

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

虽然我们可以使用indexOf来判断一个数组中是否含有某一元素，但是indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符===进行判断，这会导致对NaN的误判。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

八、flat(), flatMap()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。该方法可以接受1个参数表示需要拉平的层数，默认为1：

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

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

[1, 2, [3, [4, 5]]].flat(Infinity)  // 表示将多维数组变成一位数组
// [1, 2, 3, 4, 5]

我们可以用该方法去除数组中的空项：

[1,2,,4,[5,6]].flat(0) // [1,2,4,[5,6]]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

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

该方法只能拉平一层。flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。

九、数组的空位

空位不是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。

参考链接

作者：阮一峰
链接：http://es6.ruanyifeng.com/#docs/destructuring