js ...运算符_JS扩展运算符(Spread Operator)的5种用法

7471889c1f56563f55d89591d14efcac.png

扩展运算符是Javascript开发者比较喜欢的一个语法,因为简洁高效,也被使用在很多应用中。

下边介绍5种常见的用法:

复制数组

9819cf5cad7416ee417eecd5f570cb67.png

扩展操作符复制每个元素到一个完全新的数组中,两个数组不是引用关系。

合并多个数组

cbbac382646a1d53bf69989760b92167.png

扩展运算符把多个数组按照顺序,展开各自中的元素,放入一个新的数组中。

使用数组传递多个参数

92e7d04222b4a05b3e0d1ea482d0bfc9.png

扩展运算符接收一个数组参数,展开数组,把数组中每个元素分别赋值给对应位置上的函数参数。

复制对象

8c852281583470cec1f88bc971df7fb2.png

复制原始对象的每个key-value对给一个完全新的对象,同样不是引用关系。

合并对象

f90e7c28d4a1de1aa7da4954ade070a8.png

抽取数组中的每个key-value对,然后按照顺序分别赋值给一个新的对象。如果数组中存在key一样的情况,后边的数组的key值覆盖前边的数组key值。

看到这里了,那就来个彩蛋吧!

一个错误用法

b4e6028ab54095ebe0541e79f4cad6b2.png

虽然扩展运算符都可以用在数组和对象上,但是不能搞错数据类型。数组使用方括号[..arr],对象使用大括号{...obj}

文章简短,开卷有益~


相关文章:

使用Array.isArray更好地检查数组

JS扩展运算符(Spread Operator)的5种用法

如何使用ES6语法给数组去重

25个JavaScript代码简写技巧(上篇)