随着 ES6 的出现，编写 JavaScript 变得越来越灵活。新的语法让代码更简洁，可读性更高。ES6 新增了很多特性，扩展运算符就是其中一个。简单的三个点号，让原本繁琐的代码瞬间变得简洁、优雅。那么，就让我们看看它有哪些常见用法吧。
让函数的 Apply 调用方式成为过去
有时候我们需要通过 Function.prototype.apply 来调用函数，参数就放在一个数组里。
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// 调用函数并传参
doStuff.apply(null, args);
现在有了展开运算符，我们可以完全避免使用 apply，只需在调用函数时在数组前加上展开运算符：
doStuff(...args);
代码变得更短、更简洁，也不需要一个毫无用处的 null！
合并数组
合并数组有各种方式，但是展开运算符为我们提供了一种新思路：
arr1.push(...arr2) // 在数组后面添加 arr2 里的元素
arr1.unshift(...arr2) //在数组前面添加 arr2 里的元素
如果你想合并两个数组，并且想把元素放到数组中的任何位置，你可以这么做：
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]
代码少了很多，还可以随意控制位置！
拷贝数组
拷贝数组是个常见的任务，过去我们使用 Array.prototype.slice
来完成，但现在我们可以通过展开运算符得到数组的副本：
var arr = [1,2,3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4)
这里要注意，数组里的对象仍然是引用类型的，因此实际上并不是所有内容都被“拷贝”了。
将参数或 NodeList 转成数组
跟拷贝数组类似，我们用 Array.Prototype.slice 将 NodeList和 arguments 对象转成真正的数组，但是现在我们可以使用展开运算符完成这个任务：
[...document.querySelectorAll('div')]
你甚至可以从函数签名里得到数组形式的参数：
var myFn = function(...args) {
// ...
}
Array.from也可以做同样的事情。
使用 Math对象里的相关函数
在参数个数不确定的函数里使用展开运算符，再合适不过了。
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
对象解构
解构操作在变量批量赋值上非常方便，省去了繁琐的声明和赋值操作。配合使用展开运算符，进一步简化操作：
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 }
ES6 不仅让 JavaScript 的开发效率更高，写代码也成了一种享受。现代浏览器都支持新的 ES6 语法，所以如果你还没玩过的话，确实值得一试。
本文介绍了展开运算符的几种常见用法，如果你有什么更好的例子，欢迎补充！
网友评论