JS扩展运算符的用途

从ES2015出来起，...扩展运算符就横空出世了，奈何因为各种原因，一直没在实际工作过程中应用到它，因此想在这里做个整理，便于自己之后查阅。本文参考阮一峰老师的 ECMASCRIPT 6 入门，觉得本文整理的不如你的预期的，可以移步阮老师原文。

扩展运算符（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" ]

...运算符还解决了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);

以上就是从阮一峰老师的书中整理出来的...运算符的使用场景，在此记录下供之后翻阅。

参考资料：
ECMASCRIPT 6入门阮一峰

最后编辑于：2019.10.02 21:53:09