写过vue的都知道,里面的任意赋值修改都可能会造成界面的修改
当我们不希望这种情况发生的时候我们就需要用到深拷贝
1.最简单也是最麻烦的方式
直接赋值是不可能的,使用循环for for in的方式可以实现
基础数据类型的赋值不会形成关联关系,可以达到目的
var a=[1,2,3,4,5];
var b=[];
for(let i=0,len=a.length;i<len;i++){
b[i]=a[i];
}
console.log(b);
b[0]=666;
console.log(b);
console.log(a);
2.使用JOSN对象的parse和stringify方法
var a=[1,2,3,4,5];
var b=JSON.parse(JSON.stringify(a));
console.log(b);
b[0]=666;
console.log(b);
console.log(a);
3.使用es6的...语法
var a=[1,2,3,4,5];
var b=[...a];
console.log(b);//[1, 2, 3, 4, 5]
b[0]=666;
console.log(b);//[666, 2, 3, 4, 5]
console.log(a);//[1, 2, 3, 4, 5]
小结:以上三种方式如果浏览器对es6比较好的话当然第三种是最好的,第二种方式虽然号称能支持95%的场景,但是还是有一些特殊场景会出现一些问题
比如数组里有function等属性使用方式将会丢失
var a=[1,2,3,4,5,function(){console.log("aaa")}];
var b=[...a];
console.log(b);//[1, 2, 3, 4, 5, ƒ]
b[0]=666;
console.log(b);//[666, 2, 3, 4, 5, ƒ]
console.log(a);// [1, 2, 3, 4, 5, ƒ]
var a=[1,2,3,4,5,function(){console.log("aaa")}];
var b=JSON.parse(JSON.stringify(a));
console.log(b);//[1, 2, 3, 4, 5, null]
b[0]=666;
console.log(b);// [666, 2, 3, 4, 5, null]
console.log(a);// [1, 2, 3, 4, 5, ƒ]