解锁 JavaScript：逻辑或 (||) 与空合并运算符 (??)-js教程-PHP中文网

Unlocking JavaScript: Logical OR (||) vs Nullish Coalescing Operator (??)

介绍

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'

登录后复制

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