寫過vue的都知道,里面的任意賦值修改都可能會(huì)造成界面的修改
當(dāng)我們不希望這種情況發(fā)生的時(shí)候我們就需要用到深拷貝
1.最簡單也是最麻煩的方式
直接賦值是不可能的,使用循環(huán)for for in的方式可以實(shí)現(xiàn)
基礎(chǔ)數(shù)據(jù)類型的賦值不會(huì)形成關(guān)聯(lián)關(guān)系,可以達(dá)到目的
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對(duì)象的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]
小結(jié):以上三種方式如果瀏覽器對(duì)es6比較好的話當(dāng)然第三種是最好的,第二種方式雖然號(hào)稱能支持95%的場景,但是還是有一些特殊場景會(huì)出現(xiàn)一些問題
比如數(shù)組里有function等屬性使用方式將會(huì)丟失
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, ?]