Question

在以下javascript代码段中，为什么运行此代码段时tedious和concise中的元素不相同？我从第二个元素获得/**ref:2**/的{{1}}输出。

concise

Answer 1

注意：不确定运行代码段时发生了什么，但是现实世界中没有发生ref业务

根据Xufox评论：/**ref:2**/表示“引用数组的元素2”，因为Stack Snippets的控制台功能无法知道你是否有一个无限嵌套的结构，所以改为引用注释（以及在这种情况下未使用的id注释）

真正的问题

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