0Pricing
JavaScript Academy · 课时

结合使用 ?. 和 ??

将安全访问与合理的默认值结合起来。

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

结合使用两个工具

可选链 ?. 可以安全地读取可能缺失的值，而空值合并 ?? 可以提供默认值。将两者结合使用，就能读取深层数据并优雅地回退。

const user = {};
console.log(user.profile?.name ?? "Anonymous");

常见模式

惯用写法 a?.b ?? fallback 可以安全地读取值，并在结果为空值时使用默认值。它可以替代冗长的保护性判断链。

const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"

缺失时回退

如果其中任何一环为空值，?. 就会产生 undefined，随后由 ?? 将其替换为默认值。

const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"

深层嵌套

这种模式可以扩展到深层嵌套的结构，同时只需在末尾设置一个备用值。

const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"

保留有效的假值

由于 ?? 只会在遇到空值时提供默认值，因此链中真实的 0 值会被保留。

const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0

与 && / || 陷阱的比较

写成 a && a.b || fallback 会错误地替换合法的 0 或 ""。?. 与 ?? 的组合可以避免这个问题。

const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50);      // 0, correct

处理函数结果

您也可以为可选调用的结果提供默认值，将两个运算符结合起来处理方法调用。

const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"

为数组访问提供默认值

这种模式也适用于使用方括号访问数组或动态键。

const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"

构建显示字符串

一个实用场景是根据不确定的数据生成安全的显示文本。

function label(order) {
  return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"

优先级说明

?. 的绑定比 ?? 更紧，因此 a?.b ?? c 会按 (a?.b) ?? c 解释，这正是您需要的效果。

const u = { age: null };
console.log(u?.age ?? 18); // 18

简洁的惯用写法

将这两个运算符结合使用，可以用一行易读的代码替代冗长的防御性代码，让意图一目了然。

const profile = null;
console.log(profile?.bio?.length ?? 0); // 0

快速检查

预测输出结果。

回顾

惯用写法 obj?.deep?.prop ?? fallback 可以读取可能缺失的嵌套值，并且只在结果为 null 或 undefined 时提供默认值。与 &&/|| 方式不同，它会保留 0 和 "" 等有效假值。?. 的绑定比 ?? 更紧，因此分组会自然地得到正确处理。

常见问题解答

「结合使用 ?. 和 ??」课时是免费的吗？

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

「结合使用 ?. 和 ??」这节课中我会学到什么？

将安全访问与合理的默认值结合起来。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「结合使用 ?. 和 ??」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 使用 ?. 运算符进行可选链访问
  2. 使用 ?? 进行空值合并
  3. 结合使用 ?. 和 ??
  4. 可选调用和索引访问
← 返回 JavaScript Academy