JavaScript 是一门十分灵活的语言，但在处理对象属性的时候可能会遇到一些问题。经常会发生的情况是：我们希望访问一个对象的属性，但是这个对象可能不存在或者这个属性可能不存在。在这种情况下，我们通常需要写一些冗长的代码，用来检查对象和属性是否存在，才能安全地访问它们。ES2020 引入了可选链操作符（optional chaining operator）来解决这个问题。
可选链操作符的使用
可选链操作符的基本语法是：?.。它可以用于访问对象属性、函数，以及数组元素。如果对象不存在或者属性不存在，操作符就会返回 undefined 而不是抛出错误。
下面是一个使用可选链操作符的例子：
-- -------------------- ---- -------
----- ---- - -
----- --------
---------- -
----- -----------
-------- -------
-
-
----- ------- - ------------------------在上面的代码中，我们使用了可选链操作符来访问 game.developer.country 这个属性。如果 game.developer 不存在，那么变量 country 的值就会是 undefined。使用可选链操作符的代码比使用传统的检查方式更加简洁和易读。下面是一个使用传统方式的代码：
const country = game.developer && game.developer.country;
在这个例子中，我们使用了传统的逻辑运算符 &&，来检查 game.developer 是否存在。但是这段代码比使用可选链操作符要繁琐得多。
除了访问对象属性，我们还可以使用可选链操作符来调用函数。下面是一个使用可选链操作符调用函数的例子：
const foo = {
bar() {
console.log('Hello World!');
}
}
foo.bar?.();在这个例子中，我们使用了可选链操作符来调用 foo.bar() 这个函数。如果 foo 对象不存在，或者 bar() 这个函数不存在，那么代码就不会报错。如果我们不使用可选链操作符，那么代码就要变得非常繁琐，需要使用条件检查来避免错误。下面是一个不使用可选链操作符的例子：
if (foo && foo.bar) {
foo.bar();
}这个例子使用了条件检查来确保 foo 存在并且 foo.bar() 存在。
可选链操作符的嵌套使用
在实际的开发中，我们经常需要访问多层嵌套的对象，或者调用多层嵌套的函数。在这种情况下，可选链操作符可以非常方便地解决问题。下面是一个使用可选链操作符多级嵌套的例子：
-- -------------------- ---- -------
----- ---- - -
----- --------
---------- -
----- -----------
-------- --------
------- -
----- --------
-------- ----------
-
-
-
----- ------- - --------------------------------在这个例子中，我们使用了两个可选链操作符来访问 game.developer.engine.version 这个属性。如果 game 对象、developer 对象、engine 对象、或者 version 属性不存在，那么代码就不会报错。
可选链操作符和 nullish 合并操作符的结合使用
上面介绍了可选连操作符的基本用法，但是在实际的开发中，我们还需要处理一些特殊的情况，比如当属性的值为 null 或 undefined 时，我们需要特别处理。为了解决这个问题，ES2020 还引入了一个新的操作符，叫做 nullish 合并操作符（nullish coalescing operator）。
nullish 合并操作符的语法是 ??。它用来检查左侧的表达式是否为 null 或 undefined，如果是，那么返回右侧的值。下面是一个使用 nullish 合并操作符的例子：
const name = undefined ?? 'Anonymous';
在这个例子中，我们使用了 nullish 合并操作符来判断变量 name 的值是否为 null 或 undefined。如果是，那么变量的值就会是 'Anonymous'。如果没有使用 nullish 合并操作符，那么代码就要变得非常繁琐，需要使用条件判断来判断变量是否为 null 或 undefined。下面是一个不使用 nullish 合并操作符的例子：
let name;
if (name === null || name === undefined) {
name = 'Anonymous';
}nullish 合并操作符和可选链操作符可以很好地配合使用，来处理特殊情况。下面是一个使用两个操作符结合的例子：
const game = {
name: 'Zelda',
price: 59.99,
discount: null
}
const finalPrice = game.discount ?? game.price;在这个例子中，我们使用了 nullish 合并操作符来检查 game.discount 是否为 null，如果是，那么就使用 game.price。接着，我们使用可选链操作符来访问 game.price，以避免属性不存在的错误。
总结
可选链操作符是一项非常实用的新特性，它可以让我们写出更加简洁、易读的代码，避免访问不存在的属性或调用不存在的方法时出现错误。在实际开发中，我们经常需要访问多层嵌套的对象，使用可选链操作符可以非常方便地解决这个问题。如果属性的值为 null 或 undefined，我们可以使用 nullish 合并操作符来检查它们，以判断变量的值是否需要特殊处理。使用可选链操作符和 nullish 合并操作符可以让我们更加方便地处理复杂的代码逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f4e293f6b2d6eab3db3b53