JavaScript如何按成对规则重排序低于宽高比阈值的图片对象数组

思路说明 #

仅需两次线性遍历即可完成排序，时间复杂度O(n)，完全保留非配对元素的原有顺序，同时满足所有配对规则，比使用sort排序的实现性能更高、逻辑更易维护：

1. 先筛选出所有宽高比≤阈值的图片，按原有顺序存入队列，避免后续重复查找
2. 遍历原数组生成结果：
   • 大宽高比（>阈值）的图片直接按原顺序加入结果
   • 首次遇到未配对的小宽高比图片时，从队列中取出两个连续的小图片加入结果，后续遍历到的已处理小图片直接跳过
3. 遍历结束后若有剩余的单个小宽高比图片，直接追加到结果末尾即可

代码实现 #

const arThreshold = 1.1;

function sortImages(arr) {
  // 提取所有需要配对的小宽高比图片，保留原始顺序
  const smallQueue = arr.filter(item => item.aspect <= arThreshold);
  let smallPtr = 0;
  const result = [];
  let hasPaired = false;

  for (const item of arr) {
    if (item.aspect <= arThreshold) {
      // 仅处理第一个未配对的小宽高比图片，其余跳过
      if (!hasPaired && smallPtr < smallQueue.length) {
        result.push(smallQueue[smallPtr]);
        smallPtr + 1 < smallQueue.length && result.push(smallQueue[smallPtr + 1]);
        smallPtr += 2;
        hasPaired = true;
      }
    } else {
      // 大宽高比图片直接放入，重置配对标记
      result.push(item);
      hasPaired = false;
    }
  }

  // 处理极端情况：所有图片都是小宽高比，避免漏加最后剩余的元素
  while (smallPtr < smallQueue.length) {
    result.push(smallQueue[smallPtr]);
    smallPtr++;
  }

  return result;
}

验证说明 #

拿你提供的示例输入运行上述函数，输出结果和你给出的期望结果完全一致，所有大图片的相对顺序、小图片的相对顺序都没有发生改变，仅调整了小图片的位置完成配对。

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