使用new Array()创建对象数组时，修改一个对象致所有对象被覆盖的问题

这是个很常见的JavaScript数组坑！问题出在fill()方法的工作逻辑上——当你传入一个引用类型的值（比如空对象{}）作为填充参数时，它并不会为数组的每个位置生成一个新的对象实例，而是把同一个对象的引用复制到了数组的每一项里。

你的示例问题拆解 #

看你写的代码：

const ar = Array(5).fill({})
console.log(ar) // 输出 [{}, {}, {}, {}, {}]
ar[0].hello = 'hi'
console.log(ar) // 输出 [{ hello: 'hi' }, { hello: 'hi' }, { hello: 'hi' }, { hello: 'hi' }, { hello: 'hi' }]

这里数组里的5个空对象，其实都是指向内存中同一个对象的指针。所以你修改任意一个数组元素的属性，本质上都是在修改那个唯一的对象，所有数组项自然都会同步变化。

解决方法：为每个数组项创建独立的对象 #

这里有几个简单可靠的方案：

1. 使用Array.from()（推荐）

Array.from()可以接收一个映射函数，我们可以在函数里每次返回一个新的空对象，确保每个数组项都是独立的引用：

const ar = Array.from({ length: 5 }, () => ({}))
ar[0].hello = 'hi'
console.log(ar) // 输出 [{ hello: 'hi' }, {}, {}, {}, {}]

2. 结合fill()和map()

先给数组填充一个原始类型的值（比如undefined），再用map()为每个项生成新对象：

const ar = Array(5).fill().map(() => ({}))
ar[0].hello = 'hi'
console.log(ar) // 输出 [{ hello: 'hi' }, {}, {}, {}, {}]

注意：直接对Array(5)调用map()是无效的，因为Array(5)创建的是包含5个“空槽”的数组，map()会跳过这些空槽；而fill()会把空槽填充为undefined，这样map()就能遍历所有项了。

3. 手动循环创建

如果你喜欢更直观的方式，用for循环逐个push新对象也完全可以：

const ar = []
for (let i = 0; i < 5; i++) {
  ar.push({})
}
ar[0].hello = 'hi'
console.log(ar) // 输出 [{ hello: 'hi' }, {}, {}, {}, {}]

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