如何使用 ES10 的 Nullish Coalescing 运算符优化 if/else 判断

在 JavaScript 中，if/else 是一种常用的语句来进行条件判断和赋值，但是它们总是有些啰嗦。ES10 提供了新的 Nullish Coalescing 运算符 ??，它可以使代码更简洁和易读。在本篇文章中，我们将探讨如何使用 Nullish Coalescing 运算符来优化 if/else 判断。

什么是 Nullish Coalescing 运算符

Nullish Coalescing 运算符（??）是一个逻辑运算符，它用于判断某个值是否为 null 或 undefined，如果是，则返回一个提供的默认值。如果不是，则返回该值本身。Nullish Coalescing 运算符与 || 运算符相似，但是有一个重要的区别：|| 运算符会将假值（false、0、''、null、undefined、NaN）转换为默认值，而 ?? 运算符只会在值为 null 或 undefined 时返回默认值。

以下是一个简单的示例：

const foo = null ?? 'default'; // 'default'
const bar = 0 ?? 'default'; // 0

const baz = undefined ?? 'default'; // 'default'

如何使用 Nullish Coalescing 运算符优化 if/else 判断

在之前的 JavaScript 版本中，我们需要使用 if/else 语句来判断值是否为 null 或 undefined 并且提供一个默认值。以下是一个示例：

const defaultValue = 'default';

function getValue(value) {
  if (value === null || value === undefined) {
    return defaultValue;
  } else {
    return value;
  }
}

const foo = getValue(null); // 'default'
const bar = getValue(0); // 0
const baz = getValue(undefined); // 'default'
const qux = getValue('value'); // 'value'

使用 Nullish Coalescing 运算符，以上代码可以简化为以下代码：

const defaultValue = 'default';

function getValue(value) {
  return value ?? defaultValue;
}

const foo = getValue(null); // 'default'
const bar = getValue(0); // 0
const baz = getValue(undefined); // 'default'
const qux = getValue('value'); // 'value'

使用 Nullish Coalescing 运算符进行多重判断

如果我们需要检查多个变量是否为 null 或 undefined 并提供默认值，我们可以使用 Nullish Coalescing 运算符来优化代码。以下是一个示例：

const foo = null;
const bar = undefined;
const baz = 0;

const qux = foo ?? bar ?? baz ?? 'default';
console.log(qux); // 0

以上代码中，我们使用了多个 Nullish Coalescing 运算符来检查变量是否为 null 或 undefined 并提供了一个默认值。最终变量 qux 的值为 0。

总结

Nullish Coalescing 运算符是一个很有用的语言功能，它可以显著简化代码，使之更易读、易维护。使用 Nullish Coalescing 运算符进行多重判断时，代码变得更加紧凑和高效。在实际开发中，我们可以尝试使用 Nullish Coalescing 运算符来优化复杂的 if/else 逻辑，提高代码质量和效率。

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