六、扩展运算符

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

 

作用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