JavaScript如何按type属性分组对象数组且保留元素原有顺序

需求说明 #

需要对对象数组按以下规则分组：

按type属性分组，同时保留原有元素顺序，连续的同type元素归为同一组。

入参示例 #

待分组的对象数组：

var arrayObj = [
    { "type": "user", "text": "user1" },
    { "type": "user", "text": "user2" },
    { "type": "user", "text": "user3" },
    { "type": "clerk", "text": "clerk1" },
    { "type": "user", "text": "user4" },
    { "type": "clerk", "text": "clerk2" },
    { "type": "clerk", "text": "clerk3" },
    { "type": "user", "text": "user5" },
    { "type": "user", "text": "user6" }
];

预期输出 #

var newArray = [
  [
      {type: "user", text: "user1"},
      {type: "user", text: "user2"},
      {type: "user", text: "user3"}
  ],
  [
      {type: "clerk", text: "clerk1"}
  ],
  [
      {type: "user", text: "user4"}
  ],
  [
      {type: "clerk", text: "clerk2"},
      {type: "clerk", text: "clerk3"}
  ],  
  [
      {type: "user", text: "user5"},
      {type: "user", text: "user6"} 
  ]
];

现有方案问题 #

你使用的filter方法会全局匹配所有符合type的元素，无法区分非连续的同type片段，自然不能实现按连续区间分组的需求。

解决方案 #

可以使用Array.reduce方法单次遍历数组完成分组，时间复杂度O(n)，实现如下：

function groupByContinuousKey(arr, groupKey) {
  return arr.reduce((res, cur) => {
    const lastGroup = res.at(-1);
    // 最后一组存在且组内元素的分组key和当前元素一致，就加入当前组
    if (lastGroup && lastGroup[0][groupKey] === cur[groupKey]) {
      lastGroup.push(cur);
    } else {
      // 否则新增分组
      res.push([cur]);
    }
    return res;
  }, []);
}

// 调用测试
const result = groupByContinuousKey(arrayObj, 'type');
console.log(result);

该实现完全保留原数组的元素顺序，自动根据连续的type属性拆分分组，输出结果和预期完全一致。

内容的提问来源于stack exchange，提问作者God of all wars