JavaScript如何动态拼接变量作为对象属性名访问row系列属性

核心规则 #

JavaScript访问对象属性支持两种语法，适用场景完全不同：

• 点语法：写法为obj.固定属性名，仅能访问写死的、符合标识符命名规则的属性，不支持动态拼接内容、变量作为属性名
• 方括号语法：写法为obj[表达式/变量]，方括号内可以传入任意变量、运算表达式，运行时会自动把表达式结果转成字符串匹配对应属性，是实现动态属性访问的标准方案。

你之前尝试的写法均不生效的原因：

• movies.row${[i]}属于语法错误：模板字符串是独立的运算表达式，不能直接拼接在点语法的属性名位置
• 扩展运算符...的作用是展开数组、对象等可迭代结构，和动态拼接属性名的场景完全不匹配，movies.row[1...6]属于语法误用。

修正后的可运行代码 #

function display_all_movies(movies) {
  const totalRowCount = Number(movies.row_count.count);
  // 外层循环遍历所有行
  for (let i = 0; i < totalRowCount; i++) {
    // 动态拼接"row"+i作为属性名，传入方括号获取当前行对象
    const currentRowData = movies[`row${i}`];
    // 遍历当前行的所有键值对渲染
    for (let key in currentRowData) {
      document.getElementById("moviesList").innerHTML += 
        `Key: ${key} Value: ${currentRowData[key]}<br>`;
    }
  }
}

效果说明 #

循环变量i从0递增到3的过程中，movies[`row${i}`]会依次匹配到movies.row0、movies.row1、movies.row2、movies.row3四个子对象，完全替代之前硬编码row1的写法，实现按序号动态访问的需求。

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