请解释 JavaScript 中的空值合并运算符 (??) 的作用和用法。它与逻辑或运算符 (||) 有什么区别？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

JavaScript 中的空值合并运算符 ?? 用于在左侧的操作数为 null 或 undefined 时返回右侧的操作数，否则返回左侧的操作数。它提供了一种简洁的方式来为变量设置默认值，仅在变量为 null 或 undefined 时才使用默认值。

与逻辑或运算符 || 的主要区别在于 || 会将 falsy 值（例如：0，''，NaN，false，null，undefined）视为需要返回右侧操作数的情况，而 ?? 仅在左侧操作数为 null 或 undefined 时才返回右侧的操作数。这意味着 ?? 对 0 或空字符串等“有效”的 falsy 值不会生效。

例如：

// www.javascriptcn.com code example
let name = null;
let defaultName = "Guest";
let displayName = name ?? defaultName; // displayName 将被赋值为 "Guest"

let count = 0;
let defaultCount = 10;
let displayCount = count ?? defaultCount; // displayCount 将被赋值为 0，因为 0 不是 null 或 undefined

let text = "";
let defaultText = "Default Text";
let displayText = text ?? defaultText; // displayText 将被赋值为 ""，因为空字符串不是 null 或 undefined

let textOr = "";
let defaultTextOr = "Default Text";
let displayTextOr = textOr || defaultTextOr // displayTextOr 将被赋值为 "Default Text", 因为 "" 为 falsy 值

本题详细解读

空值合并运算符 (??) 的作用

空值合并运算符 ?? 是 ES2020 中引入的新特性。它的核心作用是为变量提供默认值，但仅当该变量的值为 null 或 undefined 时才使用默认值。

语法:

leftOperand ?? rightOperand

工作原理:

如果 leftOperand 的值为 null 或 undefined，则表达式的结果为 rightOperand。
否则，表达式的结果为 leftOperand。

使用场景:

为可能为空的变量提供默认值: 当你从 API 或用户输入获取数据时，某些字段可能为空（null 或 undefined）。使用 ?? 可以轻松地提供默认值，避免出现错误。
链式访问属性时的默认值: 可以与可选链式操作符 ?. 结合使用，为深层嵌套属性访问提供默认值。

与逻辑或运算符 (||) 的区别

逻辑或运算符 || 在 JavaScript 中也常用于设置默认值，但它与 ?? 有关键区别：

|| 的默认值判定: || 会将左侧操作数的 falsy 值（0，''，NaN，false，null，undefined）视为需要返回右侧操作数的情况。
?? 的默认值判定: ?? 仅在左侧操作数为 null 或 undefined 时才返回右侧操作数。

示例对比:

// www.javascriptcn.com code example
let valueZero = 0;
let valueNull = null;
let defaultValue = 10;

console.log(valueZero || defaultValue); // 输出 10 (因为 0 是 falsy 值)
console.log(valueZero ?? defaultValue); // 输出 0  (0 不是 null 或 undefined)

console.log(valueNull || defaultValue); // 输出 10 (因为 null 是 falsy 值)
console.log(valueNull ?? defaultValue); // 输出 10 (因为 null 是 null 或 undefined)

何时选择 ?? 或 ||:

使用 ??: 当你只想处理 null 或 undefined 的情况，并且希望将 0，''，false 等 falsy 值视为有效值时。
使用 ||: 当你希望将所有 falsy 值都视为需要提供默认值的情况时。例如，需要一个值在为空字符串或者null时返回默认值，此时可以使用||

总结:

?? 是一个更严格的默认值运算符，它避免了 || 在处理 falsy 值时可能出现的意外行为。在现代 JavaScript 开发中，推荐使用 ?? 来为 null 或 undefined 的变量设置默认值，它能更精确的表达我们的意图，使代码更清晰。