为何数组数组finalArray中的元素指向原accumulatedArray？

问题代码回顾 #

const finalArray: any[][] = []
const accumulatedArray: any[] = []

const ids = ['1','2']
for (const id of ids) {
    accumulatedArray.push({
        id: id,
    })
}

finalArray.push(accumulatedArray)

accumulatedArray.length = 0 // 清空数组

console.log(finalArray) 

运行后输出[ [] ]，而非预期的[ [ { id: '1' }, { id: '2' } ] ]，但用finalArray.push([...accumulatedArray])就能得到正确结果。

核心原因：数组是引用类型 #

JavaScript里，数组、对象这类属于引用类型，和数字、字符串这种值类型的存储逻辑完全不同：

• 值类型赋值/传递时，会直接复制一份具体的值到新变量里，两个变量互不影响。
• 引用类型赋值/传递时，传递的是指向内存中该对象的引用地址，不是复制整个对象的内容。

放到你的代码里就是：

• accumulatedArray是一个数组对象，存在内存的某块区域。
• 执行finalArray.push(accumulatedArray)时，finalArray存的不是accumulatedArray里的元素，而是指向这个数组的引用地址。
• 这意味着finalArray[0]和accumulatedArray其实是同一个数组的两个“别名”，指向内存中同一个对象。
• 所以当你用accumulatedArray.length = 0清空数组时，本质是修改了内存中那个数组的内容，finalArray[0]指向的还是这个数组，打印出来自然就是空数组。

扩展运算符为什么能解决问题 #

[...accumulatedArray]会创建一个全新的数组对象，并把原数组里的所有元素复制到这个新数组中。
这时候finalArray.push([...accumulatedArray])存的是新数组的引用，和原来的accumulatedArray指向不同的内存地址。之后修改原数组，完全不会影响新数组，所以能得到你预期的结果。

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