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也不会被影响到，因为他们的内存地址根部不同。