如何使用 array.fill 创建对象数组？

Question

在下面的javascript sn-p中，为什么运行这个sn-p时tedious和concise中的元素不等价？ 我从第二个元素得到/**ref:2**/ 的concise 输出。

const tedious = [
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
];

const concise = new Array(9).fill({});

console.log(tedious);
console.log(concise);

Answer 1

注意：不确定运行 sn-p 时发生了什么，但 ref 业务在现实世界中不会发生

根据 Xufox 的评论：/**ref:2**/ 表示“引用数组的元素 2”，因为 Stack Snippets 的控制台功能无法知道您是否有无限嵌套的结构，所以取而代之的是 ref cmets（和在这种情况下没有使用的 id cmets) 被使用

真正的问题

const concise = new Array(9).fill({});

所有 9 个条目都将“引用”同一个对象 - 请参阅输出

const concise = new Array(9).fill({}); // {} 
concise[0].a='hello world';
console.log(JSON.stringify(concise))

为了更好地说明这一点，让我们将一个非空对象传递给fill，并带有一个随机值

const concise = new Array(9).fill({random:Math.floor(Math.random() * 1000)});
console.log(JSON.stringify(concise))

显然，该对象只创建一次

试试

const concise = new Array(9).fill(0).map(() => ({}));

concise[0].a='hello world';
console.log(JSON.stringify(concise))

由于每个元素都会调用一次地图回调，因此每次都会创建一个新对象

或者你可以试试

const concise = Array.from({length:9}, () => ({}));

concise[0].a='hello world';
console.log(JSON.stringify(concise))

Array.from 的第二个参数是对每个元素调用一次的回调，它与.map 基本相同

当然，感谢@Slai，上面的内容更加简单

const concise = Array.from({length:9}, Object);

---

将上面“数学随机”代码的输出与

进行比较

const concise = Array.from({length:9}, () => ({random:Math.floor(Math.random() * 1000)}));
console.log(JSON.stringify(concise))