循環(huán)給數(shù)組里的對象賦值

這個題目聽起來有點別扭,但是其實也挺常見的。最實在的一個場景就是,你構(gòu)建了一個數(shù)組,數(shù)組元素是對象,但是這些對象的結(jié)構(gòu)體都是一樣的,唯一不一樣的就是每個鍵的值。要是覺得亂,請看小栗子:

var a = [{c: ' ',d: ' '},{c: ' ', d: ' ' }, {c: ' ' ,d: ' ' }];

一看到這個首先想到的肯定是for循環(huán)了,好的,沒錯,本文也是采用這種思路。順著思路往下寫就是這樣的

//設(shè)定數(shù)組長度
var len = 9;
//設(shè)定結(jié)構(gòu)體
var a = {
    c: ' ',
    d:' '
};
var b = new Array();
for(var i = 0; i < len; i++) {
    a.c = i;
    a.d = i+1;
//將對象循環(huán)放進數(shù)組中
    b.push(a);
    console.log(b[i].c);
}
console.log(b[3].c);
console.log(b[4].c);

嘻嘻,猜猜這三個log里邊的數(shù)據(jù)。
不賣關(guān)子地說答案如下:
0-8
8
8
第一次看到這個結(jié)果的,我怎么也想不明白,為什么循環(huán)體內(nèi)外的數(shù)據(jù)是不一樣。這樣的話,根本無法完成循環(huán)給數(shù)組內(nèi)的對象賦值的任務(wù)了。后來查了很多東西,才看清了本質(zhì):對象的深復(fù)制與淺復(fù)制。因為對象a是預(yù)先定義好的,循環(huán)push進數(shù)組b的都是同一個對象a,所以當(dāng)for循環(huán)里重新賦值的時候,每一個對象a都會變成一樣的值。
其實在此之前,我是知道深復(fù)制和淺復(fù)制的,但是我根本沒往這方面去注意,大概還是資質(zhì)過淺,無法一眼識別。
關(guān)于深淺賦值,網(wǎng)上有很多的相關(guān)內(nèi)容,在此貼出我認為好理解的概念。

淺復(fù)制:復(fù)制了對象的地址,只要改變其中一個,其他的都會被改變
深復(fù)制:復(fù)制了整個對象,不會彼此牽連

找出原因之后,就很容易對癥下藥了。

var len = 9;
var a = {
   c: ' '
};
var b = new Array();
for(var i = 0; i < len; i++) {
   var a = {
       c: ' ',
       d:' '
       };
   a.c = i;
   a.d = i+1;
   b.push(a);
   console.log(b[i].c); //0-8
}
console.log(b[3].c);//3
console.log(b[4].c);//4

也許還有其他方法,但總歸是一個道理,破除了淺復(fù)制,你就贏了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容