给对象数组添加id

Question

我有一个对象数组。如何在它们上面添加一个从1开始的id键。

[
{
    color: "red",
    value: "#f00"
},
{
    color: "green",
    value: "#0f0"
},
{
    color: "blue",
    value: "#00f"
},
{
    color: "cyan",
    value: "#0ff"
},
{
    color: "magenta",
    value: "#f0f"
},
{
    color: "yellow",
    value: "#ff0"
},
{
    color: "black",
    value: "#000"
}
]

那么，它将会像这样

[
{
    color: "red",
    value: "#f00",
    id: 1
},
{
    color: "green",
    value: "#0f0",
    id: 2
},
{
    color: "blue",
    value: "#00f",
    id: 3
},
{
    color: "cyan",
    value: "#0ff",
    id: 4
},
{
    color: "magenta",
    value: "#f0f",
    id: 5 
},
{
    color: "yellow",
    value: "#ff0",
    id: 6
},
{
    color: "black",
    value: "#000",
    id: 7
}
]

我尝试使用forEach，但它将每个数组中的对象的id都返回为长度-1的值。

我有很多对象并可以使用lodash。

- a2441918

---

你能发布一下你尝试使用forEach循环的代码吗？这样我们就可以解释你错在哪里了。这对你和其他遇到相同问题的人都有好处，以后可以参考。 - Matt

你有检查过这个链接吗：https://dev59.com/v3RB5IYBdhLWcg3wAjNH - Thomas Sablik

你使用 var 还是 let？ - Thomas Sablik

Answer 1

您可以使用Array#forEach来实现这一点。回调函数的第二个参数是元素的索引，因此您可以将ID分配为index + 1。

const source = [{
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
];

source.forEach((item, i) => {
  item.id = i + 1;
});

console.log(source);

- 31piy

---

不，你需要使用map函数。 - malininss

@malininss 你为什么这样想？在这种情况下，使用 forEach 完全是有效的，因为 OP 只是要求向对象添加一个键。使用 map 只是画蛇添足。 - 31piy

也许我过于苛刻了。虽然forEach适用于通过引用更改对象的属性，但map函数专门设计用于修改并返回新数组。使用map更直观，但forEach不会为新数组分配额外的内存。 map的主要缺点是需要额外的内存来创建新对象。然而，通常最好遵循不变性，除非对象具有大量字段，并针对这些情况使用map函数。 - malininss

Answer 2

最简单的解决方案是使用map函数。

let data = [{ color: "red", value: "#f00" }, { color: "green", value: "#0f0" }]  

data = data.map((item, index) => ({ ...item, id: index + 1 }))

console.log(data)

- Maciej Kozieja

Answer 3

你可以使用 .forEach() 循环遍历数组元素并加上 id：

data.forEach((o, i) => o.id = i + 1);

演示：

let data = [{
    color: "red",
    value: "#f00"
}, {
    color: "green",
    value: "#0f0"
}, {
    color: "blue",
    value: "#00f"
}, {
    color: "cyan",
    value: "#0ff"
}, {
    color: "magenta",
    value: "#f0f"
}, {
    color: "yellow",
    value: "#ff0"
}, {
    color: "black",
    value: "#000"
}];

data.forEach((o, i) => o.id = i + 1);

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

- Mohammad Usman

Answer 4

你可以使用 map() 函数来遍历你的对象数组。 n 表示每个对象，你可以在 map 中设置 id 的值。

希望这可以帮到你 :)

let arr = [{
    color: "red",
    value: "#f00"
  },
  {
    color: "green",
    value: "#0f0"
  },
  {
    color: "blue",
    value: "#00f"
  },
  {
    color: "cyan",
    value: "#0ff"
  },
  {
    color: "magenta",
    value: "#f0f"
  },
  {
    color: "yellow",
    value: "#ff0"
  },
  {
    color: "black",
    value: "#000"
  }
]

let i = 0;
arr.map(n => {
  n['id'] = i;
  i++;
})

  console.log(arr);

- Gerardo BLANCO

Answer 5

  source.map((s, i)=> s.id = i+1); 
   console.log(source)

- Naim Blg

---

请在回答中包含文字说明，解释如何解决问题。最好避免只发布“仅代码”的答案。 - bad_coder

Answer 6

ES6

您可以使用forEach()来获得所需的结果。

const arr =[{color: "red",value: "#f00"},{color: "green",value: "#0f0"},{color: "blue",value: "#00f"},{color: "cyan",value: "#0ff"},{color: "magenta",value: "#f0f"},{color: "yellow",value: "#ff0"},{color: "black",value: "#000"}];

arr.forEach((o,i)=>o.id=i+1);
console.log(arr);

.as-console-wrapper {max-height: 100% !important;top: 0;}

您也可以使用 map() 来获取所需结果。 演示

const arr =[{color: "red",value: "#f00"},{color: "green",value: "#0f0"},{color: "blue",value: "#00f"},{color: "cyan",value: "#0ff"},{color: "magenta",value: "#f0f"},{color: "yellow",value: "#ff0"},{color: "black",value: "#000"}];


console.log(arr.map((o,i)=>Object.assign(o,{id:i+1})));

.as-console-wrapper {max-height: 100% !important;top: 0;}

- Narendra Jadhav

Answer 7

不需要复杂的功能和逻辑。只需使用forEach循环，它还会为您在数组中的每个对象提供索引，并将index + 1值分配给对象的id属性。保留html标签。

var arr = [
{
    color: "red",
    value: "#f00"
},
{
    color: "green",
    value: "#0f0"
},
{
    color: "blue",
    value: "#00f"
},
{
    color: "cyan",
    value: "#0ff"
},
{
    color: "magenta",
    value: "#f0f"
},
{
    color: "yellow",
    value: "#ff0"
},
{
    color: "black",
    value: "#000"
}
];

arr.forEach((item, index)=>{
 item.id = index+1;
});
console.log(arr);

- Ankit Agarwal

Answer 8

您可以使用filter()函数来去除重复项，使用reduce()函数来实现所需的输出。

const colorArray = [
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

const result = colorArray
    .filter((a, i, x) => x.findIndex((t) => t.color === a.color) === i)
    .reduce((agg, item, index) => {
        item.id = index + 1;
        agg.push(item);
        return agg;
    }, []);

console.log(result);

- Ashok Kumar

Answer 9

当我使用这个解决方案时，我的id会变成一个数字，像这样：

list = [ {
    color: "red",
    value: "#f00",
    id: 0
}, {

    color: "green",
    value: "#0f0",
    id: 4
},{
    color: "blue",
    value: "#00f",
    id: 4
},{
    color: "cyan",
    value: "#0ff",
    id: 4
},{
    color: "black",
    value: "#000",
    id: 4
}] 

我的代码是这样的：

let i = 0;
list.map(n => {
        n['id'] = i;
        i++;
});

- Ehsan