JavaScript Academy · 课时

可选调用和索引访问

Q: 「可选调用和索引访问」这节课中我会学到什么？

将可选链与调用和方括号访问结合使用。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将可选链与调用和方括号访问结合使用。

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

超越属性读取

可选链还支持安全地调用函数，以及访问数组元素或动态键元素。

const obj = { greet: () => "hi" };
console.log(obj.greet?.()); // "hi"

可选的方法调用

?.() 形式只有在函数存在时才会调用它。如果方法为空值，它会返回 undefined，而不会抛出错误。

const obj = {};
console.log(obj.greet?.()); // undefined, no error

为什么这很重要

如果没有可选调用，调用缺失的方法就会抛出错误。可选调用形式可以简洁地保护可选回调。

function run(onDone) {
  onDone?.(); // safe whether or not onDone is provided
}
run();
run(() => console.log("done"));

只有空值才会跳过调用

?.() 只会在值为 null 或 undefined 时跳过调用。如果值是非函数值，调用时仍会产生 TypeError。

const obj = { greet: 42 };
try {
  obj.greet?.();
} catch (e) {
  console.log("not a function");
}

可选的索引访问

?.[ ] 形式只有在基值不是空值时才会读取元素，适用于数组和计算得到的键。

const arr = ["a", "b"];
console.log(arr?.[1]); // "b"
const none = null;
console.log(none?.[0]); // undefined

动态键

结合 ?. 使用方括号访问，可以安全地处理动态属性名。

const data = { user: { name: "Mia" } };
const key = "name";
console.log(data.user?.[key]); // "Mia"

嵌套数组

您可以通过嵌套数组或对象连续使用可选索引访问。

const grid = [[1, 2], [3, 4]];
console.log(grid?.[1]?.[0]); // 3
console.log(grid?.[5]?.[0]); // undefined

对返回值进行可选调用

您可以混合使用不同形式：先可选地读取一个值，再可选地调用它。

const handlers = { click: () => "clicked" };
console.log(handlers.click?.()); // "clicked"
console.log(handlers.hover?.()); // undefined

结合默认值

将这些形式与 ?? 配合使用，可以为结果提供备用值。

const config = {};
const port = config.get?.() ?? 3000;
console.log(port); // 3000

安全调用数组方法

可选链让您无需单独检查数组是否存在，就可以调用可能缺失的数组上的方法。

const state = { tags: null };
console.log(state.tags?.join(", ") ?? "none"); // "none"

在确实可选的地方使用

这些形式非常适合可选回调和结构不确定的数据。对于应该始终存在的值，请避免使用它们，以便真正的错误仍然能够暴露出来。

const events = { onSave: null };
events.onSave?.("payload"); // silently does nothing
console.log("continued");

快速检查

选择安全的调用形式。

回顾

可选链包括用于安全调用方法的 ?.()，以及用于安全进行索引或动态键访问的 ?.[ ]。当基值为空值时，两者都会返回 undefined；但如果调用的是非函数，仍然会抛出错误。将它们与 ?? 结合可以提供默认值，并且应当只用于确实可选的值。

常见问题解答

「可选调用和索引访问」课时是免费的吗？

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

「可选调用和索引访问」这节课中我会学到什么？

将可选链与调用和方括号访问结合使用。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「可选调用和索引访问」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy