JavaScript数组场景下for循环动态属性与DOM赋值问题

你之前的循环代码无法正常运行，核心是混淆了JS对象的两种属性访问语法的使用规则：

• 静态点记法（obj.属性名）：后面必须跟随固定的、写死的属性名，不能在点后面做字符串拼接运算
• 动态方括号记法（obj[表达式]）：括号内可以放任意返回字符串的表达式，正好适配动态拼接属性名的场景

错误写法 data[0].t + i 的实际执行逻辑：先读取data[0]上不存在的t属性（值为undefined），再把undefined和循环变量i做字符串拼接，完全达不到读取t1、t2这类目标属性的效果。

将动态属性访问换成方括号写法，同时修正原循环的条件错误（原循环用i < data.length判断不对：要遍历的t1~t4是data[0]对象的属性，和data数组本身的长度没有绑定关系，直接按需要的属性数量控制循环次数即可）：

function showInfo(results) {
  var data = results.data
  // 循环范围和原硬编码的t1~t4保持一致，后续要加t5/t6直接改上限即可
  for (let i = 1; i <= 4; i++) {
    document.getElementById('t' + i).innerHTML = [data[0]['t' + i]].join(', ')
  }
}

如果后续t类属性的数量不固定，可以直接从目标对象上自动筛出所有符合规则的属性遍历，无需手动维护循环上限：

function showInfo(results) {
  var data = results.data
  const targetObj = data[0]
  // 遍历对象所有属性，筛出以t开头、后接数字的属性
  Object.keys(targetObj).forEach(key => {
    if (/^t\d+$/.test(key)) {
      document.getElementById(key).innerHTML = [targetObj[key]].join(', ')
    }
  })
}

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