如何在JavaScript中动态向对象数组添加值？

Question

这是一个对象数组，

var data = [
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12}
    ];

我该如何动态添加这些值？我尝试了以下代码但没有成功：

var lab =["1","2","3", "4"];
var val = [42,55,51,22];
var data = new Array();
for(var i=0; i<4; i++){
   data[i].label = lab[i];
   data[i].value = val[i];    
}

- Mujtaba Haider

---

你知道有3个实验室和4个价值？ - xanatos

是的，我知道，这只是错误地出现在这里...谢谢你告诉我。 - Mujtaba Haider

Answer 1

你需要先实例化对象。最简单的方法是：

var lab =["1","2","3"];
var val = [42,55,51,22];
var data = [];
for(var i=0; i<4; i++)  {
    data.push({label: lab[i], value: val[i]});
}

或者另一种不太简洁但更接近原始代码的方法：

for(var i=0; i<4; i++)  {
   data[i] = {};              // creates a new object
   data[i].label = lab[i];
   data[i].value = val[i];    
}

array() 不会创建一个新的数组（除非你定义了这个函数）。可以使用 Array() 或者 new Array() 或者简写为 [] 来创建数组。

我建议阅读MDN JavaScript指南。

- Felix Kling

Answer 2

在2019年，我们可以使用Javascript的ES6扩展语法来更加简洁高效地完成它。

data = [...data, {"label": 2, "value": 13}]

示例

var data = [
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12},
      {"label" : "1", "value" : 12},
    ];
    
data = [...data, {"label" : "2", "value" : 14}] 
console.log(data)

针对你的情况（我知道是在2011年），我们可以使用 map() 和 forEach() 实现，方法如下：

var lab = ["1","2","3","4"];
var val = [42,55,51,22];

//Using forEach()
var data = [];
val.forEach((v,i) => 
   data= [...data, {"label": lab[i], "value":v}]
)

//Using map()
var dataMap = val.map((v,i) => 
 ({"label": lab[i], "value":v})
)

console.log('data: ', data);
console.log('dataMap : ', dataMap);

- its4zahoor

---

如果在地图中只进行赋值操作，请改用forEach。 - quirimmo

我猜我之前使用了 map，因为我不知道在 forEach 中也可以获取到 i。 - its4zahoor

我编辑过了，包括两种方法， map()都很简洁。 - its4zahoor