了解 JavaScript 空合并运算符 (??)

空合并运算符 (??) 是 JavaScript 中的一项功能，在 ECMAScript 2020 中引入。使用此运算符，您可以处理可能为 null 或未定义的变量的默认值。

在引入之前，逻辑或运算符 (||) 通常用于此目的，但它并不总是合适，因为它处理所有虚假值。这 ？？运算符提供了更精确、更清晰的替代方案。

在本文中，您将了解空合并运算符的概念、其优点、如何使用它以及一些示例。

让我们直接开始吧！？

什么是空合并运算符 (??)？

空值合并 (??) 运算符是一个逻辑运算符，用于检查值是否为 null 或未定义。

如果其左侧操作数为 null 或未定义，则返回其右侧操作数（后备值）。

如果其左侧操作数不为 null 或未定义，则返回左侧操作数。

例如：

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

在此示例中，userInput 为 null，因此 ??运算符返回后备值“default”。

现在，您可能会想它与逻辑 OR || 有什么不同？运算符??

这与逻辑 OR || 不同运算符，因为 ||如果左侧操作数是任何假值（如 false、0、''、NaN 等），而不仅仅是 null 或未定义，则运算符返回右侧操作数。而??运算符仅关注 null 或未定义。

为什么使用空合并 (??) 运算符而不是逻辑 OR (||) 运算符？

??运算符仅关注 null 和未定义的值，而 ||运算符检查所有虚假值（如 false、0、''、NaN 等），这可能会导致意外结果。

例如：

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

在此示例中，对象中未定义年龄，因此 ??运算符返回后备值“默认值”。

现在，让我们再举一个例子来更好地理解这一点。

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

在此示例中，userInput 是一个空字符串，它是一个假值，而不是 null 或未定义，因此 ??运算符返回。

现在让我们看看如果使用 || 会发生什么而不是 ??.

let userInput = '';
let inputValue = userInput || 'default';
console.log(inputValue); // Output: default

这里，||运算符返回默认值，因为它会检查任何虚假值。

使用 ?? 的另一个原因而不是||运算符是可读性的。

代码使用??通常更清晰、更具可读性，因为它的目的与处理 null 和 undefined 直接相关。当变量为 null 或未定义时，它提供后备值，使代码更具可读性并且不易出错。

空运算符 ??使用逻辑运算符 AND/OR

您还可以使用 ??运算符与其他逻辑运算符一起检查多个条件。

例如：

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

在此示例中，inputValue 获取值“default”，因为左侧操作数 (userInput) 为 null。

现在让我们看看如果 userInput 不为 null 会发生什么。

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

哎呀！！这会引发错误？？

但是为什么会发生这种事？

发生这种情况是因为空合并运算符 (??) 不能直接在 || 等逻辑运算符中使用OR 和 && AND 周围没有适当的括号。

这是因为 JavaScript 对运算符优先级有特定的规则，它指的是不同运算符的优先级，即运算的计算顺序。

例如：??优先级低于||和 &&，因此将其放在括号内可确保首先在逻辑表达式中对其求值。

那么正确的使用方法是??直接使用逻辑运算符：

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

这里，括号强制 JavaScript 计算 ??先进行运算，然后将结果与 'alternative' 进行逻辑或运算。

结论

在 JavaScript 中，空值合并运算符 (??) 提供了一种更清晰一致的方式来处理 null 和未定义的默认值。它避免了 || 的陷阱运算符不返回意外的假值。使用 Nullish Coalescing Operator (??) 可以使您的代码更干净、更具可读性并且不易出错，尤其是在涉及可选值时。理解和使用空合并运算符 (??) 可以生成更高效且可维护的代码。

今天就这些。

希望对您有帮助。

感谢您的阅读。

这里还有 45 个针对开发人员的 JavaScript 提示和技巧。

欲了解更多此类内容，请点击此处。

在 X(Twitter) 上关注我，获取日常 Web 开发技巧。

继续编码！！

查看 toast.log，这是一个浏览器扩展，可让您查看网站上发生的错误、警告和日志 - ，而无需打开浏览器的控制台。点击此处在 toast.log 上获得 25% 折扣。

以上是了解 JavaScript 空合并运算符 (??)的详细内容。更多信息请关注PHP中文网其他相关文章！