JavaScript数组push引用问题：二维数组初始化异常原因与解决

1. 现象是否正常？ #

完全正常。因为在JavaScript里，数组属于引用类型，而非值类型。你只创建了一个temp数组，随后多次将它的引用推入result中，这意味着result里的所有元素本质上指向内存中同一个数组。修改任意一个子数组的元素，都是在修改那个唯一的temp数组，所以所有子数组会同步变化。而硬编码的[[false,false],[false,false]]是创建了两个独立的数组，它们的内存引用不同，修改其中一个自然不会影响另一个。

2. 如何正确初始化二维数组？ #

要避免引用复用，每次推入result时都要创建新的数组副本，而非同一个temp的引用，以下是几种可行方法：

方法一：循环内重新创建子数组 #

createInitial(){
    let result = []
    for(let i=0;i<this.grid;i++){
        let temp = [] // 每次循环都新建独立数组
        for(let j=0;j<this.grid;j++){
            temp.push(false)
        }
        result.push(temp)
    }
}

方法二：用slice()复制数组副本 #

如果想保留外层的temp初始化逻辑，可通过slice()方法生成新数组（slice()会返回原数组的浅拷贝）：

createInitial(){
    let result = []
    let temp = []
    for(let j=0;j<this.grid;j++){
        temp.push(false)
    }
    for(let i=0;i<this.grid;i++){
        result.push(temp.slice()) // 推入temp的副本而非原引用
    }
}

方法三：简洁的批量创建写法 #

用Array.from或数组构造函数快速生成二维数组：

createInitial(){
    let result = Array.from({length: this.grid}, () => 
        Array(this.grid).fill(false)
    )
}

或者：

createInitial(){
    let result = []
    for(let i=0;i<this.grid;i++){
        result.push(Array(this.grid).fill(false))
    }
}

3. 相关原理补充 #

JavaScript的数据类型分为两类：

• 值类型：包括Number、String、Boolean、Undefined、Null、Symbol、BigInt。这类变量存储的是实际值，赋值或传递时会复制完整的值，修改新变量不会影响原变量。
• 引用类型：包括Array、Object、Function等。这类变量存储的是指向内存对象的引用（地址），赋值或传递时仅复制引用，多个变量会指向同一个对象，修改其中一个变量的属性，其他变量也会同步看到变化。

你遇到的问题就是典型的引用类型复用场景：所有子数组共享同一个内存引用，因此一处修改会同步到所有子数组；而硬编码方式则是每次创建新的数组对象，子数组间相互独立。

内容的提问来源于stack exchange，提问作者asd1122