译者:kayson
感谢 ES6 和 Babel 这样的东西,编写 JavaScript 变得非常动态化,从新的语法到 JSX 这样的自定义转换。我已经成了展开运算符的铁杆粉丝,这三个点号可能改变你用 JavaScript 完成任务的方式。以下是我在 JavaScript 里最喜欢的展开运算符用法列表!
无需通过 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
Math 对象里的一系列方法就是把展开运算符作为唯一参数的绝佳例子。
解构的乐趣
解构是我在 React 项目里用得非常多的有趣做法,其他 Node.js 应用里也一样。你可以结合解构和剩余运算符,按照自己的需要把数据提取到变量里。
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 语法,所以如果你还没花点时间玩玩的话,确实应该试试。如果你更想试验下,不考虑环境的话,确保看下我的这篇文章 开始使用 ES6。无论如何,展开运算符是你应该知道的 JavaScript 特性!