属性值已定义却返回undefined？嵌套对象属性访问出现NaN问题

这种情况我之前调试代码时也碰到过！别着急，咱们从几个常见的方向排查：

可能的原因 #

• 属性被意外覆盖/删除：大概率是你在定义resources之后的代码里，不小心把popularity对象整个替换了，或者直接删除了upgProd属性。比如写了类似resources.popularity = {amount: 5}的代码，新对象里没有upgProd，自然就返回undefined；或者用delete resources.popularity.upgProd把属性删掉了。
• 时序/异步问题：如果resources是通过异步操作（比如接口请求、定时器）初始化的，你可能在对象还没完全创建好的时候就去访问upgProd了。比如你的console.log写在了初始化代码之前，或者初始化代码在异步回调里，回调还没执行就先调用了log。
• 大小写/拼写错误：JavaScript是大小写敏感的！你确认访问的时候写的是upgProd吗？有没有写成UpgProd、upg_prod这类拼写错误？

快速排查步骤 #

1. 在定义后立刻验证：在你定义resources的代码后面直接加一行console.log(resources.popularity.upgProd)，如果这里能输出0，说明是后续代码修改了这个属性；如果这里就输出undefined，那你定义对象的时候可能有隐藏的语法问题（比如复制粘贴时的隐形字符）。
2. 打印整个对象：执行console.log(resources.popularity)，看看控制台里的对象结构，确认upgProd是否真的对「费BL ；对应 Unique答应？其中 Celeste 的回答是：有时候对象嵌套深，肉眼看代码没问题，但实际结构可能被改了。
3. 搜索所有修改点：在代码里搜索resources.popularity，看看有没有地方直接替换了这个对象，而不是修改单个属性。

修复示例 #

如果是因为替换对象导致的属性丢失，改成只修改需要的属性：

// 错误写法：直接替换对象，丢失upgProd
resources.popularity = {amount: 10};

// 正确写法1：单独修改amount属性
resources.popularity.amount = 10;

// 正确写法2：用扩展运算符保留原有属性
resources.popularity = {...resources.popularity, amount: 10};

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