如何按子数组首个元素的key值对二维数组进行分组

首先看你的需求：把原二维数组中，所有子数组按其第一个元素的key值分组，相同key的子数组要被嵌套到一个数组里，不同key的保持独立。

原代码的问题分析 #

你当前的循环+reduce写法存在几个核心问题：

• 每次循环都会从当前索引切分数组再做reduce，会重复处理已经分组过的元素，导致最终结果逻辑混乱
• reduce的逻辑只判断了累加器第一个元素的key和当前元素的key是否相等，无法完成多组相同key的批量收集

实现思路 #

最清晰高效的方式是用**映射表（推荐用Map）**来暂存分组：

1. 遍历原数组的每一个子数组
2. 提取当前子数组第一个元素的key值作为分组标识
3. 检查映射表中是否已有该key对应的分组：
   • 如果有，就把当前子数组追加到该分组的数组中
   • 如果没有，就新建一个数组，把当前子数组放进去，再存入映射表
4. 最后把映射表中的所有值提取出来，转换成数组，就是最终的分组结果

最终实现代码 #

const arr = [ 
  [ {"key":2, "other":123}, {"key":2, "other":222} ], 
  [ {"key":3, "other":0} ], 
  [ {"key":1, "other":11}, {"key":1, "other":23} ], 
  [ {"key":1, "other":22} ] 
];

// 用Map存储分组，key是子数组的首个key值，value是对应的分组数组
const groupMap = new Map();

arr.forEach(subArr => {
  // 取出子数组第一个元素的key作为分组键
  const groupKey = subArr[0].key;
  // 检查Map中是否已有该分组
  if (groupMap.has(groupKey)) {
    // 已有则追加当前子数组到分组中
    groupMap.get(groupKey).push(subArr);
  } else {
    // 没有则新建分组，存入当前子数组
    groupMap.set(groupKey, [subArr]);
  }
});

// 转换为最终格式：单个元素的分组直接返回子数组，多个元素的保留嵌套
const final = Array.from(groupMap.values()).map(group => {
  return group.length === 1 ? group[0] : group;
});

console.log(final);
// 输出完全匹配你的预期：
// [
//   [ {"key":2, "other":123}, {"key":2, "other":222} ],
//   [ {"key":3, "other":0} ],
//   [ [ {"key":1, "other":11}, {"key":1, "other":23} ], [ {"key":1, "other":22} ] ]
// ]

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