如何将对象数组中连续type为image的对象合并为存储多图的单对象

最优实现采用单次遍历+临时缓存的方案，时间复杂度为O(n)，仅需遍历数组一次即可完成转换，空间复杂度为O(k)（k为最长连续图片段的长度，最坏情况下为O(n)），是性能最优的实现方式。

实现思路 #

• 初始化结果数组result存储最终转换后的数据，初始化临时数组currentImageUrls缓存当前连续的图片URL
• 遍历原数组的每一个元素：
  • 若当前元素是type: 'image'类型，直接将其image字段的URL存入临时数组，忽略其他字段
  • 若当前元素不是图片类型：
    1. 先检查临时数组是否有值：如果有，说明刚处理完一段连续图片，将临时数组的URL封装为{ type: 'image', images: currentImageUrls }格式的对象存入结果数组，之后清空临时数组
    2. 将当前非图片元素原样存入结果数组
• 遍历结束后额外做一次临时数组非空检查，避免数组末尾的连续图片段未被合并的问题

代码实现 #

function mergeContinuousImages(arr) {
  const result = [];
  let currentImageUrls = [];

  for (const item of arr) {
    if (item.type === 'image') {
      currentImageUrls.push(item.image);
      continue;
    }
    // 遇到非图片元素，先处理之前缓存的连续图片
    if (currentImageUrls.length > 0) {
      result.push({
        type: 'image',
        images: currentImageUrls
      });
      currentImageUrls = [];
    }
    // 非图片元素直接加入结果
    result.push(item);
  }

  // 处理数组末尾可能存在的连续图片
  if (currentImageUrls.length > 0) {
    result.push({
      type: 'image',
      images: currentImageUrls
    });
  }

  return result;
}

特性说明 #

• 天然支持多组连续图片的合并场景：被非图片元素隔开的多组连续图片会分别合并为独立的多图对象，不会跨非图片元素合并
• 符合需求约定：自动忽略原图片对象的children字段，合并后对象仅保留type和images两个字段
• 非侵入式：不会修改原数组，非图片元素原样返回，无副作用

内容的提问来源于stack exchange，提问作者Andrés Montoya