[译] 6 种 JavaScript 展开操作符的绝妙使用

本文翻译自:6 Great Uses of the Spread Operator

spread operator with emoji

不使用 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
spread operator with emoji

这些复合 emoji 字符甚至还允许做替换,形成新的 emoji 字符。
replace emoji

这些人好闲。

-- EOF --

此条目发表在 前端开发 分类目录,贴了 , , 标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

5 + 4 =