解锁 JavaScript：逻辑或 (||) 与空合并运算符 (??)

介绍

JavaScript 作为最流行的编程语言之一，为开发人员提供了一系列运算符来处理各种逻辑运算。其中，逻辑或 (||) 和空值合并 (??) 运算符是管理默认值和处理空值的基本工具。本文将深入探讨这两个运算符之间的差异、它们的用例，以及实际、复杂的示例来说明它们的用法。

了解逻辑 OR (||) 运算符

JavaScript 中的逻辑 OR (||) 运算符广泛用于返回其操作数中的第一个真值，如果没有一个真值，则返回最后一个值。主要用于设置默认值。

句法

result = operand1 || operand2;

它是如何运作的

||运算符从左到右计算，如果第一个操作数为真则返回；否则，它计算并返回第二个操作数。

示例 1：设置默认值

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

在此示例中，userInput 是一个空字符串（假），因此返回 defaultText。

示例 2：处理多个值

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

这里，firstName 为 null（假），因此 lastName 被返回，因为它是 true。

逻辑 OR (||) 运算符的限制

|| 的主要限制运算符的一个缺点是它将多个值视为假值，例如 0、NaN、''、false、null 和 undefined。当这些值本应有效时，这可能会导致意外结果。

引入空值合并 (??) 运算符

Nullish Coalescing (??) 运算符是 JavaScript 的最新补充，在 ES2020 中引入。它旨在处理 null 或 undefined 明确意味着唯一考虑的空值的情况。

句法

result = operand1 ?? operand2;

它是如何运作的

??当左侧操作数为 null 或未定义时，运算符返回右侧操作数。否则，它返回左侧操作数。

示例 1：设置默认值

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

在本例中，userInput 是一个空字符串，不为 null 或未定义，因此返回。

示例 2：处理空值

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

此处，firstName 为 null，因此返回 lastName，因为它既不是 null 也不是未定义。

比较逻辑 OR (||) 和空合并 (??) 运算符

示例 1：比较虚假值

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

在此示例中，|| 认为 0 为假。运算符，但它是 ?? 的有效值运算符。

示例 2：同时使用两个运算符

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

这里，userInput 为 null，因此 ?? 使用了fallbackText操作员。然后通过 || 检查结果运算符，但由于 FallbackText 为真，因此返回它。

逻辑 OR (||) 和空合并 (??) 运算符的复杂示例

示例 3：对象的嵌套操作

考虑一个场景，您需要为嵌套对象属性设置默认值。

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

在这个例子中，userSettings.theme.color是一个空字符串，所以使用defaultSettings.theme.color。 userSettings.theme.font 为 null，因此使用 defaultSettings.theme.font。

示例 4：具有默认值的函数参数

处理函数参数时，您可能希望为缺少的参数提供默认值。

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

在此示例中，名称参数使用 ??如果 name 为 null 或未定义，则使用运算符设置默认值“Guest”。问候语参数使用 ||如果问候语是除 null 或未定义之外的任何虚假值，则运算符设置默认值“Hello”。

示例 5：与可选链结合

可选链接 (?.) 可以与 || 组合和 ？？安全地处理深度嵌套的对象属性。

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

在此示例中，可选链接可确保如果属性路径的任何部分不存在，则返回未定义，从而防止错误。 ||和 ？？然后运算符提供适当的默认值。

最佳实践和用例

1. 使用||对于广泛违约：

   • 当您需要为一系列虚假条件（例如，空字符串、0、NaN）提供默认值时。

2. 使用??精确的空值检查：

   • 当您特别想要处理 null 或 undefined 而不影响其他虚假值时。

3. 结合两者：

   • 使用 || 的组合和 ？？对于需要明确处理真/假值和空值的复杂场景。

常见问题解答

逻辑或 (||) 运算符的作用是什么？
逻辑或 (||) 运算符返回其操作数中的第一个真值，如果没有真值，则返回最后一个操作数。

什么时候应该使用 Nullish Coalescing (??) 运算符？
当您需要专门处理 null 或未定义而不将其他虚假值（如 0 或空字符串）视为 null 时，请使用 Nullish Coalescing (??) 运算符。

我可以同时使用两个运算符吗？
是的，您可以同时使用 ||和 ？？一起处理不同类型的值并确保您的代码逻辑有效地覆盖各种情况。

怎么办||处理空字符串？
||运算符将空字符串视为假字符串，因此如果第一个操作数是空字符串，它将返回下一个操作数。

所有浏览器都支持 Nullish Coalescing (??) 运算符吗？
这 ？？支持 ES2020 的现代浏览器和环境支持运算符。对于较旧的环境，您可能需要使用像 Babel 这样的转译器。

|| 之间有什么区别和 ？？运营商？
主要区别在于 ||将多个值视为假值（例如 0、''、false），而 ??仅将 null 和 undefined 视为空值。

结论

理解 JavaScript 中逻辑 OR (||) 和空合并 (??) 运算符之间的差异对于编写健壮且无错误的代码至关重要。 ||运算符非常适合广泛的默认场景，而 ??非常适合精确处理空值。通过适当地使用这些运算符，您可以确保您的代码有效地处理各种数据状态，从而提供无缝的用户体验。

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