JavaScript能否内联检查null？可选链操作符解决属性读取报错

首先直接回答你的核心疑问：是的，使用可选链操作符（?.）完全可以避免抛出TypeError，并且结合空值合并操作符（??）就能让route在目标不存在时被设为null。下面详细拆解你的问题：

除了a === null，检查null的其他方式 #

在JavaScript里，除了严格相等判断a === null，还有几种实用的方式可以检查null：

• a == null：这个判断会同时匹配null和undefined（因为null == undefined为true）。如果你的场景中把undefined也视为"不存在"的情况，这个写法更简洁，但要注意它不会误判其他假值（比如0、''），这些值和null用==比较结果是false。
• Object.is(a, null)：这个方法和===的行为几乎一致，但它能正确区分+0和-0，并且Object.is(NaN, NaN)为true。检查null时，效果和a === null完全相同，算是一种更严谨的写法。

⚠️ 注意：不要用typeof a === 'object'来检查null——这是JavaScript的历史bug，typeof null会返回'object'，这个判断会把null和普通对象都匹配到，完全不可靠。

用可选链简化null检查，实现安全访问 #

你提到的let route = getAddressComponent(addressComponents, 'route')?.value.long_name;确实能避免报错，但有个小细节：当getAddressComponent返回null时，整个表达式会返回undefined，而不是null。如果需要让route严格为null，可以结合空值合并操作符（??）：

let route = getAddressComponent(addressComponents, 'route')?.value.long_name ?? null;

原理说明： #

1. 可选链?.：在链式访问中，只要某个环节的值是null或undefined，整个链式调用就会立即终止，返回undefined，不会继续访问后续属性，自然就不会抛出"无法读取未定义属性"的TypeError。比如当getAddressComponent返回null时，null?.value直接返回undefined，不会去访问long_name。
2. 空值合并??：它的作用是，当左边的值是null或undefined时，返回右边的值；否则返回左边的值。所以上面的代码中，如果可选链返回undefined（即目标不存在），就会用null来替代，正好符合你想要的结果。

对比传统写法 #

之前的条件判断写法可能是这样的：

let route = null;
const addressComponent = getAddressComponent(addressComponents, 'route');
if (addressComponent !== null) {
  route = addressComponent.value.long_name;
}

用可选链+空值合并后，一行代码就能完成相同的逻辑，代码更简洁易读。

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