Angular/TypeScript如何根据属性生成分组设备ID的新列表？

我有两个对象列表：

const groups = [
  { 
    id: 1,
    // 其他属性
  },
  { 
    id: 2,
    // 其他属性
  },
  { 
    id: 3,
    // 其他属性
  }
]

const devices = [
  { 
    id: 1,
    group_id: 1,
    // 其他属性
  },
  { 
    id: 2,
    group_id: 1,
    // 其他属性
  },
  { 
    id: 3,
    group_id: 2,
    // 其他属性
  }
]

需要生成一个新列表，按group_id对设备ID进行分组，示例输出如下：

const groupedDevices = [
  {
    id: [1,2] // 对应group 1
  },
  { 
    id:[3] // 对应group 2
  }
]

下面是两种可行的实现方法：

方法一：先构建映射再转目标数组（性能更优） #

这种方法先通过一次遍历把设备按group_id归类，再和分组列表匹配，适合数据量较大的场景：

1. 构建设备分组映射：

const deviceMap = {};
devices.forEach(device => {
  const groupId = device.group_id;
  // 若当前分组未初始化，先创建空数组
  if (!deviceMap[groupId]) {
    deviceMap[groupId] = [];
  }
  deviceMap[groupId].push(device.id);
});

2. 生成目标数组（自动过滤无设备的分组）：

const groupedDevices = groups
  .filter(group => deviceMap[group.id])
  .map(group => ({ id: deviceMap[group.id] }));

如果需要保留无设备的分组（对应空数组），去掉filter步骤即可：

const groupedDevices = groups.map(group => ({
  id: deviceMap[group.id] || []
}));

方法二：直接遍历分组收集设备（逻辑更直观） #

如果数据量不大，这种写法更易懂，每个分组单独筛选对应设备：

const groupedDevices = groups.map(group => {
  // 筛选当前分组下的所有设备ID
  const deviceIds = devices
    .filter(device => device.group_id === group.id)
    .map(device => device.id);
  // 可选：跳过没有设备的分组
  if (deviceIds.length === 0) return null;
  return { id: deviceIds };
}).filter(Boolean); // 过滤掉返回null的项

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