前言
随着 JavaScript 的不断发展，新的语法和特性不断涌现，为前端开发提供了更加优秀、高效的工具。在最新的 ECMAScript 7（ES7）标准中，新增加了两个非常有用的逻辑操作符：Nullish Coalescing 和 Optional Chaining。本文将详细介绍这两个操作符的用法和指导意义。
Nullish Coalescing
在 ES7 中，Nullish Coalescing （空位合并运算符）是一种新的逻辑操作符，用于判断一个值是否为 undefined 或 null，如果是，则返回一个默认值，否则返回该值本身。
在使用 Nullish Coalescing 运算符时，我们需要用 "?? " 连接一个 potentially nullish (值可能为空) 的变量和一个默认值。语法如下：
let result = a ?? b;
运算符的含义是，如果 a 的值不为 null 或 undefined，则取 a 的值，否则取 b 的值。简单来说，就是如果 a 存在，就使用 a，如果不存在，就使用 b。在这里，"空位 (nullish)" 指的是值为 null 或 undefined。
下面是关于 Nullish Coalescing 操作符的几个例子：
-- -------------------- ---- ------- ----- - - ---------- ----- - - ----- ----- - - -- ----- - - --- ----- - - ------ ------------- -- ----------- -- ---------- ------------- -- ----------- -- ---------- ------------- -- ----------- -- ---- ------------- -- ----------- -- ----- ------------- -- ----------- -- --------
可以看到，当 x 和 y 的值为 undefined 或 null 时，输出的结果都是默认值 default。其他情况下，只要值不为 undefined 或 null，就会输出原始值。
Optional Chaining
Optional Chaining （可选链操作符）是 ES7 中的另一个新的逻辑操作符，它可以避免在访问一个对象的属性或方法时出现 TypeError 错误。
通常，我们在使用某个对象的属性或方法时，都会先判断该对象是否存在，然后再尝试操作它的属性或方法。例如，访问一个对象的属性的代码可能会这样写：
if (obj && obj.prop) {
// do something with obj.prop
}这样的代码存在一个问题：如果 obj 对象不存在，那么在尝试访问其属性时，会抛出 TypeError 错误。在使用 Optional Chaining 操作符之前，需要将上面的代码重写为：
if (obj && obj.prop && obj.prop.someMethod) {
// do something with obj.prop.someMethod
}使用 Optional Chaining 操作符之后，代码就可以简化为：
if (obj?.prop?.someMethod) {
// do something with obj.prop.someMethod
}其中，"?" 表示可选链操作符，它判断 obj 是否存在，如果不存在，则返回 undefined，而不会抛出 TypeError 错误。如果 obj 存在，则继续尝试访问其属性或方法。需要注意的是，Optional Chaining 操作符只有在访问属性或方法时才能使用，不能用于运算符等其他场景。
下面是关于 Optional Chaining 操作符的几个例子：
-- -------------------- ---- -------
----- --- - -
----- -
----------- ---------- -
------ ------ -------
-
-
--
--------------------------------------- -- --------- ------
----- ---- - ----------
---------------------------------------- -- ------------总结
随着 JavaScript 的发展，新的语法和特性为我们带来了更加强大、丰富的工具，使我们的代码更加优雅、简洁，同时也提高了开发效率。在 ES7 中，Nullish Coalescing 和 Optional Chaining 逻辑操作符是非常有用的新特性，它们可以帮助我们简化代码，防止出现 TypeError 错误。相信通过本文的介绍，你已经对这两个操作符有了更深入的了解，可以灵活运用它们来提高自己的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aebeffadd4f0e0ff838af9