如何通过变量值动态访问对象属性？AJAX场景代码报错求助

嘿，这个问题其实是JavaScript里动态访问对象属性的语法用错啦！

错误原因分析 #

你写的 console.log(result.ans + x + .pass) 完全不符合JavaScript语法规则：

• JS会把 result.ans + x 当成字符串/数值拼接，然后后面的 .pass 前面没有任何对象，JS根本不知道你要访问哪个对象的pass属性，所以才会抛出「expected expression, got '.'」的语法错误。
• 而 result.ans2.pass 能正常运行，是因为这是静态属性访问，点语法可以直接识别固定的属性名ans2。

正确的写法 #

要动态拼接属性名（比如用变量x生成ans2），你需要用方括号语法来访问对象属性，有两种常用方式：

方式1：字符串拼接

$.ajax({
  type: "POST",
  url: 'http://some-url',
  dataType: "json",
  data: { datasent: dataKey },
  cache: false,
  success: function(result) {
    var x = 2;
    // 用方括号拼接属性名
    console.log(result['ans' + x].pass);
  }
});

方式2：ES6模板字符串（更简洁）

如果你环境支持ES6，推荐用模板字符串来拼接，可读性更好：

$.ajax({
  type: "POST",
  url: 'http://some-url',
  dataType: "json",
  data: { datasent: dataKey },
  cache: false,
  success: function(result) {
    var x = 2;
    // 模板字符串拼接属性名
    console.log(result[`ans${x}`].pass);
  }
});

额外小提示 #

如果不确定动态生成的属性是否存在（比如ans2可能在返回结果里不存在），可以先做个存在性判断，避免控制台报错：

success: function(result) {
  var x = 2;
  const targetProp = result[`ans${x}`];
  if (targetProp) {
    console.log(targetProp.pass);
  } else {
    console.log(`属性ans${x}不存在`);
  }
}

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