JavaScript基于forEach循环动态构建嵌套视频数组的问题求解

一、forEach循环动态嵌套数组的正确实现 #

原逻辑数组写入失效的核心原因：

• 外层结果结构初始化错误：本该声明为数组的外层容器被误写为空对象，数值下标赋值时无法触发数组的动态长度扩展机制
• 循环执行顺序错误：未提前初始化对应索引位置的子数组，就直接执行push/赋值操作，访问undefined属性导致写入中断
• 下标使用不规范：将添加了自定义前缀的字符串（如video_0）作为数组下标，这类非纯数字的键不会被识别为数组有效索引，仅会作为普通对象属性挂载，无法形成预期的嵌套数组结构

正确实现步骤：

1. 全局外层结果直接初始化为纯空数组，不使用对象作为外层容器
2. 直接使用forEach回调内置的数值型循环索引，无需额外构造带前缀的自定义键名
3. 每轮循环优先为当前索引位置初始化空的嵌套子数组，再往子数组中写入组装完成的播放条目，全程无需硬编码固定下标

参考实现代码：

// 外层初始化纯空数组
const finalNestedList = [];

// 遍历接口返回的原始视频列表
rawVideoList.forEach((currentVideo, loopIndex) => {
  // 动态为当前遍历索引创建嵌套子数组，无需固定下标
  finalNestedList[loopIndex] = [];

  // 组装所有转码分辨率的播放条目
  currentVideo.transcoded.forEach(resConfig => {
    finalNestedList[loopIndex].push({
      resolution: resConfig.identifier,
      playUrl: buildResUrl(currentVideo.videodata, resConfig.identifier)
    })
  })

  // 追加原始全分辨率版本条目
  finalNestedList[loopIndex].push({
    resolution: '原片',
    playUrl: currentVideo.videodata
  })
})

二、视频地址生成的优化方案 #

替代零散字符串拼接的可落地优化方向：

• 抽离独立纯函数处理地址生成逻辑：将所有拼接规则集中在独立函数中，入参仅保留原片直链、分辨率标识两个核心参数，循环逻辑只负责调取函数、组装条目，后续调整拼接规则时无需改动遍历流程
• 采用原生URL构造器替代手动字符串切割、替换操作：原生API会自动处理路径分隔符、特殊字符转义、参数拼接的边界问题，相比手动拼接的鲁棒性更高，也兼容带查询参数的视频链接场景
• 固定规则前置为静态配置：将分辨率标识对应的路径段、文件命名规则整理为本地静态配置表，生成地址时直接查表匹配，避免在业务代码中硬编码字符串规则

参考的地址生成函数示例：

// 静态配置：分辨率标识对应转码路径段
const RES_PATH_MAP = {
  '720p': 'hd',
  '1080p': 'fhd',
  '4k': 'uhd'
}

function buildResUrl(originalUrl, resolutionTag) {
  const url = new URL(originalUrl);
  const originFileName = url.pathname.split('/').pop().split('.')[0];
  const fileExt = url.pathname.split('.').pop();
  const resPath = RES_PATH_MAP[resolutionTag] || 'transcoded';
  
  // 基于URL对象设置转码文件路径，自动处理边界格式
  url.pathname = `/${resPath}/${originFileName}_${resolutionTag}.${fileExt}`;
  return url.toString();
}

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