JavaScript实现按ID分组哈希表，支持新增颜色并去重

原始数组 #

const arr = [
  {
    "id": 2,
    "color": "red"
  },
  {
    "id": 1,
    "color": "blue"
  },
  {
    "id": 2,
    "color": "yellow"
  },
];

功能需求 #

• 可向指定id对应的键下添加新颜色；
• 若目标id不存在于哈希表中，则新建该键并添加颜色；
• 需避免颜色重复。

预期示例 #

示例1：向id为3的键添加color: green时，预期生成的哈希表：

{
  2: [{color: "red"}, {color: "yellow"}],
  1: [{color: "blue"}],
  3: [{color: "green"}]
}

注：原示例中id对应颜色的归属存在笔误，此处按原始数组的正确映射修正

示例2：向id为2的键添加color: brown时，预期生成：

{
  2: [{color: "red"}, {color: "yellow"}, {color: "brown"}],
  1: [{color: "blue"}],
  3: [{color: "green"}]
}

错误代码 #

你编写的测试代码无法实现预期功能，代码如下：

const arr = [
  {
    "id": 2,
    "color": "red"
  },
  {
    "id": 1,
    "color": "blue"
  },
  {
    "id": 2,
    "color": "yellow"
  },
];

function addItem(id: number, colors: any) {
    let newArr = {[id]: colors};
  arr.forEach(function (obj) {

    newArr[obj.id].push({id: obj.color});
  });
  return newArr;
}

console.log(addItem(3, [{color: "green"}]))
console.log(addItem(1, [{color: "brown"}]))

修正后的代码 #

问题分析 #

原代码存在以下核心问题：

1. 未维护持久化的哈希表，每次调用addItem都重新创建对象，丢失之前的操作状态；
2. 遍历原数组时未做颜色去重，且直接push会导致报错（当newArr[obj.id]不存在时）；
3. 参数处理逻辑混乱，未实现颜色去重逻辑。

修正代码 #

const arr = [
  {
    "id": 2,
    "color": "red"
  },
  {
    "id": 1,
    "color": "blue"
  },
  {
    "id": 2,
    "color": "yellow"
  },
];

// 初始化全局哈希表，先处理原数组并完成颜色去重
const colorMap: { [key: number]: { color: string }[] } = {};
arr.forEach(item => {
  if (!colorMap[item.id]) {
    colorMap[item.id] = [];
  }
  // 检查当前颜色是否已存在，避免重复添加
  const colorExists = colorMap[item.id].some(colorObj => colorObj.color === item.color);
  if (!colorExists) {
    colorMap[item.id].push({ color: item.color });
  }
});

// 实现添加功能的函数
function addItem(id: number, newColor: { color: string }) {
  // 若目标id不存在，新建对应数组
  if (!colorMap[id]) {
    colorMap[id] = [];
  }
  // 检查颜色是否已存在，去重后添加
  const colorExists = colorMap[id].some(colorObj => colorObj.color === newColor.color);
  if (!colorExists) {
    colorMap[id].push(newColor);
  }
  // 返回哈希表的深拷贝，避免外部直接修改原对象
  return JSON.parse(JSON.stringify(colorMap));
}

// 测试调用
console.log(addItem(3, { color: "green" }));
console.log(addItem(2, { color: "brown" }));

代码说明 #

1. 持久化哈希表：使用全局变量colorMap存储所有id对应的颜色列表，保留每次操作的状态；
2. 初始化去重：处理原始数组时，对每个id下的颜色做去重检查，避免初始数据重复；
3. 添加逻辑：添加新颜色前先检查是否已存在，确保去重；若目标id不存在则自动创建；
4. 返回副本：返回哈希表的深拷贝，避免外部代码直接修改原colorMap的引用。

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