JavaScript Academy · 课时

使用 ?? 进行空值合并

Q: 「使用 ?? 进行空值合并」这节课中我会学到什么？

仅针对 null 和 undefined 提供默认值。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

仅针对 null 和 undefined 提供默认值。

使用 ?? 进行空值合并 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

提供默认值

当某个值缺失时，您通常需要提供备用值。空值合并运算符可以简洁地只在必要时提供默认值。

const name = undefined;
console.log(name ?? "Guest"); // "Guest"

?? 运算符

双问号运算符只有在左侧为 null 或 undefined 时，才会返回右侧的值。

console.log(null ?? "fallback");      // "fallback"
console.log(undefined ?? "fallback"); // "fallback"
console.log("hi" ?? "fallback");      // "hi"

为什么不使用 ||

逻辑或运算符 || 会在遇到任何假值时使用备用值，包括 0、"" 和 false，这对于真实数据通常是不正确的。

console.log(0 || 10);  // 10  (probably unwanted)
console.log(0 ?? 10);  // 0   (keeps the real value)

空字符串情况

使用 || 时，有意设置的空字符串会被替换；使用 ?? 时则会保留，因为 "" 并不是空值。

const note = "";
console.log(note || "none"); // "none"
console.log(note ?? "none"); // ""

保留 false

真实的 false 值可以通过 ?? 保留下来，但使用 || 时会被覆盖。

const enabled = false;
console.log(enabled ?? true); // false
console.log(enabled || true); // true

安全读取配置

对于用户可能有意选择的设置，0 或空值可能是有效选项，此时 ?? 非常适合。

function getVolume(settings) {
  return settings.volume ?? 50;
}
console.log(getVolume({ volume: 0 })); // 0

适用于变量

它适用于任意表达式，并返回第一个不是空值的操作数。

let cached = null;
const value = cached ?? computeValue();
function computeValue() { return 99; }
console.log(value); // 99

短路求值

与 || 和 && 一样，?? 也会执行短路求值：如果左侧不是空值，就不会计算右侧。

function side() { console.log("called"); return 1; }
const x = "ready" ?? side(); // side() never runs
console.log(x);

不能直接与 && 或 || 混用

不能在不加括号的情况下将 ?? 与 && 或 || 混用，否则会产生语法错误，以避免歧义。

const a = true, b = null;
// const c = a || b ?? 1; // SyntaxError
const c = (a || b) ?? 1;
console.log(c);

函数默认参数与 ?? 的区别

默认参数只在参数为 undefined 时生效。而 ?? 还会处理显式传入的 null。

function greet(name = "Guest") { return "Hi " + name; }
console.log(greet(null)); // "Hi null"
function greet2(name) { return "Hi " + (name ?? "Guest"); }
console.log(greet2(null)); // "Hi Guest"

如何选择

当 0、"" 或 false 是必须保留的有效值时，请使用 ??。只有在任何假值都应该触发备用值时，才使用 ||。

const retries = 0;
console.log(retries ?? 3); // 0 kept

快速检查

比较这两个运算符。

回顾

?? 运算符只有在左侧为 null 或 undefined 时，才会返回右侧的值，因此会保留 0、"" 和 false。对于真实数据的默认值，它比 || 更安全。它会执行短路求值，并且不能在不加括号的情况下与 &&/|| 混用。

常见问题解答

「使用 ?? 进行空值合并」课时是免费的吗？

是的 — 「使用 ?? 进行空值合并」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「使用 ?? 进行空值合并」这节课中我会学到什么？

仅针对 null 和 undefined 提供默认值。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 ?? 进行空值合并」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy