扩展运算符的运用

// 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];
// 写法二
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" ]

…运算符还解决了unicode字符的长度计算问题。

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

除了可以将字符串转换成数组，…还能将任何定义了遍历器（Iterator）接口的对象转换成真正的数组。

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

合并对象
…在ES2018中被引入到对象中，因此对象也可以像数组一样合并。
在ES2015中，我们用Object.assign()来合并对象，在ES2018中就可以用…运算符代替。

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

作者：易推倒DE小狼
链接：https://www.jianshu.com/p/6513f46ad2b9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。