如何使用 ES9 Nullish Coalescing 运算符更好地处理 null 和 undefined-JavaScript中文网-JavaScript教程资源分享门户

在开发 Web 应用程序的过程中，null 和 undefined 是非常常见的情况。它们可能会导致程序出现错误或者异常行为。为了很好地处理这些情况，ES9 引入了 Nullish Coalescing 运算符，并提供了更好的处理 null 和 undefined 的方法。

Nullish Coalescing 运算符

Nullish Coalescing 运算符是 ES9 中新增的运算符，使用一组连续的问号（??）。它被用于处理 null 或 undefined 的情况下的默认情况。在使用 Nullish Coalescing 运算符时，只要左侧变量不是 null 或 undefined，就返回左侧变量的值，否则返回右侧变量的值。

以下是使用 Nullish Coalescing 运算符的示例：

const foo = null ?? 'default'; // 'default'
const bar = undefined ?? 'default'; // 'default'
const baz = 'value' ?? 'default'; // 'value'

使用 Nullish Coalescing 运算符的好处

更自然的语法

在以前的 JavaScript 版本中，通常会使用类似以下的语法来处理 null 或 undefined 的情况：

const foo = null || defaultValue;
const bar = undefined || defaultValue;
const baz = value || defaultValue;

这种方式的问题在于，它不能区分 falsy 值和 null 或 undefined。因此，它不适用于需要针对 null 或 undefined 的情况提供默认值的情况。而使用 Nullish Coalescing 运算符可以避免这个问题，让代码更自然。

更好的代码可读性

使用 Nullish Coalescing 运算符可以让代码更加清晰易懂。因为它是一种明确而直观的方式来表示默认值。

// 传统的方法
const foo = config && config.foo ? config.foo : 'default';

// Nullish Coalescing 运算符
const foo = config?.foo ?? 'default';

第二个示例中的代码更简洁，可以更容易地理解。

更好的性能

在许多情况下，Nullish Coalescing 运算符比传统的方法更快。因为它不需要计算真假值，而是直接判断变量是否为 null 或 undefined。

实际应用

以下是一些实际应用 Nullish Coalescing 运算符的示例。

处理函数参数

当在函数中使用 Nullish Coalescing 运算符时，可以很容易地处理给定参数是否为 null 或 undefined 的情况。

function example(input) {
  const value = input ?? 'default';
  // ...
}

这里，如果传递给 example 函数的参数 input 为 null 或 undefined，则会使用默认值 'default'。

处理对象属性

对象属性中出现 null 或 undefined 的情况是很常见的情况。可以使用 Nullish Coalescing 运算符来处理这种情况。

const foo = {
  bar: undefined,
  baz: 'value',
};

const bar = foo.bar ?? 'default'; // 'default'
const baz = foo.baz ?? 'default'; // 'value'

总结

Nullish Coalescing 运算符是一个非常有用的运算符，可以更好的处理 null 和 undefined 的情况。它是一种更自然和更直观的方式来表示默认值，并且可以使代码更加易读和易于维护。在实际开发中，可以根据不同的场景使用 Nullish Coalescing 运算符，并且它还可以带来更好的性能。

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