JavaScript 值類型和引用類型的初次研究

今天遇到一個坑，具體的不多說，直接上代碼

var a = [ [],[],[1,2,3] ]

var b = ['顏色','大小','尺寸']

var arr = []
for(let i = 0; i < a.length; i ++){
    let obj = {}
    for(let j = 0; j < a[i].length; j ++){
        obj[b[i]] = a[i][j]
        arr.push(obj)
        console.log(arr)
        console.log(obj)
    }

}
console.log(arr)

我預期的 arr 的結果應該是

[ { '尺寸': 1 }, { '尺寸': 2 }, { '尺寸': 3 } ]

最後arr的結果居然是這樣的

[ { '尺寸': 3 }, { '尺寸': 3 }, { '尺寸': 3 } ]

在一個基友群里問，最後終於自己得出結論了——這是因為值類型和引用類型不同的原因。

在JavaScript里的值大概分為兩種，一種是值類型，一種是引用類型。

值類型：數值、布爾值、null、undefined

引用類型：對象、數組、函數

我們例子中的obj雖然每次列印出來都是不同的，但是因為是引用類型，arr也是引用類型，即使obj  push到arr裡面了，也只是push進去了一個記憶體地址而已，所以最後obj變成3了，arr裡面引用的obj也會全部變成3。很神奇吧，最後解決的辦法也很簡單

var a = [ [],[],[1,2,3] ]

var b = ['顏色','大小','尺寸']

var arr = []
for(let i = 0; i < a.length; i ++){
    for(let j = 0; j < a[i].length; j ++){
    let obj = {}
        obj[b[i]] = a[i][j]
        arr.push(obj)
    }

}
console.log(arr)

只要把obj的聲明放在最內層的迴圈裡面，每次迴圈都會是單獨的一個記憶體地址，這樣最後的obj即使變成了3，前面的obj也不會被影響到，因為他們的記憶體地址根部不同。