在调用 JavaScript 对象或数组属性或方法时，我们通常会遇到可能不存在的值的情况。这可能会导致 TypeError 错误，为了避免这种错误，我们需要对值进行检查。为此，ECMAScript 2020 引入了可选链操作符和空值合并操作符。本文将详细介绍这两个新操作符的用法和实际应用。
可选链操作符
可选链操作符 ?. 用于在调用对象上可能不存在的属性或方法时，避免出现 TypeError 错误。使用可选链操作符时，如果对象上的属性或方法存在，则调用成功并返回值；否则返回 undefined。
示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- ---
-------- -
----- ---- -----
-
--
------------------------ -- --
--------------------------------- -- ---- -----
-------------------------- -- ---------- ------ ---- -------- ------- -- ---------
------------------------- -- --
----------------------------------- -- ---- -----
--------------------------- -- ---------上述示例中，使用可选链操作符可以避免当 person 对象中不存在 phone 属性时，出现 TypeError 错误。
空值合并操作符
空值合并操作符 ?? 用于在变量值为 null 或 undefined 时，提供一个默认值。如果变量有值，则返回该值；否则返回指定的默认值。
示例代码：
-- -------------------- ---- ------- --- ---- --------------- -- --- -- - ----- ------ - - ----- ------ ---- --- ------ ---- -- ------------------------ -- ------- -- ----- -------------------------- -- ------- -- -----
上述示例中，使用空值合并操作符可以在值为 null 或 undefined 时，提供一个默认值。
可选链操作符和空值合并操作符的组合使用
可选链操作符和空值合并操作符可以组合使用，提供更为灵活的值检查。
示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
---- ---
-------- -
----- ---- -----
-
--
------------------------- -- ------- -- -----
------------------------------------ -- ------- -- -----上述示例中，使用可选链操作符和空值合并操作符可以在值为 null 或 undefined 时，提供一个默认值，并避免出现 TypeError 错误。
总结
可选链操作符和空值合并操作符可以提高代码的健壮性和可读性，避免常见的错误。它们的组合使用可以提供更为灵活的值检查。在实际应用中，我们可以多加利用这两个操作符，提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbbc5ef6b2d6eab31ed775