六、扩展运算符

可分为 数组的扩展运算符 [...] 和对象的扩展运算符 {...}  两大类

 

作用1:实现浅拷贝,避免污染数据。

特点:浅拷贝后得到的对象/数组,与源对象/数组互不影响

【实际应用:上拉加载数据】

代码实现:

六、扩展运算符
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);
View Code

作用2:实现数组的合并

特点:合并数组 、合并对象

【实际应用:前端通过组合 对象,返回数据给后台】

代码实现:

六、扩展运算符
        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);
View Code

es6可以用扩展运算符实现浅拷贝,es5可以用for循环实现浅拷贝。

es5用for循环实现数组的浅拷贝

六、扩展运算符
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);
View Code

es5用for循环实现对象的浅拷贝

六、扩展运算符
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);
View Code

 

六、扩展运算符

上一篇:一辈子测试---桑皮


下一篇:Qt开发经验小技巧171-175