前言
作为前端开发者，我们经常会处理数据和对象的问题。然而，当要使用的对象不存在或者通过深层级访问对象时，我们往往需要进行一些额外的操作，比如手动检查每个可能为 null 或者 undefined 的值。这里介绍的可选链操作符和 Nullish Coalescing 操作符是 ES2020 新引入的两个非常方便的工具，它们可以简化你在这些问题上的工作量，让你能够更快地编写出安全可靠的代码。
可选链 (Optional chaining)
可选链操作符 ?. 可以在访问对象中的深层级属性时，暂时不用担心某一层级的值不存在而导致程序挂掉。这样的链式调用非常方便，代码更加简洁，可读性也更高。
-- -------------------- ---- -------
----- ------ - -
----- -----
-------- -
------ --------------
------ ----------------------
-
--
---------------------------------- -- -------------
------------------------------------ -- ---------
-- -----------
----------------------------------- -- -------------
------------------------------------- -- ---------如上所示，当 contact 对象不存在时，第一个 console.log() 的调用将会导致一个 TypeError 错误，而第二个则会按照我们的预期输出 undefined。使用可选链操作符，你就可以避免这个问题。
另一个使用场景是，在调用对象函数时，如果该函数不存在，可选链操作符可以很方便地返回 undefined。
-- -------------------- ---- -------
----- ---------- - -
---------------- -
-- ---- --- -------- -
------ - ------------ --- --------- --- --
-
-- ---- --- ----------- -
------ - ------------ --- --------- --- --
-
------ ----------
-
--
-- -- --------- --
--------------------------------------------------- -- ---------
---------------------------------------------------------- -- --
------------------------------------------------------------- -- --可以看到，在第一个 console.log() 调用中，weatherAPI.getForecast() 返回一个 undefined 值，可选链操作符会直接将其传递给后面的 .temperature 属性，并在该属性不存在时返回 undefined。
Nullish 合并 (Nullish coalescing)
当使用了可选链操作符之后，经常需要检查返回值是否为 undefined，并做出相应的处理。为了进一步简化这个过程，ES2020 新增了 Nullish Coalescing 操作符 ??。
这个操作符在一个变量或表达式为 null 或 undefined 时，会将其转化为某个默认的值。
const options = { color: 'blue' };
console.log(options.size ?? 'default size'); // "default size"
console.log(options.color ?? 'default color'); // "blue"
console.log(options.weight ?? 'default weight'); // "default weight"
console.log(options.price ?? 0); // 0可以看到，在上面的示例中，options.size 和 options.weight 都没有设置，使用了 Nullish Coalescing 操作符后，它们都返回了指定的默认值，而不是 undefined。对于 options.color 和 options.price 这两个存在的属性，则保持不变。
另一个使用场景是，在验证函数的参数时。
function printUserId(userId) {
const id = userId ?? 'default user';
console.log(`The user ID is ${id}`);
}
printUserId(null); // "The user ID is default user"
printUserId(undefined); // "The user ID is default user"
printUserId(123); // "The user ID is 123"在此示例中，函数 printUserId() 接受一个 userId 参数，并使用 Nullish Coalescing 操作符将其转化为默认值，以便在没有提供 userId 或者其值为 null 时，输出默认的用户名。使用 Nullish Coalescing 操作符，提高了函数的容错性和可读性。
总结
本文介绍了 ES2020 中的可选链和 Nullish Coalescing 操作符，并给出了具体的示例代码。这两个操作符能够方便地访问深层级对象或函数属性，并简化空值的验证过程，增加了代码的容错性和可读性。开发者可以根据自己的需求选择适合的操作符使用，加强代码的安全性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec55adf6b2d6eab369a3d6