如何在列表中追加字典？循环生成字典列表未达预期的问题排查

我尝试编写一个for循环，把值存入字典，再把这个字典追加到列表里，但不管用push()还是索引赋值，结果都不对。下面是我的代码：

json = { "MUNICIPIOS":[{ "ATRIBUTOS":["atrib1","atrib2","atrib3"],"VALORES": [10, 100, 1000]}, {"ATRIBUTOS":["atrib1","atrib2","atrib3"],"VALORES": [20, 200, 2000]}, {"ATRIBUTOS":["atrib1","atrib2","atrib3"],"VALORES": [30, 300, 3000]}, {"ATRIBUTOS":["atrib1","atrib2","atrib3"],"VALORES": [40, 400, 4000]} ] };
var atributos = json["MUNICIPIOS"][0]["ATRIBUTOS"];
var municipios = json["MUNICIPIOS"];
var dimensoes = [];
var dicionario = {label:"", values:[]};
for (var atr = 0; atr < atributos.length; atr++){
 dicionario.label = atributos[atr];
 valores = [];
 for (var mun=0; mun < municipios.length; mun++){
 valores.push(municipios[mun]["VALORES"][atr]);
 dicionario.values = valores;
 }
 //dimensoes.push(dicionario);
 dimensoes[atr] = dicionario;
}
console.log(dimensoes);

实际输出结果不符合预期：

[ { label: 'atrib3', values: [ 1000, 2000, 3000, 4000 ] }, { label: 'atrib3', values: [ 1000, 2000, 3000, 4000 ] }, { label: 'atrib3', values: [ 1000, 2000, 3000, 4000 ] } ]

我需要得到如下结果：

[ { label: 'atrib1', values: [ 10, 20, 30, 40 ] }, { label: 'atrib2', values: [ 100, 200, 300, 400 ] }, { label: 'atrib3', values: [ 1000, 2000, 3000, 4000 ] } ]

问题原因 #

核心问题在于你只创建了一个dicionario对象。在JavaScript中，对象是引用类型，你每次循环修改的都是同一个对象的属性，然后把这个对象的引用添加到dimensoes数组里。数组里存储的不是对象的副本，而是指向同一个对象的指针，所以最后数组里的所有元素都会显示最后一次修改后的结果。

解决方案 #

你需要在每次外层循环时新建一个字典对象，而不是复用同一个。修改后的代码如下：

const json = { "MUNICIPIOS":[{ "ATRIBUTOS":["atrib1","atrib2","atrib3"],"VALORES": [10, 100, 1000]}, {"ATRIBUTOS":["atrib1","atrib2","atrib3"],"VALORES": [20, 200, 2000]}, {"ATRIBUTOS":["atrib1","atrib2","atrib3"],"VALORES": [30, 300, 3000]}, {"ATRIBUTOS":["atrib1","atrib2","atrib3"],"VALORES": [40, 400, 4000]} ] };
const atributos = json["MUNICIPIOS"][0]["ATRIBUTOS"];
const municipios = json["MUNICIPIOS"];
const dimensoes = [];

// 把字典的创建移到外层循环内部，每次迭代都生成新对象
for (let atr = 0; atr < atributos.length; atr++){
  const dicionario = {label:"", values:[]};
  dicionario.label = atributos[atr];
  const valores = [];
  for (let mun=0; mun < municipios.length; mun++){
    valores.push(municipios[mun]["VALORES"][atr]);
  }
  dicionario.values = valores;
  dimensoes.push(dicionario);
}

console.log(dimensoes);

另外建议你使用const/let代替var，这是现代JavaScript的最佳实践，能避免变量提升带来的意外问题。

内容的提问来源于stack exchange，提问作者Danilo Santos