在 JavaScript 开发中，错误处理一直是一个重要的问题，众所周知，在 JavaScript 中未定义的值 (undefined 和 null) 很容易导致某些未处理的异常，省略或忘记对变量进行 null 检查，容易让代码出现奇怪的 bug。为了解决这个问题，ES9 引入了两个新的操作符，Optional Chaining 和 Nullish Coalescing 操作符，使我们能更加优雅地处理这些错误。
Optional Chaining 操作符
Optional Chaining 操作符的作用是在访问一个对象的属性时，防止因为对象不存在导致代码抛出异常。我们通常会这样写：
let name = person && person.name;
上面的代码要检查 person 对象是否存在，如果存在就获取 name 属性的值。这时候，我们可以使用 Optional Chaining 操作符 (?.)，代码可以写成：
let name = person?.name;
这个操作符在属性不存在时，返回 undefined，继续调用可以继续返回 undefined，直到找到属性或者到达尽头。下面是一个完整的例子：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- ---------
-
--
-------------------------- -- -----
----------------------------- -- - ----- --------- -
----------------------------------- -- ---------
-------------------------------- -- ---------我们可以看到，当 person 对象不存在时，person?.name 返回 undefined。当 address 对象不存在时，person?.address 返回 undefined。当 address.city 属性不存在时，person?.address?.city 也会返回 undefined。当 job.title 属性不存在时，person?.job?.title 也会返回 undefined。
注意，Optional Chaining 操作符只能用于访问属性和方法，不能用于访问变量或常量。
let name = 'Tom'; console.log(name?.toUpperCase()); // TypeError: name.toUpperCase is not a function
Nullish Coalescing 操作符
Nullish Coalescing 操作符的作用是在获取一个值时，如果该值未定义或者为 null，返回一个默认值。通常我们会这样写：
let name = person && person.name || 'Tom';
这时，如果 person.name 不存在，就会返回默认值 'Tom'。但是，如果 person.name 存在，但是其值为 false, '', 0 等假值，这种写法就会出错。这时，我们可以使用 Nullish Coalescing 操作符 (??)，代码可以写成：
let name = person?.name ?? 'Tom';
这个操作符在值为 null 或者 undefined 时，返回默认值，否则返回该值。下面是一个完整的例子：
-- -------------------- ---- -------
----- ------ - -
----- ---
-------- -
----- ---------
-
--
------------------------ -- ------- -- --
-------------------------------- -- ---- ------------ -- ---------
----------------------------- -- ------------ -- ----------我们可以看到，当 person.name 属性值为 '' （假值）时，person?.name ?? 'Tom' 返回 ''。当 address.city 属性不存在时，person.address?.city ?? 'San Francisco' 返回 'San Francisco'。当 job.title 属性不存在时，person?.job?.title ?? 'Engineer' 返回 'Engineer'。
总结
ES9 中的 Optional Chaining 和 Nullish Coalescing 操作符，让我们能更加优雅、简洁地处理 JavaScript 开发中经常遇到的问题，避免了代码中的不必要的判断和繁琐的 null 检查。如果你是一名前端开发者，了解这两个操作符原理和用法，可以让你的代码更加健壮、清晰和易于维护，掌握这个新特性也将成为你更加优秀的前端开发者的一个标志。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522000295b1f8cacd95cef0