ES12 中如何使用 optional chaining 和 nullish coalescing 操作符简化代码
随着前端技术的不断发展，JavaScript 也在不断更新和优化，ES12（也被称为 ES2021）成为了新一代 JavaScript 版本的标准。本文将介绍 ES12 中的两个新操作符 -- optional chaining 和 nullish coalescing，以及如何使用它们简化代码。
什么是 optional chaining 操作符？
在编写 JavaScript 代码时，我们经常会涉及到访问对象属性的操作。如果对象在某个层次上不存在，使用传统的点号“.”访问属性的代码将会抛出错误：
-- -------------------- ---- -------
----- --- - -
---- -
---- -
---- -
-
-
--
----------------------------- -- -- ---------- ------ ---- -------- ----- -- ---------在这个例子中，我们试图访问 obj.foo.qux.baz，但是由于 qux 根本不存在，代码会抛出一个 TypeError。
这个问题可以通过使用 optional chaining 操作符来解决。optional chaining 操作符是一个问号 ?，用来代替点号 .，表示如果前面的属性不存在，则不会抛出错误，而是返回 undefined：
-- -------------------- ---- -------
----- --- - -
---- -
---- -
---- -
-
-
--
------------------------------- -- -- ---------这个例子中，我们使用 optional chaining 操作符替换了 .，代码不会抛出错误，而是返回了 undefined。
optional chaining 操作符也可以用于数组访问：
const arr = [1, 2, 3]; console.log(arr?.[3]); // 输出 undefined
在这个例子中，我们试图访问数组中的第 4 个元素，但是由于数组的长度只有 3，代码返回了 undefined。
什么是 nullish coalescing 操作符？
nullish coalescing 操作符是另一个新操作符，它用来简化判断变量是否为 undefined 或 null 的代码。在传统的 JavaScript 中，通常会使用逻辑或 || 运算来判断一个变量是否存在或者为一个 falsy 值(undefined、null、0、""、NaN 等)，如下所示：
const foo = undefined; console.log(foo || 'default value'); // 输出 "default value"
在这个例子中，变量 foo 是 undefined，所以会返回 'default value'。但是，如果 foo 是一个空字符串 ""、0、null 等 falsy 值时，我们也会返回 'default value'，这不是我们想要的结果。
nullish coalescing 操作符（??）用来解决这个问题。如果被判断的变量为 undefined 或 null，就返回其后面的默认值：
const foo = undefined; console.log(foo ?? 'default value'); // 输出 "default value"
在这个例子中，我们使用了 nullish coalescing 操作符，返回了 'default value'，而不是逻辑或操作符返回的结果。
如何使用 optional chaining 和 nullish coalescing 操作符？
在开发过程中，我们经常会需要检测一个变量是否为 undefined 或 null，然后才能访问变量的属性或方法。使用 optional chaining 和 nullish coalescing 操作符，代码可以变得更加简洁：
-- -------------------- ---- -------
----- --- - -
---- -
---- -
---- -
-
-
--
------------------------------ -- -------- -------- -- -- -
----- --- - --- -- ---
-------------------- -- -------- -------- -- -- -------- ------在这个例子中，我们使用 optional chaining 和 nullish coalescing 操作符来访问对象和数组，并且在变量不存在或为空时返回了默认值。
总结
ES12 中的 optional chaining 和 nullish coalescing 操作符可以帮助我们简化代码，避免了大量的 if-else 判断和异常处理代码。然而，我们仍然需要谨慎使用它们，并注意其在不同情况下的语义。在实际开发中，我们应该结合实际场景，灵活地选择使用 optional chaining 和 nullish coalescing 操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f15d22f6b2d6eab3b3511d