数组的拓展运算符

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

一.拓展运算符

1.基本定义

• ① 数组前添加三个点(...)，代表了逗号分割的参数序列。

  //一  定义范例
  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>]
  

• ② 主要使用场景是函数调用

  //array.push(...items)和add(...numbers)这两行都将数组，变为参数序列
  function push(array, ...items) {
    array.push(...items);
  }
  
  function add(x, y) {
    return x + y;
  }
  
  const numbers = [4, 38];
  add(...numbers) // 42
  

• ③ 与正常参数联合使用

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

二.扩展运算符的应用

1.替代函数的 apply 方法

• 使用拓展运算符展开数组，不需要使用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);
  

• 更多范例一，使用Math.max获取数组最大元素。

  // ES5 的写法
  Math.max.apply(null, [14, 3, 77])
  
  // ES6 的写法
  Math.max(...[14, 3, 77])
  
  // 等同于
  Math.max(14, 3, 77);
  

• 更多范例二，通过push函数，将一个数组添加到另一个数组的尾部。以及创建Date对象

  // 一
  // ES5的 写法
  var arr1 = [0, 1, 2];
  var arr2 = [3, 4, 5];
  Array.prototype.push.apply(arr1, arr2);
  
  // ES6 的写法
  let arr1 = [0, 1, 2];
  let arr2 = [3, 4, 5];
  arr1.push(...arr2);
  
  //二
  // ES5
  new (Date.bind.apply(Date, [null, 2015, 1, 1]))
  // ES6
  new Date(...[2015, 1, 1]);
  

2.复制数组

• ES5中使用变通方式复制数组

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

• ES6中复制数组的简便方式

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

3.合并数组

• 合并数组，下面2种方式都是浅拷贝

  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.与解构赋值结合

• 扩展运算符可以与解构赋值结合起来，用于生成数组。解构赋值参数只能在最后一位。

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

5.在字符串中使用

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

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

• 第一种写法，JavaScript 会将四个字节的 Unicode 字符，识别为 2 个字符，采用扩展运算符就没有这个问题。

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

6.将实现了 Iterator 接口的对象转换为数组

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

  let nodeList = document.querySelectorAll('div');
  let array = [...nodeList];