如何为对象数组添加从1开始的id键

嘿，这个需求挺常见的，我给你分享几种实用的实现方式，你可以根据自己的场景选：

方法1：使用Array.map()（推荐，不修改原数组） #

map()方法会返回一个全新的数组，不会改动原始数据，非常适合需要保留原数组的情况。因为map回调里的索引是从0开始的，直接加1就能得到从1起始的ID啦：

const colors = [ { 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 colorsWithId = colors.map((item, index) => ({
  ...item, // 复制原对象的所有属性
  id: index + 1 // 添加从1开始的id字段
}));

console.log(colorsWithId);

方法2：使用Array.forEach()（直接修改原数组） #

如果你不需要保留原数组，想直接在原数据上修改，用forEach()就很方便：

const colors = [ { 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" } ];

colors.forEach((item, index) => {
  item.id = index + 1; // 直接给原对象追加id字段
});

console.log(colors);

方法3：使用普通for循环（基础逻辑实现） #

要是你想更直观地理解底层逻辑，用普通for循环也能轻松搞定：

const colors = [ { 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" } ];

for (let i = 0; i < colors.length; i++) {
  colors[i].id = i + 1; // 循环遍历每个对象，添加从1开始的id
}

console.log(colors);

简单总结下：

• 优先选map()，因为它是纯函数，不会污染原始数据
• 如果要直接修改原数组，forEach()或者for循环都可以满足需求

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