原生JavaScript如何按相同键合并二维数组中的元素？

实现逻辑 #

• 借助普通对象作为临时分组映射容器，以子数组的首个元素作为分组键
• 遍历原数组的所有子项，不存在对应分组键时先初始化分组数组，首个元素为键本身
• 将当前子数组除首元素外的所有内容追加到对应分组的数组中
• 遍历完成后提取映射对象的所有值，即可得到目标结果

代码实现 #

兼容性写法（支持ES5及以上环境） #

const array = [
  ["41",{asd:"1"}],
  ["41",{asd:"2"}],
  ["42",{asd:"1"}],
  ["42",{asd:"2"}]
];

var groupMap = {};
for (var i = 0; i < array.length; i++) {
  var item = array[i];
  var key = item[0];
  if (!groupMap[key]) {
    groupMap[key] = [key];
  }
  // 兼容无扩展运算符的旧环境
  Array.prototype.push.apply(groupMap[key], item.slice(1));
}

var result = [];
for (var k in groupMap) {
  if (groupMap.hasOwnProperty(k)) {
    result.push(groupMap[k]);
  }
}
console.log(result);

精简写法（支持ES6及以上环境） #

const array = [
  ["41",{asd:"1"}],
  ["41",{asd:"2"}],
  ["42",{asd:"1"}],
  ["42",{asd:"2"}]
];

const result = Object.values(array.reduce((acc, cur) => {
  const key = cur[0];
  !acc[key] && (acc[key] = [key]);
  acc[key].push(...cur.slice(1));
  return acc;
}, {}));

console.log(result);

两种写法最终输出结果均符合要求：

[
  ["41", {asd:"1"}, {asd:"2"}],
  ["42", {asd:"1"}, {asd:"2"}]
]

该实现同时兼容子数组除首元素外存在多个待合并项的场景，无需额外调整代码。

内容的提问来源于stack exchange，提问作者Tuấn Nguyễn