如何利用循环动态获取var+i格式变量及对应对象属性？

当然可以！这种命名有明显规律的场景，用循环动态处理简直是完美解决方案，能帮你彻底摆脱重复代码的困扰～

思路核心 #

JavaScript中，对象的属性访问支持方括号语法，你可以通过字符串变量来动态指定要访问的属性名；而数组元素本身是有规律的字符串，也可以通过拼接字符串或提取现有元素的特征来对应处理。

方法一：直接遍历数字范围（已知编号从5到10） #

因为你明确知道编号是从5到10，直接循环这个数字区间是最直接的方式：

// 遍历5到10的编号
for (let i = 5; i <= 10; i++) {
  // 动态生成dropArea的ID字符串
  const dropAreaId = `productDropArea${i}`;
  
  // 可以先验证数组中是否存在该元素（可选）
  if (productDropArea.includes(dropAreaId)) {
    console.log('当前处理的DropArea:', dropAreaId);
  }

  // 动态获取对应对象属性
  const mediaPropName = `productMedia${i}`;
  const mediaData = res.assetData[mediaPropName];
  
  // 避免访问不存在的属性导致报错（可选）
  if (mediaData !== undefined) {
    console.log('对应的媒体数据:', mediaData);
  }
}

方法二：基于现有数组遍历（更贴合你的数据结构） #

如果你不想硬编码数字范围，也可以直接遍历已有的productDropArea数组，从中提取编号来对应对象属性：

productDropArea.forEach(dropArea => {
  // 从dropArea字符串中提取数字部分（比如从"productDropArea5"得到"5"）
  const number = dropArea.replace('productDropArea', '');
  
  // 拼接对应的媒体属性名
  const mediaPropName = `productMedia${number}`;
  const mediaData = res.assetData[mediaPropName];
  
  console.log('当前DropArea:', dropArea);
  console.log('关联的媒体数据:', mediaData);
});

注意事项 #

• 如果你不确定对象中是否存在某个属性，建议先做存在性检查（比如用res.assetData.hasOwnProperty(mediaPropName)或直接判断属性值是否为undefined），避免运行时报错。
• 如果你的编号范围后续可能变化，方法二更灵活，不需要修改循环的起始/结束数字。

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