案例：

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

// 1 2 3

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

// 1 2 3 4 5

[...document.querySelectorAll('div')]

// [<div>, <div>, <div>]

该运算符主要用于函数调用。

function push(array, ...items) {

  array.push(...items);

}

function add(x, y) {

  return x + y;

}

const numbers = [4, 38];

add(...numbers) // 42

rray.push(...items)和add(...numbers)都是函数的调用，它们都使用了扩展运算符，将一个数组，变为参数序列；

扩展运算符与正常的函数参数结合使用：

function f(v, w, x, y, z) { }

const args = [0, 1];

f(-1, ...args, 2, ...[3]);

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

const arr = [

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

  'b',

];

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

[...[], 1]

// [1]

注意，只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错：

(...[1, 2])

// Uncaught SyntaxError: Unexpected number

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

// Uncaught SyntaxError: Unexpected number

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

// 1 2

复制数组：扩展运算符提供了复制数组的简便写法：

const a1 = [1, 2];

// 写法一

const a2 = [...a1];

// 写法二

const [...a2] = a1;

合并数组：扩展运算符提供了数组合并的新写法：

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' ]

这两种方法都是浅拷贝，使用的时候需要注意。

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

a3和a4是用两种不同方法合并而成的新数组，但是它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了引用指向的值，会同步反映到新数组。

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

// ES5

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

// ES6

[a, ...rest] = list

const [first, ...rest] = [1, 2, 3, 4, 5];

first // 1

rest  // [2, 3, 4, 5]

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

first // undefined

rest  // []

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

first  // "foo"

rest   // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错：

const [...butLast, last] = [1, 2, 3, 4, 5];

// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];

// 报错

字符串：扩展运算符还可以将字符串转为真正的数组。

[...'hello']

// [ "h", "e", "l", "l", "o" ]

上面的写法，有一个重要的好处，那就是能够正确识别四个字节的 Unicode 字符

'x\uD83D\uDE80y'.length // 4

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

上面代码的第一种写法，JavaScript 会将四个字节的 Unicode 字符，识别为 2 个字符，采用扩展运算符就没有这个问题。因此，正确返回字符串长度的函数，可以像下面这样写。

function length(str) {

  return [...str].length;

}

length('x\uD83D\uDE80y') // 3

凡是涉及到操作四个字节的 Unicode 字符的函数，都有这个问题。因此，最好都用扩展运算符改写。

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

let nodeList = document.querySelectorAll('div');

let array = [...nodeList];

querySelectorAll方法返回的是一个NodeList对象。它不是数组，而是一个类似数组的对象。这时，扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了 Iterator；对于那些没有部署 Iterator 接口的类似数组的对象，扩展运算符就无法将其转为真正的数组。

Map和Set以及Generator 函数：扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符：

let map = new Map([

  [1, 'one'],

  [2, 'two'],

  [3, 'three'],

]);

let arr = [...map.keys()]; // [1, 2, 3]

const go = function*(){

  yield 1;

  yield 2;

  yield 3;

};

[...go()] // [1, 2, 3]

Generator 函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符

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']

常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组：

// NodeList对象

let ps = document.querySelectorAll('p');

Array.from(ps).filter(p => {

  return p.textContent.length > 100;

});

// arguments对象

function foo() {

  var args = Array.from(arguments);

  // ...

}

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

Array.from('hello')

// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])

Array.from(namesSet) // ['a', 'b']

如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组：

Array.from([1, 2, 3])

// [1, 2, 3]

值得提醒的是，扩展运算符（...）也可以将某些数据结构转为数组

// arguments对象

function foo() {

  const args = [...arguments];

}

// NodeList对象

[...document.querySelectorAll('div')]

扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过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]

Array.from()可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，只要有一个原始的数据结构，你就可以先对它的值进行处理，然后转成规范的数组结构，进而就可以使用数量众多的数组方法：

Array.from({ length: 2 }, () => 'jack')

// ['jack', 'jack']

Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于\uFFFF的 Unicode 字符，算作两个字符的 bug：

function countSymbols(string) {

  return Array.from(string).length;

}

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

Array.of(3) // [3]

Array.of(3).length // 1

---------------------------------------------------------------------

Array() // []

Array(3) // [, , ,]

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

上面代码中，Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于 2 个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。

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

// [4, 5, 3, 4, 5]

表示将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，由于这里有4和5作为替换元素，所以，就仅仅覆盖了原来的 1 和 2。

----------------------------------------------------------------------------

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

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

由于包头不包尾，start=3，end=4，这里就只有数组元素4，且只有一个，因此，只能覆盖array[0]了，即将3号位复制到0号位

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

寻找小于0的数组元素

[1, 5, 10, 15].find(function(value, index, arr) {

  return value > 9;

}) // 10

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

--------------上面2个案例，其find方法只有一个参数，其实find还可以接受2个参数

function f(v){

  return v > this.age;

}

let person = {name: 'John', age: 20};

[10, 12, 26, 15].find(f, person);    // 26

['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']

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

还是包头，不包尾

for (let index of ['a', 'b'].keys()) {

  console.log(index);

}

// 0

// 1

for (let elem of ['a', 'b'].values()) {

  console.log(elem);

}

// 'a'

// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {

  console.log(index, elem);

}

// 0 "a"

// 1 "b"

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

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

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

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

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

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

①

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

// [1, 2, 3, 4]

②

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

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

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

③

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

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

flat()的参数为2，表示要“拉平”两层的嵌套数组。

④

[1, [2, [3]]].flat(Infinity)

// [1, 2, 3]

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

⑤

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

// [1, 2, 4, 5]

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

⑥

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()

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

// [2, 4, 3, 6, 4, 8]

⑦

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()

[1, 2, 3, 4].flatMap(x => [[x * 2]])

// [[2], [4], [6], [8]]

flatMap()只能展开一层数组。