web前端技术分享:es6展开运算符概念和使用!

对于数组的处理,开发者不断的在创造更好的方式,而在ES2015(ES6) 新增了一种基本运算符——展开运算符.使用三个点 … 表示,它的作用是在调用函数、数组构造时将数组表达式或字符串在语法层面进行展开;构建字面量的对象时以键值对的形式进行展开。

这里小千给大家介绍一下它的基本用法:
在这里插入图片描述
构建字面量语法的数组

通常情况下构建字面量结构的数组我们会使用如 push splice unshift concat 等函数将现有数组作为新数组的一部分。

展开运算符可以更简单快速的完成这项工作。
在这里插入图片描述
链接数组

在拥有展开运算符以前 我们通常使用 concat 函数 进行数组的链接
在这里插入图片描述
数组拷贝
在这里插入图片描述
从以上结果我们可以看出 展开运算符只遍历展开数组的第一层(浅拷贝)。 展开的结果如果是引用类型则不继续向下遍历。 事实上它的行为和 Object.assign() 是相同的

对象拷贝和合并
在这里插入图片描述
使用展开运算符进行新对象构造 本质上是讲原有对象中的所有 可枚举 属性拷贝到新对象中; 与 Object.assign() 不同的是 Object.assign()会触发setters 展开运算符不会。

rest参数(剩余参数)

ES2015 引入 rest参数(语法为 …变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。 这个特性可以让我们在一些特定环境更方便的去处理参数(例如没有arguments的箭头函数)
在这里插入图片描述
我们也可以对部分参数使用rest参数,但是在rest参数后不能有其他参数(rest必须是最后一个参数)
在这里插入图片描述
注意点: 在数组或函数参数中使用展开语法时, 只能用于 可迭代对象(支持 iterator)
在这里插入图片描述
以上就是小千分享es6展开运算符概念和基本用法,希望对大家有帮助。

猜你喜欢

转载自blog.csdn.net/xiaoxijinger/article/details/114671714