Javascript嵌套数组单元素修改转换为整个数组修改

Question

我在使用此代码时遇到问题:

var openingSegments = Array(7).fill([]);
openingSegments[0].push({'start': '1100', 'end': '1900'});

因为当我这样做时:

console.log(openingSegments);

它给了我:

[ [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ],
  [ { start: '1100', end: '1900' } ] ]

就好像我已经推送了“hoursOfDay”的所有元素，但事实并非如此，因为我只对第一个元素(索引 0)应用了推送。

这里发生了什么？

Answer 1

fill 只是将传递的参数复制到所有项目中。实际上，您只有一个数组对象和该对象的 7 个引用副本插入数组中。通过一个引用更改数组会影响所有项目。

您可以使用Array#from代替fill函数及其 mapFn 参数。

var openingSegments = Array.from({ length: 7 }, x => []);
openingSegments[0].push({'start': '1100', 'end': '1900'});

console.log(openingSegments[0]);
console.log(openingSegments[1]);