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

Posted 2020-09-28 红豆稀饭

今天遇到一个坑，具体的不多说，直接上代码

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