增强逻辑运算符：ECMAScript 2019 中的 Nullish Coalescing 和 Optional Chaining 运算符

ECMAScript 2019 这个版本引入了两个非常实用的增强逻辑运算符：Nullish Coalescing 和 Optional Chaining 运算符。

这两个运算符可以帮助我们更加优雅地处理代码中的各种异常情况，减少不必要的报错和代码复杂度。

Nullish Coalescing 运算符

Nullish Coalescing 运算符（??）可以让我们更方便地设置默认值，解决了 OR 运算符的一些缺陷。

以前的代码可能长成这样：

function sayHello(name) {
  name = name || 'World';
  console.log(`Hello, ${name}!`);
}

sayHello(); // "Hello, World!"
sayHello('Tom'); // "Hello, Tom!"

这段代码中，我们使用了 OR 运算符来给 name 设置默认值，但这样会有一些问题。比如说，在 name 参数传入了一个 falsy 值（比如 0、空字符串、null 或 undefined）时，name 会被赋值成默认值，这可能不是我们想要的。

Nullish Coalescing 运算符提供了更加严格的默认值设置方式，只有在变量是 null 或 undefined 时才会使用默认值：

function sayHello(name) {
  name = name ?? 'World';
  console.log(`Hello, ${name}!`);
}

sayHello(); // "Hello, World!"
sayHello('Tom'); // "Hello, Tom!"
sayHello(0); // "Hello, 0!"

这样写可以安全地处理各种奇怪的情况，代码变得更加健壮。

Optional Chaining 运算符

Optional Chaining 运算符（?.）可以让我们更方便地访问嵌套对象的属性，解决了 && 运算符的一些限制。

以前的代码可能长成这样：

const user = { name: 'Tom', address: { city: 'Beijing' } };

if (user && user.address && user.address.city) {
  console.log(user.address.city);
}

这段代码用了好几个 if 判断来保证不会出现报错的情况。但是这种代码非常繁琐，不够简洁。

现在我们可以使用 Optional Chaining 运算符来改写：

const user = { name: 'Tom', address: { city: 'Beijing' } };

console.log(user?.address?.city);

这样代码就变得更加简洁明了了。

总结

ECMAScript 2019 中的 Nullish Coalescing 和 Optional Chaining 运算符为我们带来了很多便利，让我们能够更加优雅地处理代码中的异常情况。

在代码编写中，我们应该更倾向于使用这两个运算符，而不是使用传统的 && 和 || 运算符。

希望这篇文章能够帮助大家更好地理解这两个运算符的用法和意义，帮助大家提升前端开发的能力。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9f79bf6b2d6eab351d94c