如何用JavaScript循环改写重复代码？循环报错求解决

错误原因分析 #

• 动态变量名语法错误：你写的var data+i是不合法的JavaScript语法，无法通过运算符拼接的方式声明变量名，这会直接导致代码报错。
• 循环范围错误：原逻辑只需要处理i从1到5的情况，但你的循环条件是i < 7，会让i遍历到6，此时numero[6]大概率是undefined，计算后取json2的值也会出现异常。

正确的循环代码 #

不需要单独声明data1到data5这些变量，直接在循环中完成取值和赋值即可：

for (let i = 1; i <= 5; i++) {
  // 计算要从json2中取值的索引
  const targetIndex = Math.floor(numero[i] * 24);
  // 给对应id的元素设置内容
  document.getElementById(`wordi${i}`).innerHTML = json2[targetIndex];
}

如果追求更简洁的写法，也可以合并成一行：

for (let i = 1; i <= 5; i++) {
  document.getElementById(`wordi${i}`).innerHTML = json2[Math.floor(numero[i] * 24)];
}

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