使用 Javascript 如何将作为函数/方法的参数的数组添加到对象数组？答案

【问题标题】：Using Javascript how do I add an array that is an argument for a function/method to an array of objects?使用 Javascript 如何将作为函数/方法的参数的数组添加到对象数组？
【发布时间】：2020-10-13 18:57:15
【问题描述】：

我正在尝试将作为参数传递给 Javascript 类方法的数组与也在该方法中创建的对象数组进行匹配。

例如，这里传递了一个数组：


colorSet = ["red","orange","purple","yellow"]

当这个数组传入下面的方法 addColors 时，我需要创建一个对象并根据 colorSet 的长度将该对象推送到一个空数组。这很简单。

 addColors(colorSet) {
  let obj = {}
  for (let i = 0;i<colorSet.length;i++){
   this.legend.push(obj)
  }

但是，在这样做之后，我尝试在同一个 for 循环中将对象键“颜色”添加到对象数组中，并将其值设置为 colorSet 中的颜色数组。见下文：

 addColors(colorSet) {
  let obj = {}
  for (let i = 0;i<colorSet.length;i++){
    this.legend.push(obj)
    this.legend[i].color = colorSet[i]
  }

但是，结果如下：

0: Object { color: "yellow" }

1: Object { color: "yellow" }

2: Object { color: "yellow" }

3: Object { color: "yellow" }

我想要的是这个：


0: Object { color: "red" }

1: Object { color: "orange" }

2: Object { color: "purple" }

3: Object { color: "yellow" }

对此的任何帮助将不胜感激。

【问题讨论】：

标签： javascript arrays for-loop object methods

【解决方案1】：

这是一个常见问题。您正在改变对象 legend[i] - 但是对于所有索引 i，这是对同一对象 obj 的引用，结果是改变任何一个对象都会改变它们。

解决方案：每次只需推送一个全新的对象，无需改变任何内容：

addColors(colorSet) {
  for (let i = 0;i<colorSet.length;i++){
    this.legend.push({ color: colorSet[i]});
  }
}

实际上，您可以通过删除循环并仅使用 map 方法和其余参数来简化此操作：

addColors(colorSet) {
  this.legend.push(...colorSet.map(color => ({ color })))
}

【讨论】：

这很好用。但我发现我必须将此解决方案与此方法之前的方法一起使用。所以现在我有一个看起来像这样的对象：0：对象{指标：“第一个数据点”}1：对象{指标：“第二个数据点”}2：对象{指标：“第三个数据点”}3：对象{ 指标：“第四个数据点”} 所以我必须向其中添加颜色数组，但我遇到了同样的问题，即只有数组中的最后一种颜色被添加到对象中。这是我卡住的地方： this.legend.map(o=>colorSet.forEach(color=>{ o.color = color }) )
刚刚使用 for 循环解决了这个问题： for (let i =0;i

【解决方案2】：

问题是您有let obj = {}; 行，它在for 循环之外，并且所有推送到legend 的项目都引用了相同的对象。将其移入 for 循环以解决此问题：

var legend = [];

function addColors(colorSet) {
  for (let i = 0; i < colorSet.length; i++) {
    let obj = {}; // <- new object should be defined here
    legend.push(obj);
    legend[i].color = colorSet[i];
  }
}

addColors(["red", "orange", "purple", "yellow"]);
console.log(legend);

【讨论】：

【解决方案3】：

在addColors 上，问题是您将obj 变量推入for 循环。在legend.push(obj) 上，它推送obj 变量的引用，而不是obj 的值，因此所有变量都设置为last-index 值。

const colorSet = ["red", "orange", "purple", "yellow"];

function addColors(colorSet) {
  const legend = [];
  for (let i = 0;i< colorSet.length; i++) {
    legend.push({}); // - Here, instead of pushing `obj`, push initial value `{}`
    legend[i].color = colorSet[i];
  }
  
  console.log(legend);
}

addColors(colorSet);

简单地说，这可以使用Array.prototype.map来完成

const colorSet = ["red","orange","purple","yellow"];

const result = colorSet.map((item) => ({ color: item }));
console.log(result);

【讨论】：

【解决方案4】：

可以直接在循环中创建对象。

链接这个。

function addColors(colorSet) {
  const legends = [];
  for (let i = 0;i<colorSet.length;i++){
  const obj = {
    color: colorSet[i]
  }
   legends.push(obj)
  }
  
  console.log(legends)
  
 }

const colorSet = ["red","orange","purple","yellow"];


addColors(colorSet);

【讨论】：