ECMAScript 2021 (ES12) 中的 nullish coalescing 运算符详解及实践-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2021 中，nullish coalescing 运算符是一个新的运算符，它可以用来简化我们在代码中进行取值操作的过程，尤其是在处理 null 和 undefined 值时。本文将详细介绍这个运算符的使用方法，以及在实际开发中的应用和示例。

nullish coalescing 运算符简介

nullish coalescing 运算符是一个双问号（??）符号，它可以用来取代传统的或运算符（||）来处理 null 或 undefined 值。具体来说，当左边的操作数为 null 或 undefined 时，nullish coalescing 运算符会返回其右侧的默认值。否则，它会返回其左侧的操作数。

示例代码如下：

// 传统的或运算符
let a = null || 'default';
console.log(a); // 输出: 'default'

// nullish coalescing 运算符
let b = null ?? 'default';
console.log(b); // 输出: 'default'

在上面的代码中，我们定义了两个变量 a 和 b 来分别使用传统的或运算符和 nullish coalescing 运算符。首先，我们使用 null 进行判断。传统运算符返回了右侧的默认值，而 nullish coalescing 运算符返回了我们设定的 'default' 值。这说明 nullish coalescing 运算符在处理 null 或 undefined 值时更加可靠。

nullish coalescing 和短路运算符的区别

可能有些读者会对 nullish coalescing 运算符和短路运算符之间的区别感到困惑。事实上，这两个运算符是有区别的。

在进行一个常规的或运算时，如果其左侧的操作数为真值，则不会执行右侧的操作数。这种行为称为“短路”。如果左侧的操作数为 false、0、空字符串（''）、null、undefined 或者 NaN，则会执行右侧的操作数。

参考下面的示例代码：

// javascriptcn.com 代码示例
const foo = false || 'hello';
console.log(foo); // 输出: 'hello'

const bar = '' || 'hello';
console.log(bar); // 输出: 'hello'

const baz = null || 'hello';
console.log(baz); // 输出: 'hello'

const qux = undefined || 'hello';
console.log(qux); // 输出: 'hello'

可以看到，在上述示例代码中，左侧的操作数都是假值，因此短路运算符都执行了右侧的操作数。

与此相比，nullish coalescing 运算符只有在左侧的操作数为 null 或 undefined 时才会执行右侧的操作数。如果左侧的操作数为其它假值，它将继续执行左侧的操作数。

参考下面的示例代码：

// javascriptcn.com 代码示例
const foo = false ?? 'hello';
console.log(foo); // 输出: false

const bar = '' ?? 'hello';
console.log(bar); // 输出: ''

const baz = null ?? 'hello';
console.log(baz); // 输出: 'hello'

const qux = undefined ?? 'hello';
console.log(qux); // 输出: 'hello'

在上述示例代码中，左侧的操作数 false 和空字符串 '' 都是假值，但它们并不会导致 nullish coalescing 运算符返回其右侧的默认值。

nullish coalescing 运算符的实践

nullish coalescing 运算符可以在很多场景中使用。在下面的示例中，我们将在实践中看到如何使用它。

使用 nullish coalescing 运算符设置默认值

在获取请求参数的值时，通常需要设置默认值。在传统方法中，需要使用条件语句；而使用 nullish coalescing 运算符只需要一行代码来处理。

const foo = req.params.foo || 'default';
const bar = req.params.bar ?? 'default';

上述代码中，使用 req.params.foo 来获取 foo 参数值，如果它为假值或 undefined，则使用默认值 'default'；使用 req.params.bar 来获取 bar 参数值，如果它为 null 或 undefined，则使用默认值 'default'。

使用 nullish coalescing 运算符避免抛出异常

在操作对象属性时，如果属性不存在，通常会抛出异常。这时，我们可以使用 nullish coalescing 运算符直接返回一个默认值以避免异常的抛出。

const obj = null;
const foo = obj?.foo ?? 'default';

上述代码中，我们定义了一个 null 变量，并尝试访问它的 foo 属性。由于对象为 null，无法访问该属性，因此在此处使用了可选链运算符（?.）来避免异常的抛出，并使用 nullish coalescing 运算符返回默认值 'default'。

使用 nullish coalescing 运算符进行合并操作

另一个使用 nullish coalescing 运算符的场景是对两个对象进行合并操作。

const obj1 = { foo: 'foo', bar: 'bar' };
const obj2 = { foo: 'new foo', baz: 'baz' };
const obj3 = { ...obj1, ...obj2 };
const obj4 = { ...obj1, ...obj2, foo: obj1.foo ?? obj2.foo };

上述代码中，我们定义了两个对象 obj1 和 obj2，并通过 spread 运算符（...）将它们的属性合并到 obj3 和 obj4 中。其中，在 obj4 中，我们使用了 nullish coalescing 运算符来处理 foo 属性，以保证它的值为 obj1.foo 或 obj2.foo 中的非空值。

总结

本文介绍了 ECMAScript 2021（ES12）中的 nullish coalescing 运算符，它可以用来简化在处理 null 或 undefined 值时的取值操作，根据实际需求返回相关的默认值。本文还介绍了 nullish coalescing 运算符和短路运算符之间的区别，以及在实践中如何使用该运算符来设置默认值、避免抛出异常和进行对象属性合并操作等。

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

ECMAScript 2021 (ES12) 中的 nullish coalescing 运算符详解及实践