遍历JavaScript对象时0与false值返回undefined的问题排查及解决

看起来你遇到了两个挺奇怪的问题：第一个对象的id变成了undefined，所有对象的isActive也都是undefined。咱们一步步拆解原因和修复办法：

一、为什么会出现这些问题？ #

1. 所有对象的isActive为undefined #

这几乎可以肯定是代码笔误或者实际运行的代码和你写的不一致：

• 你可能不小心把isActive: false写成了isActive: obj.isActive（原数组里根本没有这个属性，自然取到undefined）
• 或者犯了大小写拼写错误，比如写成IsActive（JavaScript对大小写敏感）或者isactive
• 极端情况下，旧版JavaScript环境不支持对象末尾的 trailing comma（你代码里isActive: false,后面的逗号），导致这个属性被解析器直接忽略

2. 第一个对象的id为undefined #

原数组第一个对象的id明明是0，却取到undefined，可能的原因：

• 实际传入函数的数组第一个对象的id属性名不对（比如写成Id而非id），但你给出的原数组是正确的，所以更可能是遍历前原数组的第一个元素被其他代码意外修改了
• 或者在forEach的回调里，第一个obj被外部变量污染干扰了

二、修复代码的最优方案 #

其实你完全不需要手动逐个复制属性，用Array.map()来转换数组更简洁，还能彻底避免手动复制带来的拼写错误：

updateCategories(objArray) {
  // 使用map遍历数组，返回转换后的新对象数组
  return objArray.map(obj => {
    // 解构原对象的所有属性，再添加新属性
    return {
      ...obj,
      isActive: false
    };
  });
}

// 或者更简洁的箭头函数写法
updateCategories(objArray) {
  return objArray.map(obj => ({ ...obj, isActive: false }));
}

这个方法的好处：

• 自动复制原对象的所有属性（包括id、name、entityState），不需要手动一个个写，从根源避免拼写错误
• map天生就是用来生成新数组的工具，代码风格更符合JavaScript的函数式编程习惯
• 明确设置isActive: false，不会再出现undefined的情况

三、验证修复效果 #

用你给出的原数组测试，返回的新数组应该是：

[
  { "id": 0, "name": "All", "entityState": 0, "isActive": false },
  { "id": 1, "name": "Phones", "entityState": 0, "isActive": false },
  { "id": 2, "name": "Laptops", "entityState": 0, "isActive": false },
  { "id": 3, "name": "Accessories", "entityState": 0, "isActive": false },
  { "id": 4, "name": "Laptop Bags", "entityState": 0, "isActive": false },
  { "id": 5, "name": "Cameras", "entityState": 0, "isActive": false }
]

如果还是出现第一个对象id为undefined，建议你在updateCategories函数开头加一行console.log(objArray[0])，看看传入的第一个对象实际是什么，确认id属性是否存在且为0。

内容的提问来源于stack exchange，提问作者Ken Maduka Kenny