随着 JavaScript 的发展，新的语言特性不断被引入，其中 ES11 中的 Nullish Coalescing Operator 是一个非常有用的特性。使用它可以非常简洁地处理变量值的判断问题，让代码更加清晰易懂。在本文中，我们将介绍如何在 ES11 中使用 Nullish Coalescing Operator 简化代码。
什么是 Nullish Coalescing Operator
Nullish Coalescing Operator 是一种用来处理 JavaScript 变量值的特殊操作符，它用于判断变量值是否为空或 undefined。使用 Nullish Coalescing Operator，可以非常简单地将变量值设为默认值或者一个新的值。
在 JavaScript 中，判断变量是否为空或 undefined 通常使用 || 操作符，例如：
const a = 0; const b = null; const c = undefined; const result1 = a || 1; // result1 = 0 const result2 = b || 2; // result2 = 2 const result3 = c || 3; // result3 = 3
在这个例子中，我们使用了 || 操作符来判断变量是否为空或 undefined。当变量的值为 0、null 或 false 时，使用 || 操作符得到的结果都为其默认值。这看上去没有问题，但是当变量的值为 0 或 false 时，也会被当作为空值处理，这会导致一些问题。
为了解决这个问题，Nullish Coalescing Operator 在 ES11 中引入。它用 ?? 代替 ||，在判断变量是否为空或 undefined 时只有在变量的值为 null 或 undefined 才会使用默认值，例如：
const a = 0; const b = null; const c = undefined; const result1 = a ?? 1; // result1 = 0 const result2 = b ?? 2; // result2 = 2 const result3 = c ?? 3; // result3 = 3
在这个例子中，我们使用了 ?? 操作符来判断变量是否为空或 undefined，只有变量的值为 null 或 undefined 时才会使用默认值。这使得判断变量值是否为空或 undefined 更加准确、安全。
如何使用 Nullish Coalescing Operator 简化代码
使用 Nullish Coalescing Operator 可以非常便捷地将变量值设为默认值或者一个新的值，让代码更加清晰易懂。例如，在以下的例子中，我们使用 Nullish Coalescing Operator 简化了代码：
-- -------------------- ---- ------- -- ---- -------- ------- -- - - - - --- --------- - - - -- - - - --- --------- - - - -- -- -- --------- - -- -- ------- ---------- -------- -------- ------ - -- - - -- - -- -- --------- -
在这个例子中，我们使用了 Nullish Coalescing Operator 来简化了设定变量的默认值的代码，让代码更加简洁明了。
使用 Nullish Coalescing Operator 还可以非常方便地处理对象属性的值。例如，在以下的例子中，我们使用 Nullish Coalescing Operator 处理了对象属性的默认值：
const obj = {
name: "",
age: 0,
};
const name = obj.name ?? "default name"; // name = ""
const age = obj.age ?? 18; // age = 0在这个例子中，我们使用了 Nullish Coalescing Operator 处理了对象属性的默认值，更加简洁、高效。
总结
Nullish Coalescing Operator 是 ES11 中一个非常实用的特性，它可以非常清晰地处理变量值的判断问题，让代码更加简洁、高效。在使用 Nullish Coalescing Operator 时，我们需要注意空值和默认值的问题，确保代码的正确性和可读性。在日常的编写中，我们可以积极地使用 Nullish Coalescing Operator 来简化代码，提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64714857968c7c53b0f2f327