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

Question

我正在尝试将作为参数传递给 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 循环中将对象键“color”添加到对象数组并将其值设置为 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" }对此的任何帮助将不胜感激。

Answer 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 })))

}

Answer 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);

Answer 3

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

链接这个。

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);

Answer 4

在 上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);