如何按连续相同type分组拆分数组？尝试reduce未成功求方案

问题描述 #

现有如下对象数组：

const arr = [
  { type: "orange", title: "First" },
  { type: "orange", title: "Second" },
  { type: "banana", title: "Third" },
  { type: "banana", title: "Fourth" },
  { type: "orange", title: "Fifth" },
  { type: "orange", title: "Sixth" }
];

需要按连续相同的type值将其拆分为子数组，预期输出：

[
  [ { type: "orange", title: "First" }, { type: "orange", title: "Second" } ],
  [ { type: "banana", title: "Third" }, { type: "banana", title: "Fourth" } ],
  [ { type: "orange", title: "Fifth" }, { type: "orange", title: "Sixth" } ]
]

原代码问题分析 #

你之前尝试的reduce代码逻辑是按type做全局分组，把所有同type的元素归到同一个数组里，最终得到的是一个以type为键的对象，而非按连续序列拆分的二维数组，因此不符合需求：

const result = arr.reduce((prev, curr, i) => {
  if (!prev[curr.type]) {
    prev[curr.type] = [];
  }
  prev[curr.type].push(curr);
  return prev;
}, {});
// 输出：{ orange: [...所有orange元素], banana: [...所有banana元素] }

正确实现方案 #

使用reduce方法，以空数组为初始值，跟踪结果数组的最后一个子数组，判断当前元素是否属于该子数组：

const arr = [
  { type: "orange", title: "First" },
  { type: "orange", title: "Second" },
  { type: "banana", title: "Third" },
  { type: "banana", title: "Fourth" },
  { type: "orange", title: "Fifth" },
  { type: "orange", title: "Sixth" }
];

const result = arr.reduce((prev, curr) => {
  // 若结果数组为空，或最后一组的type与当前元素不同，则新建子数组
  if (!prev.length || prev[prev.length - 1][0].type !== curr.type) {
    prev.push([curr]);
  } else {
    // 否则将当前元素追加到最后一个子数组中
    prev[prev.length - 1].push(curr);
  }
  return prev;
}, []);

console.log(result);

逻辑说明 #

1. 初始值设为空数组[]，最终结果会是二维数组
2. 每次迭代时：
   • 如果结果数组为空，直接把当前元素作为新子数组推入
   • 如果结果数组最后一个子数组的第一个元素type和当前元素type不同，新建子数组并推入结果数组
   • 如果type相同，就把当前元素追加到最后一个子数组里

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