六、扩展运算符
可分为 数组的扩展运算符 [...] 和对象的扩展运算符 {...} 两大类
作用1:实现浅拷贝,避免污染数据。
特点:浅拷贝后得到的对象/数组,与源对象/数组互不影响
【实际应用:上拉加载数据】
代码实现:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
let arr=[2,3,4,5]; let obj={name:"李四",age:18,grade:"One",mark:"A"}; let newArr=[...arr]; //newArr与arr指向不同的内存空间,实现浅拷贝 let newObj={...obj} ;//newObj与obj指向不同的内存空间,实现浅拷贝 console.log(newArr,arr); console.log(newObj,obj);
作用2:实现数组的合并
特点:合并数组 、合并对象
【实际应用:前端通过组合 对象,返回数据给后台】
代码实现:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
let data=[ //第一页数据 {id:1,title:"羊肉串"}, {id:2,title:"猪肉串"}, {id:3,title:"牛肉串"}, ]; let newData=[ //第二页数据 {id:4,title:"啤酒"}, {id:5,title:"可乐"}, {id:6,title:"雪碧"}, {id:7,title:"达芬奇"}, ]; let data2=[...data,...newData]; //合并的方式1 newData.push(...data);//合并的方式2 newData=[...data];//错误合并1:newData会被覆盖 newData.push([...data]);//错误合并2:将data作为整体放进去了 console.log(newData,data2);
es6可以用扩展运算符实现浅拷贝,es5可以用for循环实现浅拷贝。
es5用for循环实现数组的浅拷贝
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var arr=[2,3,4,5]; var newArr=[]; for(var i=0;i<arr.length;i++){ newArr[i]=arr[i]; } newArr.push(7); console.log(newArr);
es5用for循环实现对象的浅拷贝
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var obj={name:"李四",age:18,grade:"One",mark:"A"}; var newObj={}; for(key in obj){ newObj[key]=obj[key]; } newObj.English=90; console.log(newObj,obj);