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

Question

在下面的 JavaScript 代码段中，为什么当您运行此代码段时，tedious 和 concise 中的元素不相等？我从第二个元素获得 /**ref:2**/ 输出，表示 concise 。

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

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

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

Answer 1

注意:不确定运行代码片段时发生了什么，但引用业务在现实世界中不会发生

as per Xufox comment: /**ref:2**/ means “reference to element 2 of the array”, since the console feature of Stack Snippets can’t know whether you’ve got an infinitely nested structure, so instead the ref comments (and id comments which aren’t used in this case) are used

真正问题

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))

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

或者你可以尝试

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))