數(shù)組的深拷貝

寫過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, ?]
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容