当前位置: 首页 > 科技观察

在JavaScript中使用展开运算符的8种方法

时间:2023-03-17 19:30:46 科技观察

ES6引入了展开运算符(...)。展开运算符将可迭代对象(可以使用for循环遍历的任何对象)扩展到其各个元素中。可迭代对象的示例:Array、String、Map、Set、DOM节点。1.在日志中使用spreadoperator你可以在console.log中对可迭代对象使用spreadoperatorletfruits=['','','',''];console.log(...fruits);//2.使用展开运算符复制数组letfruits=['','','',''];letfruitsCopy=[...fruits];console.log(...fruitsCopy);//复制对象letuser={name:"John",age:20}letuserCopy={...user}传播运算符不执行深层复制。3、扩展运算符合并letfruits=['','','',''];letvegetables=['','',''];letfruitsAndVeg=[...fruits,...vegetables]Object合并对象时,如果某个键已经存在,则将其替换为具有相同键的最后一个对象。letuser1={name:"John",age:20};letuser2={name:"Ram",salary:'20K'};letuserCopy={...user1,...user2};userCopy;//{name:"Ram",age:20,salary:'20K'};4.展开运算符作为参数传递functionsum(a,b){returna+b;}letnum=[1,2];sum(...num);//3与数学函数一起使用letnum=[5,9,3,5,7];Math.min(...num);Math.max(...num);5.扩展运算operation字符在解构变量中let[melon,...fruits]=['','','',''];melon;//fruits;//['','','']解构对象letuser={name:"Ram",age:20,salary:'20K',job:"Tester"};let{name,age,...details}=user;name;//Ramage;//20details;//{salary:'20K',job:'Tester'};6.将NodeList对象转换为数组NodeList类似于数组,但它没有Array的所有方法,如forEach、map、filter等letnodeList=document.querySelectorAll('.class')varnodeArray=[...节点列表]7。将字符串转为字符串也是一个可迭代对象,所以我们也可以使用...转字符串。letname="Ram";letchars=[...name];//["R","a","m"]8.从数组中删除重复项letnum=[1,3,1,3,3,1];letuniqueNum=[...newSet(num)];uniqueNum;//[1,3]