JavaScript Academy · 课时

使用 ?. 运算符进行可选链访问

Q: 「使用 ?. 运算符进行可选链访问」这节课中我会学到什么？

安全地访问深层嵌套的属性。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安全地访问深层嵌套的属性。

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

问题所在

读取 undefined 或 null 上的属性会抛出 TypeError。可选链让您能够安全地读取嵌套值。

const user = {};
console.log(user.profile && user.profile.name);

?. 运算符

可选链运算符 ?. 会在左侧的值为 null 或 undefined 时停止并返回 undefined，而不会抛出错误。

const user = {};
console.log(user.profile?.name); // undefined, no error

读取深层属性

您可以连续使用多个 ?. 步骤来深入访问复杂结构，而不必在每一层手动添加保护条件。

const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"

短路求值

如果链中的任何一环为空值，整个表达式就会短路为 undefined，后面的部分不会执行。

const data = { user: null };
console.log(data.user?.address?.city); // undefined

只有空值会触发它

?. 只会在 null 或 undefined 时短路。0 或 "" 等其他假值是真实的值，会按正常方式访问。

const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"

与 && 的比较

在出现 ?. 之前，人们会串联使用 && 保护条件。对于相同的意图，可选链更简短、更清晰。

const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);

调用后继续链式访问

方法调用之后仍然可以继续链式访问，安全地读取返回值上的属性。

const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080

链中途短路

如果中间环节为空值，求值会立即停止，即使后面的环节原本会调用函数也是如此。

const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/d

不能用于赋值

可选链用于读取。您不能对可选链赋值；在 = 的左侧使用它会产生语法错误。

const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);

与数组结合使用

可选链也适用于方括号访问，后面会进一步介绍。相同的空值安全规则仍然适用。

const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"

避免过度使用

只有在值确实可能缺失时才使用 ?.。过度使用可能会隐藏错误，因为它会让本应被发现的错误悄无声息地消失。

const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"

快速检查

预测结果。

回顾

?. 运算符可以安全地读取属性：如果左侧为 null 或 undefined，它会返回 undefined 而不是抛出错误，并使链的其余部分短路。只有空值会触发它（0 或 "" 不会），而且它不能用作赋值目标。

常见问题解答

「使用 ?. 运算符进行可选链访问」课时是免费的吗？

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

「使用 ?. 运算符进行可选链访问」这节课中我会学到什么？

安全地访问深层嵌套的属性。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「使用 ?. 运算符进行可选链访问」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy