如何从另一个对象的键中获取对象的值？

Question

有：

const colors = [
  {id: 1, name: "blue"},
  {id: 2, name: "red"},
  {id: 3, name: "green"}
];

和：

const shirts = [
  {id: 1, color: 2},
  {id: 2, color: 3},
  {id: 3, color: 2},
  {id: 4, color: 1},
  {id: 5, color: 3}
];

如何通过 colors 中的id在shirts中引用 colors？ 我需要以shirt.color = blue结束。

我正在考虑这样的事情，但不能正确：

if (shirt.color === color.id) {
   shirt.color = color.name;
}

提前致谢！

Answer 1

您可以使用 forEach

 const colors = [ {id: 1, name: "blue"}, {id: 2, name: "red"}, {id: 3, name: "green"} ]; const shirts = [ {id: 1, color: 2}, {id: 2, color: 3}, {id: 3, color: 2}, {id: 4, color: 1}, {id: 5, color: 3} ]; shirts.forEach(e=>{ colors.forEach(c=>{ if(e.color == c.id ){ e.color = c.name; } }) }) console.log(shirts);

Answer 2

您可以使用Array.map()循环遍历colors ，然后使用Array.filter()获取与color.id === shirt.color匹配的所有衬衫。 然后，您可以按预期将该颜色名称分配给所有衬衫 object。

 const colors = [ {id: 1, name: "blue"}, {id: 2, name: "red"}, {id: 3, name: "green"} ]; const shirts = [ {id: 1, color: 2}, {id: 2, color: 3}, {id: 3, color: 2}, {id: 4, color: 1}, {id: 5, color: 3} ]; colors.map((color) => { let matchShirt = shirts.filter((shirt) => color.id === shirt.color); matchShirt.forEach((shirt) => shirt.color = color.name); }); console.log(shirts);

Answer 3

您可以使用Map并使用颜色名称创建新对象。

 const colors = [{ id: 1, name: "blue" }, { id: 2, name: "red" }, { id: 3, name: "green" }], shirts = [{ id: 1, color: 2 }, { id: 2, color: 3 }, { id: 3, color: 2 }, { id: 4, color: 1 }, { id: 5, color: 3 }], colorMap = new Map(colors.map(({ id, name }) => [id, name])), result = shirts.map(o => ({...o, name: colorMap.get(o.color) })); console.log(result);

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

Answer 4

 const colors = [ {id: 1, name: "blue"}, {id: 2, name: "red"}, {id: 3, name: "green"} ]; const shirts = [ {id: 1, color: 2}, {id: 2, color: 3}, {id: 3, color: 2}, {id: 4, color: 1}, {id: 5, color: 3} ]; shirts.forEach(s => { s.color = (colors.find(c => c.id === s.color) || {}).name; }); console.log(shirts);

Answer 5

如果您使用 object 作为颜色代码，它会让您的生活变得更加轻松。 它避免了遍历它并将其转换为类似于此的格式以便快速查找。

 const colors = { 1: "blue", 2: "red", 3: "green" } const shirts = [ {id: 1, color: 2}, {id: 2, color: 3}, {id: 3, color: 2}, {id: 4, color: 1}, {id: 5, color: 3} ]; shirts.forEach( shirt => shirt.colorName = colors[shirt.color] ) console.log(shirts)

如果它真的必须是那种格式，那么转换

 const colors = [ {id: 1, name: "blue"}, {id: 2, name: "red"}, {id: 3, name: "green"} ]; const shirts = [ {id: 1, color: 2}, {id: 2, color: 3}, {id: 3, color: 2}, {id: 4, color: 1}, {id: 5, color: 3} ]; const colorCodes = colors.reduce((o, c) => { o[c.id] = c.name; return o }, {}) shirts.forEach( shirt => shirt.colorName = colorCodes[shirt.color] ) console.log(shirts)

Answer 6

给定

const colors = [
  {id: 1, name: "blue"},
  {id: 2, name: "red"},
  {id: 3, name: "green"}
];

上面的colors的形状是一个包含名称和 id 的对象数组。 这使代码不必要的尴尬。

我们可以通过使colors成为 object 来极大地简化事情。

const colors = {
  1: "blue",
  2: "red",
  3: "green"
};

const shirts = [
  {id: 1, color: 2},
  {id: 2, color: 3},
  {id: 3, color: 2},
  {id: 4, color: 1},
  {id: 5, color: 3}
];

function assignShirtColor(shirt) {
  shirt.color = colors[shirt.color];
}

那么我们需要做的就是写

shirts.forEach(assignShirtColor);