从 vanilla JS 中的两个对象数组创建一个新的对象数组答案

【问题标题】：create an new array of objects from two array of objects in vanilla JS从 vanilla JS 中的两个对象数组创建一个新的对象数组
【发布时间】：2021-09-02 07:41:24
【问题描述】：

我有两个对象数组：

watches = [
  {
    id: "1",
    label: "Rolex",
    color: "UUID_OF_SILVER",
  },
  {
    id: "2",
    label: "Omega",
    color: "UUID_OF_BLACK",
  },
  {
    id: "3",
    label: "Zenith",
    color: "UUID_OF_SILVER",
  },
];

watch_colors = [
  {
    id: "UUID_OF_BLACK",
    label: "Black",
  },
  {
    id: "UUID_OF_SILVER",
    label: "Silver",
  },
];

现在我需要使用 vanilla JS 在控制台中打印它

Rolex Silver
Omega Black
Zenith Silver

我想我需要通过这两个数组中的共同值（即 UUID）过滤这两个数组，然后创建一个新数组并在其上映射以显示数据，但我不确定如何在代码中处理。

这是我到目前为止所做的

function watch() {
  watches.map((watch) => {
    console.log(watch.label);
  });
}

watch();

function color() {
  watch_colors.map((color) => {
    console.log(color.label);
  });
}

color();

【问题讨论】：

那么你尝试了什么？ Edit 问题并包括您的最佳尝试
Array.map() 结合Array.find() 应该可以解决问题。

标签： javascript arrays javascript-objects

【解决方案1】：

只需循环watches，从watch_colors 中找到匹配的颜色，watches 数组中的color 值与watch_colors 数组中的id 值相同。即color.id === watch.color

const watches = [
  {
    id: "1",
    label: "Rolex",
    color: "UUID_OF_SILVER",
  },
  {
    id: "2",
    label: "Omega",
    color: "UUID_OF_BLACK",
  },
  {
    id: "3",
    label: "Zenith",
    color: "UUID_OF_SILVER",
  },
];

const watch_colors = [
  {
    id: "UUID_OF_BLACK",
    label: "Black",
  },
  {
    id: "UUID_OF_SILVER",
    label: "Silver",
  },
];

watches.forEach((watch) => {
  const color = watch_colors.find((color) => color.id === watch.color);
  if(color) {
    console.log(`${watch.label}, ${color.label}`);
  }
})

【讨论】：

【解决方案2】：

您可以更高效地使用Map 制作字典，然后遍历watches 以打印结果。

const watches = [
  {
    id: "1",
    label: "Rolex",
    color: "UUID_OF_SILVER",
  },
  {
    id: "2",
    label: "Omega",
    color: "UUID_OF_BLACK",
  },
  {
    id: "3",
    label: "Zenith",
    color: "UUID_OF_SILVER",
  },
];

const watch_colors = [
  {
    id: "UUID_OF_BLACK",
    label: "Black",
  },
  {
    id: "UUID_OF_SILVER",
    label: "Silver",
  },
];

const dict = new Map();
watch_colors.forEach(({ id, label }) => dict.set(id, label));

watches.forEach((o) => console.log(`${o.label} ${dict.get(o.color)}`));

【讨论】：

【解决方案3】：

您可以使用reduce 方法，如下所示：

const newWatches = watches.map((val) => {
  const color = watch_colors.find((x) => x.id === val.color);

  return `${val.label} ${color.label}`;
});

console.log(newWatches);
// prints [ 'Rolex Silver', 'Omega Black', 'Zenith Silver' ]

【讨论】：

watches 已经是一个数组，不需要减少它。只需使用 map 方法并为每次迭代返回字符串。编辑：reduce 的一个好处是当你不想添加一个值，如果它找不到颜色