本文翻译自:6 Great Uses of the Spread Operator
不使用 Apply 方法呼叫函数
这里指的是 Function.prototype.apply
,它允许我们将实参以数组形式传入函数并依次对应到形参上。
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
通过展开操作符我们可以避免使用 apply
并且轻松地使用它呼叫函数。
doStuff(...args);
代码更少,更干净,而且不需要使用多余的 null
!
合并数组
虽然已经有好多种方法可以合并数组,但是展开操作符又为我们提供了一个新方法:
arr1.push(...arr2); // Adds arr2 items to end of array
arr1.unshift(...arr2); // Adds arr2 items to beginning of array
如果你想合并两个数组并且把元素放在指定的位置,你可以使用:
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]; // like arr.slice()
arr2.push(4);
记住:数组中的对象依旧是引用关系,所以并不是所有内容都「拷贝」了。
转换 arguments 或 NodeList 对象到数组
就像拷贝数组一样,我们过去使用 Array.Prototype.slice
去转换 NodeList 和 arguments 对象(译注:都是类数组对象——有 length 属性,元素具备索引下标,但不具备数组方法)到真数组,现在我们只要用展开操作符来完成这个工作:
[...document.querySelectorAll('div')]
你甚至可以在函数声明里通过数组的方式获取参数(译注:作者这里指的是剩余操作符,跟展开操作符长的一样)。
var myFn = function(...args) {
// ...
}
别忘了你还可以使用 Array.from
这样做!
使用 Math
对象方法
因为展开操作符把数组「展开」到了不同参数上,所以接受任意数量参数的函数都可以使用展开操作符作为参数。
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
Math
对象的方法是使用展开操作符作为唯一参数传入函数的完美范例。
解构
解构是一个有趣的实践,我在我的 React 项目和一些 Node.js 应用中经常使用。你可以把解构和剩余操作符一起使用,并按你的想法提取内容到变量中(译注:下面示例的写法——在对象中使用展开操作符正处于 stage-3 阶段,还未加入标准,非所有浏览器都支持):
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 好好好,展开操作符好好好。原文写到这里就感叹号结束了}
额外内容
补充几条原文中评论里提到用法。
转换可迭代对象到数组:
[...new Map().set(true, 'yes').set(false, 'no')] // => [[true, 'yes'], [false, 'no']]
数组去重:
const arr = [7, 3, 1, 3, 3, 7];
[...new Set(arr)]; // => [7, 3, 1]
拆分字符串:
const str = "hello";
[...str]; // => ['h', 'e',' l',' l', 'o']
P.S 找这篇译文配图时发现的冷知识:
我知道很多 emoji 字符不是独立的 unicode 字符,而是由多个 emoji 组合而成。最常见的就是家庭 emoji 和有肤色的 emoji。但是……
重点来了……
所以你非用展开操作符的话,它们是可以拆散的!更多可以看 Wes Bos 的这条 Twitter。
这些复合 emoji 字符甚至还允许做替换,形成新的 emoji 字符。
这些人好闲。
-- EOF --