介绍假期还没结束，明天还要上班。自己在家写了一篇比较基础的文章，在这里分享给大家。如需转载，请联系本人。背景...运算符是ES6中新引入的算法，也叫expand/collect运算符，我们每天都要和它打交道。在这篇文章中，我将带大家系统地回顾一下这个算子，并介绍一些基本和高级的用法。基础知识先看看官方的描述：Spread语法允许一个iterable，比如数组表达式或字符串，在需要0个或多个参数或元素的地方展开，或者一个对象表达式在一些地方展开其中需要0个或多个键值对（对于对象文字）。简而言之，...运算符扩展可迭代对象的所有项。可迭代对象一般指的是可以循环的对象，包括：字符串、数组、集合等。我们来看几个基本的例子来加深理解。基本用法基本用法1：展开consta=[2,3,4]constb=[1,...a,5]b;//[1,2,3,4,5]基本用法2:Collectfunctionfoo(a,b,...c){console.日志(a,b,c)}foo(1,2,3,4,5);//1,2,[3,4,5]...如果没有命名参数，将收集所有参数：functionfoo(...args){console.log(args)}foo(1,2,3,4,5);//[1,2,3,4,5]关于这个集合的用法，官方描述：“Afunction'slastparametercanbeprefixedwith...whichwillcauseallremaining(usersupplied)argumentstobeplacedwithin“标准”javascript数组。只有最后一个参数可以是剩余参数。”这个操作符一定要在最后一个参数的位置，这个也很好理解，就是“收集之前剩下的参数”。记住rest参数一定要是最后一个参数，不然会报错。如果是不是最后一个参数，会报错。不得不感叹，这个操作符的设计真是奇葩，可以随意展开，收起，收起，真是好用。基本用法3：将类数组转换为arrays展开运算符“...”也可以将某些数据结构转换成数组，我们先回顾一下什么是类数组，类数组和数组很接近，都可以有一系列的元素也有一个length属性，最大的区别是：类数组没有数组的一系列方法。例如：constnodeList=document.getElementsByClassName("test");constarray=[...nodeList];控制台日志（节点列表）；//结果：HTMLCollection[div.test,div.test]console.log(array);//Result:Array[div.test,div.test]使用...实现类数组到数组的转换。转换后，可以使用数组的各种方法。还记得这个运算符出来之前是怎么转换的吗？这道题还是今日头条的前端面试题。看例子：//ES5erafunctionbar(){varargs=Array.prototype.slice.call(arguments);//调用push添加几个元素args.push(1,2,3);//使用args作为传递参数给foofoo.apply(null,args)}//ES6erafunctionfoo(...args){//收集参数给argsargs.push(4,5,6)console.log(...args)//展开args}bar(0);//0123456基本用法4：添加元素或属性1：向数组添加新成员constpokemon=['KK','Peter'];constcharmander='EkinCheng';constpokedex=[...宠物小精灵，charmander];console.log(pokedex);//Result:['KK','Peter','郑伊健']2:给对象添加一个属性constbasicSquirtle={name:'Squirtle',type:'Water'};constfullSquirtle={...basicSquirtle,species:'TinyTurtle',evolution:'Wartortle'};控制台日志（fullSquirtle）；//Result:{name:'Squirtle',type:'Water',species:'TinyTurtle',evolution:'Wartortle'}基本用法5：合并数组/对象合并数组：constpokemon=['Squirtle','Bulbasur','Charmander'];constmorePokemon=['Totodile','Chikorita','Cyndaquil'];constpokedex=[...pokemon,...morePokemon];console.log(pokedex);//结果:['Squirtle','Bulbasur','Charmander','Totodile','Chikorita','Cyndaquil']//对象数组：constpokemon=[{name:'Squirtle',type:'Water'},{名称:'Bulbasur',类型:'Plant'}];constmorePokemon=[{name:'Charmander',type:'Fire'}];constpokedex=[...口袋妖怪，...更多口袋妖怪];控制台日志（图鉴）；//结果：[{name:'Squirtle',type:'Water'},{name:'Bulbasur',type:'Plant'},{name:'Charmander',type:'Fire'}]mergeobjectconstbaseSquirtle={name:'Squirtle',type:'Water'};constsquirtleDetails={species:'TinyTurtlePokemon',evolution:'Wartortle'};constsquirtle={...baseSquirtle,...squirtleDetails};console.log(squirtle);//Result:{name:'Squirtle',type:'Water',species:'TinyTurtlePokemon',evolution:'Wartortle'}以上是一些基本的费用用法下面介绍...操作符的一些高级用法高级1.使用嵌套结构复制数据/对象先来看一个例子：constpokemon={name:'Squirtle',type:'Water',abilities:['Torrent','RainDish']};constsquirtleClone={...宠物小精灵};pokemon.name='Charmander';pokemon.abilities.push('Surf');console.log(squirtleClone);//Result:{name:'Squirtle',type:'Water',abilities:['Torrent','RainDish','Surf']}当我们修改原始对象的name属性时，我们的name属性克隆对象不受影响，符合我们的预期。但是当修改原始对象的abilities属性时，我们克隆的对象也被修改了。原因也很简单，因为复制的能力是引用类型，如果改变了原始数据，使用的地方也会随之改变。知道了原因，解决起来就很简单了。两种方式：1：复制引用类型的数据constpokemon={name:'Squirtle',type:'Water',abilities:['Torrent','RainDish']};constsquirtleClone={...pokemon,能力:[...pokemon.abilities]};pokemon.name='Charmander';pokemon.abilities.push('Surf');console.log(squirtleClone);//Result:{name:'Squirtle',type:'Water',abilities:['Torrent','RainDish']}这样就可以了2：深克隆这里就不多说了。2：添加条件属性顾名思义就是需要根据条件添加的属性。看一个例子：constpokemon={name:'Squirtle',type:'Water'};constabilities=['Torrent','雨碟'];constfullPokemon=能力？{...口袋妖怪，能力}：口袋妖怪;console.log（fullPokemon）;3：短路constpokemon={名称：'Squirtle'，类型：'Water'};constabilities=['Torrent','雨碟'];constfullPokemon={...宠物小精灵，...（能力&&{能力}）};console.log（fullPokemon）;如果abilities为true，则相当于constfullPokemon={...pokemon,...{abilities}}这也是一个很好用的Skill。3：默认结构和添加默认属性默认解构：我们知道在构造对象时，如果对象中没有属性，解决方法是undefined，我们可以添加一个默认值来解决：constpokemon={id:1,名称:'Squirtle'};const{type,name}=pokemon;console.log(name);//结果：Squirtleconsole.log（类型）；//结果：未定义//将默认值分配给类型变量const{type='Water',name}=pokemon;console.log(type);//Result:Wateraddeddefaultattributes有时候我们会遇到这样的情况，一个对象，大部分的属性都是相似的，只有一小部分是不一样的。这时候我们可以设置一个具有基本属性的基本对象，通过扩展这个对象可以得到其他的对象。看例子：constpokemon={name:'Squirtle',type:'Water'};//给能力赋默认值const{abilities=[],...rest}=pokemon;constfullSquirtle={...rest,abilities};console.log(rest);//Result:{name:'Squirtle',type:'Water'}console.log({fullSquirtle});//Result:{name:'Squirtle',type:'Water',abilities:[]}这里就是把剩下的展开，合并abilities，得到完整的数据。如果有一批数据需要处理，这个方法也很方便：constpokemon=[{name:'Charmander',type:'Fire'},{name:'Squirtle',type:'Water',abilities:['Torrent','雨盘']},{name:'Bulbasur',type:'Plant'}];functionsetDefaultAbilities(object){const{abilities=[],...rest}=object;return{...rest,abilities};}//将setDefaultAbilities函数应用于数组中的所有pokemon：constnormalizedPokemon=pokemon.map(pokemon=>setDefaultAbilities(pokemon));console.log(normalizedPokemon);//结果：[{name:'Charmander',type:'Fire',abilities:[]},{name:'Squirtle',type:'Water',abilities:['Torrent','RainDish']},{name:'Bulbasur',type:'Plant',abilities:[]}]这样迭代一次后，所有对象都具有abilities的属性。综上所述……操作员非常灵活，收放方便，功能非常强大。我希望我们都能很好地掌握这个工具。就这些了，希望对大家有所帮助，如有错误，欢迎指正。最后，如果觉得内容有帮助，可以关注我的公众号《前端e进阶》，一起学习成长。可以通过公众号菜单栏联系我了解我们的微信群，谢谢。
