在 JavaScript 引入可选链(optional chaining)和空值合并运算符(nullish coalescing operator)之前,开发者需要使用多种方法来安全地访问对象的嵌套属性以及处理可能为 null 或 undefined 的值。这些方法虽然有效,但存在一些痛点。ES2020 引入的可选链和空值合并运算符则极大地简化了这些问题的处理。
var value = obj && obj.prop;但这种方法仅适用于一层属性检查,对于深层次的嵌套属性,代码会变得冗长且难以维护。
var value = obj && obj.prop || defaultValue;这种方式不仅会在 null 和 undefined 时返回 defaultValue,还会在 false, 0, '' (空字符串) 等其他假值情况下返回 defaultValue,这可能导致不期望的行为。
var value = obj && obj.level1 && obj.level1.level2 && obj.level1.level2.level3;尽管可以这样使用,但代码会变得冗长、难以阅读,并且容易出错。每次添加或修改属性层级时都需要调整代码。当对象嵌套层级较深或者属性可能不存在时,我们需要进行一系列的条件判断来避免程序报错。为了简化这些复杂的逻辑,JavaScript 引入了两个非常实用的操作符:可选链操作符(?.) 和 空值合并操作符(??)。今天介绍下这两个操作符的使用方法以及它们背后的原理。
const user = { address: { city: "Beijing" } };如果我们直接访问 user.address.city,这是安全的。但如果 user.address 不存在,则会抛出错误。这时我们可以使用可选链操作符来避免这种情况:
console.log(user.address?.city); // 输出 "Beijing" console.log(user.unknown?.city); // 输出 undefined工作原理
console.log(null?.prop); // 输出 undefined console.log(undefined?.prop); // 输出 undefined空值合并操作符(??)
var value = obj && obj.prop || defaultValue;但是要注意,这种方式不仅会在 null 和 undefined 时返回 defaultValue,也会在 false, 0, '' (空字符串) 等其他假值情况下返回 defaultValue,这可能不是你想要的行为。
let name = null; const defaultName = "Guest"; console.log(name ?? defaultName); // 输出 "Guest"工作原理
console.log(null ?? "default"); // 输出 "default" console.log(undefined ?? "default"); // 输出 "default" console.log("Hello" ?? "default"); // 输出 "Hello"结合使用
const user = { address: { city: null } }; const cityName = user.address?.city ?? "Unknown City"; console.log(cityName); // 输出 "Unknown City"在这个例子中,首先使用可选链操作符检查 user.address.city 是否存在,如果不存在则返回 undefined。然后,空值合并操作符确保最终结果是 "Unknown City" 而不是 undefined。