JavaScript foreach循环中对象属性访问返回undefined的原因

你遇到的问题核心在于对象属性访问的语法错误，咱们一步步拆解问题：

先看你代码里的关键逻辑段：

headers.forEach(function(obj) {
  if(fields.indexOf(obj) == '-1'){
    console.log(headersObj.c);
    console.log(headersObj.obj);
    console.log(obj);
    notInTemplate.push(obj);
  }
});

你看到的undefined，是因为headersObj.obj这行代码的写法错误：

• 当使用点语法（.）访问对象属性时，点后面的内容会被当作字面量属性名——也就是说JS会去headersObj里找一个名叫"obj"的属性，但你的headersObj里只有a、b、c三个属性，自然找不到，所以返回undefined。
• 而你真正想访问的是变量obj对应的属性，这时候必须用方括号语法（[]），把变量放在方括号里，JS才会解析变量的值作为属性名。

修正后的代码如下：

const headersObj = {a: "a", b: "b", c: "c"};
const headers = ["a", "b", "c"];
const fields = ["a", "b"];
const notInTemplate = [];

headers.forEach(function(obj) {
  // 注意：indexOf返回数字类型，要和数字-1比较，避免隐式类型转换
  if(fields.indexOf(obj) === -1){
    console.log(headersObj.c);
    console.log(headersObj[obj]); // 改用方括号语法访问变量对应的属性
    console.log(obj);
    notInTemplate.push(obj);
  }
});

console.log(notInTemplate);

另外补充个小细节：你原来的fields.indexOf(obj) == '-1'也有隐患——indexOf返回的是数字类型的索引（找不到时为-1），和字符串'-1'用==比较会触发隐式类型转换，建议改成严格相等的=== -1，避免潜在bug。

运行修正后的代码，输出会变成：

c
c
c
[ 'c' ]

完全符合你的预期。

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