ES7 中的逻辑操作符 Nullish Coalescing 和 Optional Chaining 详解

前言

随着 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 操作符的几个例子：

const x = undefined;
const y = null;
const z = 0;
const a = '';
const b = false;

console.log(x ?? 'default');     // 输出：default
console.log(y ?? 'default');     // 输出：default
console.log(z ?? 'default');     // 输出：0
console.log(a ?? 'default');     // 输出：''
console.log(b ?? 'default');     // 输出：false

可以看到，当 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 操作符的几个例子：

const obj = {
  prop: {
    someMethod: function() {
      return 'hello world';
    }
  }
};

console.log(obj?.prop?.someMethod?.());     // 输出：'hello world'

const obj2 = undefined;

console.log(obj2?.prop?.someMethod?.());   // 输出：undefined

总结

随着 JavaScript 的发展，新的语法和特性为我们带来了更加强大、丰富的工具，使我们的代码更加优雅、简洁，同时也提高了开发效率。在 ES7 中，Nullish Coalescing 和 Optional Chaining 逻辑操作符是非常有用的新特性，它们可以帮助我们简化代码，防止出现 TypeError 错误。相信通过本文的介绍，你已经对这两个操作符有了更深入的了解，可以灵活运用它们来提高自己的前端开发能力。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aebeffadd4f0e0ff838af9