完成FOR之后，最后一个FOR循环中的值

Question

我有一个函数，该函数获取json作为参数，使用给定json的一些值构建另一个json，然后返回构建的json。

function getMyJSON(json) {
  var result = {
    lastUpdate: "",
    legends: null
  };

  result.legends = (new Array(json.legends.length)).fill({
    name: null,
    rgb: null,
    values: null
  });

  for (let j = 0; j < json.legends.length; j++) {
    result.legends[j].name = json.legends[j].name;
    result.legends[j].rgb = json.legends[j].rgb;
    result.legends[j].values = (new Array(10)).fill(0);
    console.log(result.legends[0].name); //PRINT ONLY FIRST ELEMENT
  }

  console.log(result.legends);

  return result;
}

完成for loop后出现问题。所有result.legends与最后一个json.legends

具有相同的值

这是输出的样子：

每个循环之后，第一个元素（legends.name）的result.legends[0].name都会更改。

最后，legends.name中的所有result与legends.name中的最后一个json相等。为什么？

我在Google上发现这与变量范围有关，但是我不知道该怎么做。

Answer 1

您需要数组内部的独立对象。 Array#fill采用相同的对象引用，这在每个对象中导致相同的结果。

相反，您可以使用Array.from创建一个新数组，并使用第二个参数映射新对象以进行回调。

result.legends = Array.from(
    { length: json.legends.length },
    _ => ({ name: null, rgb: null, values: null })
);

Answer 2

@NinaScholz已经描述了问题并解决了问题，但是正如我在对该问题的评论中提到的那样，您可以使用map()来改进和简化逻辑：

var obj = {
  legends: [{
    name: 'foo',
    rgb: 'C00'
  },{
    name: 'bar',
    rgb: 'FFF'
  },{
    name: 'fizz',
    rgb: 'CCFFCC'
  },{
    name: 'buzz',
    rgb: '000000'
  }]
}
console.log(getMyJSON(obj));

function getMyJSON(o) {
  return {
    lastUpdate: "",
    legends: o.legends.map(function(item) {
      return {
        name: item.name,
        rgb: item.rgb,
        values: (new Array(10)).fill(0)
      }
    })
  };
}