ES11：Nullish Coalescing 运算符解决与 undefined 相关的错误

在 JavaScript 中，我们经常会遇到与 undefined 相关的问题。例如，当我们尝试访问一个不存在的属性或变量时，就会返回 undefined。这可能会导致一些错误，特别是在我们试图使用这些值进行计算或比较时。ES11 中引入了一个新的运算符，Nullish Coalescing 运算符，可以帮助我们解决这些问题。

Nullish Coalescing 运算符是什么？

Nullish Coalescing 运算符（??）是一个二元运算符，用于检查一个值是否为 null 或 undefined。如果该值为 null 或 undefined，则返回一个默认值。

const foo = null ?? 'default value'; // foo 的值为 'default value'
const bar = undefined ?? 'default value'; // bar 的值为 'default value'
const baz = 'hello' ?? 'default value'; // baz 的值为 'hello'

在上面的示例中，当 foo 和 bar 的值为 null 或 undefined 时，它们将返回默认值。而当 baz 的值为一个字符串时，它将返回该字符串的值。

Nullish Coalescing 运算符与 || 运算符的区别

在 JavaScript 中，我们通常使用 || 运算符来提供默认值。但是，|| 运算符的行为与 Nullish Coalescing 运算符有所不同。

const foo = '' || 'default value'; // foo 的值为 'default value'
const bar = 0 || 'default value'; // bar 的值为 'default value'
const baz = false || 'default value'; // baz 的值为 'default value'

在上面的示例中，当 foo、bar 和 baz 的值为假值时，它们将返回默认值。但是，空字符串、数字 0 和布尔值 false 都被认为是假值。

与之相反，Nullish Coalescing 运算符只会检查 null 和 undefined。因此，当我们想要提供默认值时，使用 Nullish Coalescing 运算符可能更加准确。

Nullish Coalescing 运算符的用途

Nullish Coalescing 运算符的主要用途是提供默认值，特别是在我们尝试访问不存在的属性或变量时。

const config = {
  timeout: 1000,
  maxRetries: 3,
};

const timeout = config.timeout ?? 5000; // timeout 的值为 1000
const maxRetries = config.maxRetries ?? 5; // maxRetries 的值为 3
const retryDelay = config.retryDelay ?? 500; // retryDelay 的值为 500

在上面的示例中，我们使用 Nullish Coalescing 运算符为 timeout、maxRetries 和 retryDelay 提供默认值。如果 config 对象中不存在这些属性，则它们将返回默认值。

总结

在 JavaScript 中，Nullish Coalescing 运算符是一个非常有用的工具，可以帮助我们避免与 undefined 相关的错误。它提供了一种简单的方法来检查一个值是否为 null 或 undefined，并在需要时提供默认值。如果你经常遇到这种问题，那么你应该考虑使用 Nullish Coalescing 运算符来解决它们。

示例代码

const foo = null ?? 'default value'; // foo 的值为 'default value'
const bar = undefined ?? 'default value'; // bar 的值为 'default value'
const baz = 'hello' ?? 'default value'; // baz 的值为 'hello'

const timeout = config.timeout ?? 5000; // timeout 的值为 1000
const maxRetries = config.maxRetries ?? 5; // maxRetries 的值为 3
const retryDelay = config.retryDelay ?? 500; // retryDelay 的值为 500

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