前端技巧|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)
最后想学习web前端的同学,可以参考千锋web前端培训班提供的web前端学习路线,该学习路线对从零基础小白到web前端初级开发工程师,web前端高级开发工程师,后面的web前端大神级开发工程师都有一个明确清晰的指导,根据千锋web前端培训机构提供的web前端学习路线图可以让你对学习web前端开发需要掌握的知识有个清晰的了解,并快速入门web前端开发。想要获取前端完整学习路线和免费的学习资料可以添加我们的web前端技术分享交流qq群:857920838 加群找群管理领取即可,等你来哦~~