在 JavaScript 开发中，处理 null 和 undefined 一直是十分常见的问题。在 ES11 中，新增了两个运算符：可选链 (Optional Chaining) 和 null 合并运算符 (Nullish Coalescing)。这两个运算符可以使我们更加方便地处理可能出现的 null 和 undefined 值，本文将深入分析它们的使用方法及优势。
可选链 (Optional Chaining)
当我们需要获取一个对象的属性时，如果该属性不存在，便会返回 undefined，这时我们需要判断该属性是否存在再进行操作，例如：
const car = {
brand: 'BMW',
model: 'X5'
}
const color = car.color ? car.color : 'unknown'但是无论如何，若我们要获取的属性结果是 null 或 undefined，都会抛出错误。这是因为 undefined 和 null 不具有对象的属性。这在复杂的对象中会变得特别麻烦，属性嵌套多层时需要一层一层地判断。
ES11 中的可选链运算符可以在对象属性值为 undefined 或 null 时不抛出错误，并直接返回 undefined。它的语法是?.，例如：
const color = car?.color ?? 'unknown'
上述代码中，当 car 对象的 color 属性不存在，可选链运算符返回 undefined，然后 null 合并运算符 ?? 返回 'unknown'。
此外，可选链运算符还可以进一步嵌套使用。如果我们的对象非常复杂，且不确定某个属性是否存在，可以这样运用可选链：
const driver = {
name: 'Megan',
license: {
type: '汽车驾照',
number: '12345678'
}
}
const licenseNumber = driver?.license?.number ?? 'no license'在这个例子中，如果我们只使用.来获取 driver.license.number，将会在 license 不存在时抛出错误。因此，我们使用了可选链 ?. 来避免该错误并返回 undefined，最后使用 null 合并运算符 ?? 返回 'no license'。
可选链还可以在函数调用时使用，例如：
const street = store.getAddress?.().street
在这个例子中，如果 getAddress 函数不存在，可选链会直接返回 undefined，street 也会被赋值为 undefined。
null 合并运算符 (Nullish Coalescing)
在 JavaScript 中，当我们想使用一个变量或对象的属性时，必须确保其已被正确地初始化。如果没有初始化，我们通常会使用短路运算符 || 表示一个默认值。例如：
const color = car.color || 'unknown'
在这个例子中，如果 car.color 为 falsy，即 undefined 或 null，那么 color 将会被赋值为 'unknown'。
然而，短路运算符存在缺陷。如果我们默认值为 falsy 值（例如''、0、false），便无法正确地得到默认值。这时候我们可以使用 null 合并运算符 ??，它可以在运算的值为 null 或 undefined 时返回默认值。例如：
let speed console.log(speed ?? 60) // 60
在这个例子中，由于 speed 未定义，null 合并运算符会返回 60。
另外需要注意，null 合并运算符不会对其他 falsy 值产生相同效果，例如：
console.log('' ?? 'default') // ''
console.log(0 ?? 60) // 0
console.log(false ?? true) // false总结
ES11 中新增的可选链和 null 合并运算符是十分实用的开发工具。它们可以极大地提高开发效率，简化代码，避免繁琐的判断过程。特别在处理复杂对象时，这两个运算符可以使代码更加简洁。但是需要注意，它们并不适用于所有情况，因此在使用时还需要进行实际适用性检查。
本文中介绍的是可选链和 null 合并运算符的语法、定义、使用方法等。对于新手来说，深入理解这两个运算符的优越性和适用场景，对于以后的编程会有很大的帮助。对于有经验的开发者，掌握这两个运算符，能够写出更加优秀简洁的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645df468968c7c53b004f9b2