ES6扩展运算符 | Jeremy个人博客

随着ES6的出现，编写JavaScript代码越来越灵活，新的语法让代码更简洁，可读性更高。ES6 新增了很多特性，扩展运算符就是其中一个。简单的三个点号(…)，让原本繁琐的代码瞬间变得简洁、优雅。

下面我们通过几个例子来了解扩展运算符的作用。

当我们的函数有多个变量的时候（特别是当我们不知道变量的数量的时候），有时候会通过将变量保存在数组中，并通过call来执行函数，有了展开运算符后则有了更好的方式（毕竟使用call需要手动指定this，有时候会不是很方便很准确）

// 一般
function a(x, y, z) { }
var args = [0, 1, 2];
a.apply(null, args);

// 展开运算符
a(...args);

对比以上两种写法，可以发现使用扩展运算符，代码变得更短、更简洁，可以完全避免apply的使用，也不需要一个毫无用处的 null！

在ES6之前，拷贝数组我们可以通过数组的slice()方法，具体写法参考我的另一篇博客JS数组常用操作API
现在ES6的扩展运算符为我们提供了一种新的思路：

let arr = [1, 2, 3, 4, 5, 6];
let newArr = [...arr]

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

arr数组中的元素扩展成为单独元素被分配到newArr中。现在可以随意改变newArr数组，且都不会对源数组arr产生影响。这是因为，arr数组值被扩展后添加到newArr数组中，我们设置newArr等于arr的值，而不是其本身。

通常在数组中我们最常用地合并数组的方法就是concat()，现在我们通过扩展运算符也能够实现数组的合并

let arr1 = [3, 4];
let arr2 = [1, 2, ...arr1, 5, 6];

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

相比于concat方法，使用扩展运算符是不是更简单点呢?

我们在使用JavaScript内建对象Math时也可以结合扩展运算符，下面我们以Math.max()为例，Math.max()会返回一堆数字中最大的数。

1 2	Math.max(1, 2, 3); // 3

1 2	Math.max(100, 3, 4); // 100

如果不使用扩展运算符，最简单的方式是使用.apply()，将一个数组作为参数传入Math.max()

let arr = [4, 1, 12, 9, 7];
function max(arr) {
  return Math.max.apply(null, arr);
}
console.log(max(arr));   // 12

下面我们用扩展运算符来试试：

1 2	let arr = [4, 1, 12, 9, 7]; let max = Math.max(...arr); // 12

所以在参数个数不确定的函数里使用展开运算符，再合适不过了。

使用扩展运算符将字符串转换成数组。

1 2	let str = "hello"; let chars = [...str]; // ['h', 'e',' l',' l', 'o']

解构操作在变量批量赋值上非常方便，省去了繁琐的声明和赋值操作。配合使用展开运算符，进一步简化操作：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

本文介绍了展开运算符的几种常见用法，如果你还有更好玩的场景，欢迎告知！