如何用JavaScript数组方法将相邻特定类型对象分组为module对象

实现思路 #

1. 初始化两个变量：result 用于存储最终处理后的数组，tempMedia 用于临时收集连续的 image 或 video 类型项。
2. 遍历原数组中的每一项：
   • 如果当前项是 image 或 video，直接加入 tempMedia 数组。
   • 如果当前项是 text：
     • 先检查 tempMedia 是否有内容，若有则将其包装成 type: "module" 的对象，加入 result，然后清空 tempMedia。
     • 再将当前 text 项加入 result。
3. 遍历结束后，还要检查 tempMedia 是否还有未处理的内容，若有则包装成 module 对象加入 result。

代码实现 #

const data = [
  { type: "image" },
  { type: "image" },
  { type: "text" },
  { type: "image" },
  { type: "video" },
  { type: "text" },
  { type: "video" },
  { type: "video" },
];

function groupMediaItems(arr) {
  const result = [];
  let tempMedia = [];
  
  for (const item of arr) {
    if (item.type === 'image' || item.type === 'video') {
      tempMedia.push(item);
    } else {
      // 处理之前收集的media项
      if (tempMedia.length > 0) {
        result.push({ type: 'module', media: tempMedia });
        tempMedia = [];
      }
      result.push(item);
    }
  }
  
  // 处理最后一组未被触发的media项
  if (tempMedia.length > 0) {
    result.push({ type: 'module', media: tempMedia });
  }
  
  return result;
}

const processedData = groupMediaItems(data);
console.log(processedData);

输出结果 #

运行上述代码后，processedData 的结构与期望完全一致：

[
  { type: "module", media: [{ type: "image" }, { type: "image" }] },
  { type: "text" },
  { type: "module", media: [{ type: "image" }, { type: "video" }] },
  { type: "text" },
  { type: "module", media: [{ type: "video" }, { type: "video" }] },
]

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