JS扩展运算符的用途

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

...运算符主要用于数组和对象的一些操作。

 一、函数调用

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

由上面的例子可以看出，扩展运算符的第一个作用就是将数组变成一个参数序列。
以上这个特性带来的最显著的便利就是代替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);


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

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

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

 二、复制数组

我们都知道数组是引用类型，直接赋值，两个数组的指针指向的是同一个引用地址，改变其中一个数组内部成员的值也会同时改变另一个数组内对应的值。
因此，在es5中，我们用concact方法来克隆数组。

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

a2[0] = 2;
a1 // [1, 2]

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

三、合并数组

在上面的克隆数组的写法中，我们看到，在es5中我们是用合并空数组的方式模拟出克隆数组的效果，因此我们同样也可以用...运算符进行合并数组的操作。

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' ]
//不过，这两种方法都是浅拷贝，使用的时候需要注意。如果修改了原数组的成员，会同步反映到新数组。

四、将字符串转成数组

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

五、合并对象

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);