ECMAScript 2021 中的优化 nullish coalescing 运算符

引言

在前端开发中，我们经常需要处理一些数据，而有些数据可能在从后端获取时会返回 null 或 undefined，这会导致编写代码时非常繁琐。为了解决这个问题，JavaScript 引入了 nullish coalescing 运算符，它可以帮助我们更方便地处理 null 和 undefined 的情况。在 ECMAScript 2021 中，这个运算符有了一些优化，本文将对其进行详细讲解。

nullish coalescing 运算符

在介绍 ECMAScript 2021 中的优化之前，我们先来回顾一下 nullish coalescing 运算符的基本用法。它的语法如下：

// 如果变量 a 的值为 null 或 undefined，则返回变量 b 的值，否则返回变量 a 的值
a ?? b

简单来说，就是先判断变量 a 的值是否为 null 或 undefined，如果是，则返回变量 b 的值，否则返回变量 a 的值。

下面是一个使用 nullish coalescing 运算符的简单示例：

const a = null;
const b = 'hello';

console.log(a ?? b); // 输出 'hello'

在上面的代码中，变量 a 的值为 null，所以使用 nullish coalescing 运算符返回了变量 b 的值。

ECMAScript 2021 中的优化

在 ECMAScript 2021 中，对 nullish coalescing 运算符进行了优化，使其使用起来更加方便和灵活。

空值合并运算符也可以用来设置默认值

在 ECMAScript 2021 之前，我们通常使用如下代码来设置默认值：

const a = b || 'default';

这种写法虽然简单，但是有一些潜在的问题。当 b 的值为假值时（比如 false、''、0），上面的代码会返回 'default'，这可能不是我们期望的结果。

为了解决这个问题，我们可以使用 nullish coalescing 运算符来设置默认值：

const a = b ?? 'default';

这样就可以确保只有在 b 的值为 null 或 undefined 时才会使用默认值。

支持链式操作

在 ECMAScript2021 中，nullish coalescing 运算符也可以支持链式操作了。在多个变量都可能为 null 或 undefined 的情况下，我们可以使用如下代码来获取第一个非空的值：

const a = null;
const b = undefined;
const c = 'hello';
const d = 'world';

const result = a ?? b ?? c ?? d;
console.log(result); // 输出 'hello'

在上面的代码中，变量 a 和 b 的值都是 null 或 undefined，所以 nullish coalescing 运算符返回了变量 c 的值。

这个功能的实现依赖于 nullish coalescing 运算符的短路特性，即只有当变量左边的值为 null 或 undefined 时才会计算右边的值。

总结

在 ECMAScript 2021 中，对 nullish coalescing 运算符进行了优化，使其使用起来更加方便和灵活。我们可以使用它来设置默认值或获取链式操作中的第一个非空值。这些优化对于前端开发者来说非常有意义，可以帮助我们更加高效地编写代码。

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