如何在JavaScript中将数组重复元素合并为对应子数组

基础遍历版本（可读性最高） #

const originArr = ['a', 'b', 'd', 'a', 'f', 'b', 'a', 'b'];
const groupMap = new Map();

for (const element of originArr) {
  // 首次出现的元素先初始化对应子数组
  if (!groupMap.has(element)) {
    groupMap.set(element, []);
  }
  // 将当前元素推入对应子数组
  groupMap.get(element).push(element);
}

// 提取Map中所有值即为最终结果
const result = Array.from(groupMap.values());
console.log(result); // 输出 [['a','a','a'], ['b','b','b'], ['d'], ['f']]

reduce 链式版本 #

const originArr = ['a', 'b', 'd', 'a', 'f', 'b', 'a', 'b'];
const result = Array.from(
  originArr.reduce((acc, cur) => {
    acc.has(cur) || acc.set(cur, []);
    acc.get(cur).push(cur);
    return acc;
  }, new Map())
  .values()
);

• 选择Map而非普通对象存储分组，是因为Map可以严格保留元素在原数组中首次出现的顺序，同时支持任意类型的元素作为键，后续如果数组元素是数字、对象、Symbol等类型也可以正常兼容
• 最终输出顺序和元素在原数组首次出现的顺序完全匹配，符合需求要求

内容的提问来源于stack exchange，提问作者Егор Лапкин