JavaScript数组push操作对引用和非引用数组的行为差异疑问

• JavaScript中数组属于引用类型，变量存储的不是数组本身的实际值，而是数组在内存中的引用地址。
• 示例1的createMatrix方法中，每次push([0,0,0])都会在内存中创建一个全新的数组，三个数组的引用地址完全独立，修改其中一个不会影响其他数组，所以输出符合预期。
• 示例2的createMatrix方法中，只在最开始创建了一个row数组，后续三次push(row)实际是把同一个数组的引用地址重复添加了三次，matrix里的三个元素都指向内存中的同一个数组。你修改任意一个位置的元素，本质都是修改同一个数组，所以三个子数组会同步发生变化，出现你看到的异常输出。

只需要在每次push的时候创建新的数组副本即可，常见改法如下：

createMatrix(){
    let row = [0,0,0];
    // 每次push时通过扩展运算符创建新数组副本
    this.matrix.push([...row]);
    this.matrix.push([...row]);
    this.matrix.push([...row]);
}

也可以用Array.from实现数组复制：

createMatrix(){
    let row = [0,0,0];
    this.matrix.push(Array.from(row));
    this.matrix.push(Array.from(row));
    this.matrix.push(Array.from(row));
}

修改后三个子数组就是相互独立的，运行结果会和示例1完全一致。

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