如何根据colorId将colors对象的color值迁移至data对象

问题描述 #

需要将colors数组中对象的color值，通过id与data数组对象的colorId匹配，添加到data的对应对象中，最终得到包含color属性的目标数组。

原始代码 #

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

你的代码问题分析 #

你尝试的代码返回undefined，核心问题有三个：

1. forEach方法本身没有返回值，因此checkresult必然是undefined
2. 内层forEach中的return无法向外传递值，也不能终止循环
3. Object.assign(a.colorId, b.color)用法错误：a.colorId是数字类型，不是对象，而Object.assign的第一个参数必须是对象；正确逻辑应该是直接给目标对象添加color属性。

正确解法 #

解法1：使用Map优化查找效率（推荐，适合大数据量）

先将colors转换为以id为键的Map，实现O(1)时间复杂度的快速查找，再通过map生成新数组：

const colorMap = new Map(colors.map(item => [item.id, item.color]));
const result = data.map(item => ({
  ...item,
  color: colorMap.get(item.colorId)
}));

console.log(result);
// 输出：
// [
//   { colorId: 1, color: 'red' },
//   { colorId: 2, color: 'blue' },
//   { colorId: 3, color: 'green' }
// ]

解法2：直接修改原data数组

如果不需要保留原data数组的初始结构，可以直接遍历修改原对象：

data.forEach(item => {
  const matched = colors.find(color => color.id === item.colorId);
  if (matched) {
    item.color = matched.color;
  }
});

console.log(data);
// 输出与期望结果一致

解法3：基于你的嵌套遍历思路修复

如果要沿用你最初的嵌套遍历逻辑，可调整为：

// 直接修改原data数组
data.forEach(a => {
  colors.forEach(b => {
    if (a.colorId === b.id) {
      a.color = b.color; // 直接为对象添加color属性
    }
  });
});

console.log(data);

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