在 ES11 中使用 optional chaining 和 nullish 合并防止错误
随着前端技术的不断发展，我们在编写 JavaScript 代码时，经常会遇到一些坑点。例如，当我们访问某个对象属性时，如果该对象不存在，我们会遇到“Cannot read property xxx of undefined”这类错误。为了解决这类问题，ES11 推出了 optional chaining 和 nullish 合并操作符。本文将详细介绍它们的使用方法及相关示例。
optional chaining
在过去，为了避免出现上述错误，我们通常会使用条件语句或者 && 运算符来判断对象是否存在。然而，这些方法会让代码显得冗长且不优雅。ES11 中的 optional chaining 可以让我们在访问对象属性时，更加简洁和安全。
optional chaining 的语法格式如下：
object?.prop
其中，object 表示要访问的对象，而 prop 则是要访问的属性。如果该对象存在，则返回该属性的值；否则，返回 undefined。
下面是一个示例代码，展示了 optional chaining 的使用方法：
-- -------------------- ---- -------
----- --- - -
------ -
------ -
------ -------
-
-
--
-------------------------------------- -- ---------
-------------------------------------- -- -----------
-------------------------------------- -- -----------在上述代码中，我们尝试访问一个多层级对象的属性。通过使用 optional chaining，即使对象中存在 undefined 的属性，我们也可以避免引起错误。
nullish 合并
除了 optional chaining，ES11 还引入了 nullish 合并操作符。它可以用于在属性值为 null 或 undefined 时，提供默认值。
nullish 合并操作符的语法格式如下：
object.prop ?? defaultValue
其中，object 表示要访问的对象，prop 是要访问的属性名，defaultValue 则是要提供的默认值。
下面是一个示例代码，展示了 nullish 合并的使用方法：
-- -------------------- ---- ------- ----- --- - - ------ ----- ------ ---------- ------ ------- -- --------------------- -- ---------------- -- ------ --------------------- -- ---------------- -- ---------------- --------------------- -- ---------------- -- ----------------
在上述代码中，我们尝试访问一个包含 null 和 undefined 属性的对象。通过使用 nullish 合并操作符，我们可以提供一个默认值，避免引起错误。
综合应用
当我们在编写前端代码时，经常会遇到需要访问多层级的对象属性的情况。此时，可以使用 optional chaining 和 nullish 合并这两个操作符的组合，更加简洁和优雅地访问属性，并提供默认值。
下面是一个示例代码，展示了如何使用这两个操作符的组合：
-- -------------------- ---- -------
----- --- - -
------ -
------ ----
-
--
----------------------------- -- ---------------- -- ------
----------------------------- -- ---------------- -- ----------------
----------------------------- -- ---------------- -- ----------------在上述代码中，我们使用 optional chaining 和 nullish 合并组合操作符，访问一个多层级的对象属性。如果该属性不存在或者其值为 null 或 undefined，则返回提供的默认值。
结论
在本文中，我们介绍了 ES11 中的 optional chaining 和 nullish 合并操作符。它们可以帮助我们避免访问不存在的对象属性时出现错误，并提供默认值。通过深入了解和熟悉这两个操作符，可以让我们在编写前端代码时更加简洁和优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7b938c5c563ced5a73cdc