当前位置: 首页 > Web前端 > HTML5

JavaScript展开运算符(Spreadoperator)介绍

时间:2023-04-05 21:33:49 HTML5

本文介绍JavaScript展开运算符(Spreadoperator)....本文适合ES6初学者。你可以用Spread运算符....展开一个数组对象和一个字符串。展开运算符(spread)是三个点(...),它可以将一个可迭代对象转换成一个以逗号分隔的参数序列。就像rest参数的逆运算一样。对于数组以数组为例,首先创建一个数组,consta=[1,2,3],b=[4,5,6];您可以轻松地分配一个数组:constc=[...a]//[1,2,3]您还可以轻松地连接两个数组:constd=[...a,...b]//[1,2,3,4,5,6]也可以如下拼接constd=[...a,4,5,6]//[1,2,3,4,5,6]如果你想把一个数组b的所有元素插入到数组a后面(没有newArray),可以这样操作:consta=[1,2,3];a.push(...b);如果要将数组b的所有元素插入到数组a的前面(不生成新数组),可以这样做:consta=[1,2,3];A。取消移位(...b);类数组对象变成数组您可以使用展开运算符将类数组对象变成真正的数组:varlist=document.getElementsByTagName('a');vararr=[..list];对于对象展开运算符也可用于对象。可以通过以下方式克隆一个对象:constnewObj={...oldObj}注意:如果属性值是一个对象,则只会生成对该对象的引用,而不会进行深度复制。也就是说,展开运算符不会递归地深度复制所有属性。而且,只会复制可枚举属性,不会复制原型链。它还可以用于合并两个对象。constobj1={a:111,b:222};constobj2={c:333,d:444};constmerged={...obj1,...obj2};控制台日志(合并);//->{a:111,b:222,c:333,d:444}当然也可以适用于以下几种情况:constothers={third:3,fourth:4,fifth:5}constitems={first:1,second:1,...others}items//{first:1,second:2,third:3,fourth:4,fifth:5}如果合并的多个对象有相同的属性,那么后面的对象会覆盖前面对象的属性,比如constobj1={a:111,b:222};constobj2={b:333,d:444};constmerged={...obj1,...obj2};控制台.log(合并);//->{a:111,b:333,d:444}constobj1={a:111,b:222}constmerged={a:222,...obj1};控制台.log(合并);//->{a:111,b:333}constobj1={a:111,b:222}constmerged={...obj1,a:222};控制台日志(合并);//->{a:222,b:333}用于字符串。一个字符串可以通过展开运算符分解成一个字符数组,相当于consthey='hey'constarrayized=[...hey]//['h','e','y']上面的代码等同于:consthey='hey'constarrayized=hey.split('')//['h','e','y']用于给函数传递参数。通过展开运算符,可以通过数组给函数传递参数:constf=(foo,bar)=>{}consta=[1,2]f(...a)constnumbers=[1,2,3,4,5]constsum=(a,b,c,d,e)=>a+b+c+d+econstsum=sum(...numbers)forobjectswithIteratorinterfaceObjectswithIteratorinterfaceMapandSetstructure,Generatorfunction,可以使用展开运算符,如:vars=newSet();s.add(1);s.add(2);vararr=[...s]//[1,2]function*gen(){yield1;产量2;yield3;}vararr=[...gen()]//如果1,2,3是映射,每个键和值将被转换成一个数组:varm=newMap();m.set(1,1)米。set(2,2)vararr=[...m]//[[1,1],[2,2]]注意下面的代码会报错,因为obj不是Iterator对象:varobj={'key1':'value1'};vararray=[...obj];//TypeError:objisnotiterable欢迎关注公众号《ITman表叔》表叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript。对计算机图形学、WebGL、前端可视化有深入研究。对程序员思维能力培养与培养、程序员职业生涯规划、程序员金融投资有着浓厚的兴趣。