JS optional chaining正确用法：访问嵌套对象是否需要每层都加?.

如果你要完全等价于之前的if (foo && foo.other && foo.other.name)多层判断逻辑，每层都加?.的写法才是正确的，省略最后一层?.的写法存在报错风险。

核心规则 #

可选链的核心逻辑是短路返回：只要?.左侧的取值为undefined或null，整个链式表达式会直接终止并返回undefined，不会继续读取后续属性。

两种写法的差异对比 #

我们分两种常见场景验证效果，判断目标为foo.other.name是否存在：

场景1：foo本身为undefined或null #

• 写法1 foo?.other?.name：执行到foo?.时触发短路，直接返回undefined，无报错
• 写法2 foo?.other.name：执行到foo?.时触发短路，直接返回undefined，无报错
  该场景下两种写法效果一致。

场景2：foo存在，但foo.other为undefined或null（比如foo的值为{}） #

• 写法1 foo?.other?.name：foo存在，继续读取foo.other得到undefined，执行到other?.时触发短路，返回undefined，无报错
• 写法2 foo?.other.name：foo存在，读取foo.other得到undefined后，会直接尝试对undefined读取.name属性，抛出Cannot read properties of undefined (reading 'name')错误，和原始多层判断逻辑不一致。

最终建议 #

只有你100%确定?.前的取值存在时，才可以省略后续的?.；如果要完全替代多层&&判断、规避所有属性不存在的报错，需要在每一层可能为undefined/null的属性前都加上?.。

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