随着现代 Web 应用的不断发展，前端开发工作越来越需要处理复杂的数据结构，同时在使用中也会遇到数据缺失或错误的情况。为了更好地处理这些情况，ECMAScript 2021 引入了可选链和 null 策略运算符，大大简化了我们的代码。
可选链
可选链是一种用于安全和优雅地处理可能不存在的值或属性的新特性。以前，在访问深度嵌套的对象或数组时，我们必须多次进行 null 或 undefined 的检查，否则就会引起代码执行错误。如：
-- -------------------- ---- -------
----- --- - -
----- -
----- -
----- --------
---- --
-
-
--
-- --------- -- ------------- -- ------------------- -
-------------------------------- -- -------
-可选链操作符 ?. 的出现使得我们可以更加简洁地访问对象的属性。在上述例子中，我们可以使用可选链操作符改写：
console.log(obj?.data?.user?.name); // "Alice"
当对象属性存在时，可选链操作符 ?. 将以正常方式访问该属性。但是，当属性不存在时，它将不再尝试访问该属性，而是返回 undefined。可选链操作符还可以和函数调用和数组访问一起使用。
-- -------------------- ---- -------
----- --- - -
----- -
----- -
-------- -------- -- -
------ --------
-
-
-
--
------------------------------------------ -- -------注意，可选链操作符只会防止访问不存在的属性或方法，但是它不会防止在访问属性值时出现错误，例如 null 的属性。此时，可以使用 null 策略运算符。
null 策略运算符
当我们要访问对象的某个属性或调用某个方法时，这个对象可能为空或不存在，此时使用运算符 ?? 可以避免代码出错导致程序终止。
const obj = null; console.log(obj?.data?.user?.name ?? "default"); // "default"
null 策略运算符 ?? 表示如果前面的表达式结果为 null 或 undefined，则返回后面的默认值。在上述例子中，当对象 obj 为空或不存在时，表达式将返回默认值 "default"。
null 策略运算符还可以与可选链操作符 ?. 一起使用，简化代码，增加可读性。
const obj = null; console.log(obj?.data?.user?.name ?? "default"); // "default" console.log(obj?.data?.user?.age ?? 18); // 18
多种展示方式
除了上述示例中的展示方式，可选链和 null 策略运算符还可以有多种展示方式，以下是一些示例：
1. 在 React 中使用
React 组件中可能会接收到 undefined、null 或者还未赋值的 props，如果在访问这些 props 时不加以处理，往往会导致程序出错或渲染错误。使用可选链和 null 策略运算符可以有效地避免这些问题。
function Example({ user }) {
return (
<div>
{user?.name ?? "default"}
</div>
)
}2. 更清晰的代码
在一些需要访问深度嵌套对象或数组的代码中，使用可选链和 null 策略运算符可以让代码更加简洁清晰。
-- -------------------- ---- -------
----- ---- - -
------ --
----- --------
----- --
----- --------
----- -----
--
--
-
--------------------------------------------- -- ----------- -- -------3. 在 Electron 中使用
Electron 中的某些 API 可能返回一个 undefined 的变量，使用可选链和 null 策略运算符可以让代码更具可读性。
const win = new BrowserWindow();
const bounds = win?.getBounds?.();
if (bounds) {
console.log(bounds);
}总结
可选链和 null 策略运算符是 ECMAScript 2021 中非常实用、方便的新特性，避免了我们在代码中频繁使用 null 和 undefined 的判断，使代码更加简洁、清晰、易读。尤其对于处理复杂数据结构的 Web 应用和 Electron 中的使用，具有极大的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ac1179add4f0e0ff5b1b83