如何遍历视频数组按多条件匹配视口宽度筛选适配视频资源

修正后完整代码 #

const videos = [{
    url: 'video1.mp4',
    width: 1920
  },
  {
    url: 'video2.mp4',
    width: 1280
  },
  {
    url: 'video3.mp4',
    width: 720
  },
  {
    url: 'video4.mp4',
    width: 560
  },
  {
    url: 'video5.mp4',
    width: 420
  },
];

function getVideoUrl(viewportWidth) {
  // 提前校验数组按宽度降序排序，避免顺序混乱导致逻辑错误
  const sortedVideos = [...videos].sort((a, b) => b.width - a.width);
  const maxWidth = sortedVideos[0].width;
  const minWidth = sortedVideos.at(-1).width;

  // 边界判断匹配需求，使用>=、<=
  if (viewportWidth >= maxWidth) {
    return sortedVideos[0].url;
  }
  if (viewportWidth <= minWidth) {
    return sortedVideos.at(-1).url;
  }

  // 中间区间遍历逻辑修正
  for (let i = 0; i < sortedVideos.length - 1; i++) {
    const currentWidth = sortedVideos[i].width;
    const nextWidth = sortedVideos[i + 1].width;
    if (viewportWidth < currentWidth && viewportWidth > nextWidth) {
      return sortedVideos[i].url;
    }
  }

  // 兜底逻辑，避免边界遗漏
  return sortedVideos[0].url;
}

// 测试用例
console.log(getVideoUrl(1200)); // 输出 video2.mp4
console.log(getVideoUrl(2000)); // 输出 video1.mp4
console.log(getVideoUrl(300)); // 输出 video5.mp4
console.log(getVideoUrl(1800)); // 输出 video1.mp4

具体修改点 #

• 边界判断符号修正：将原代码的>、<替换为>=、<=，匹配需求中大于等于最大宽度、小于等于最小宽度的判定规则
• 循环逻辑重构：原while循环条件逻辑完全倒置，改为遍历数组逐一校验当前项与下一项宽度的区间匹配规则，同时避免i+1数组越界问题
• 增加排序校验：提前对视频数组按宽度降序排序，避免数组顺序调整后逻辑失效
• 增加兜底逻辑：避免极端边界场景无返回值的问题

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