【问题标题】：Add id to array of objects将 id 添加到对象数组
【发布时间】：2018-04-25 13:10:33
【问题描述】：

我有一个对象数组。如何从 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。

【问题讨论】：

您能否发布您是如何尝试 forEach 循环的，以便我们解释您哪里出错了？这将使您以及以后遇到相同问题的其他人受益。
你检查了吗：stackoverflow.com/questions/750486/…
你使用var还是let？

标签： javascript arrays object

【解决方案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);

【讨论】：

【解决方案2】：

您可以使用.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; }

【讨论】：

【解决方案3】：

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

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 = data.map((x, i) => {
  x.id = i + 1
  return x
})

console.log(data)

【讨论】：

【解决方案4】：

您可以使用map() 函数来迭代您的对象数组。

n 是您的每个对象，您可以在地图中设置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);

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

请附上文字说明如何解决问题中的问题。最好不要发布“仅代码”的答案。

【解决方案7】：

不需要复杂的功能和逻辑。只需将它循环到 forEach 上，这还将为您提供数组中每个对象的索引，并将该 index+1 值分配给对象的 id 属性。

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

【讨论】：

【解决方案8】：

当我使用这个解决方案时，我的 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++;
});

【讨论】：

【解决方案9】：

您可以使用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);

【讨论】：