可选链操作符 `?.` 是 javascript 中的一项强大特性，它允许开发者在访问对象属性或调用函数时，如果对象为 `null` 或 `undefined`，表达式会立即短路并返回 `undefined`，而非抛出错误。这极大地提升了代码的健壮性和可读性，有效避免了因空值引用而导致的运行时错误。
理解可选链操作符 ?.
在 JavaScript 开发中，我们经常需要处理可能为 null 或 undefined 的对象。传统上，为了安全地访问这些对象的属性或方法，我们不得不编写冗长的条件判断语句，例如 if (obj && obj.prop)。可选链操作符 ?.（Optional Chaining）的引入，正是为了解决这一痛点，它提供了一种更简洁、更安全的方式来访问嵌套的属性或调用可能不存在的方法。
?. 操作符的工作原理是，当它左侧的表达式求值为 null 或 undefined 时，整个表达式会立即停止求值（短路），并直接返回 undefined，而不会尝试访问属性或调用方法，从而避免了 TypeError 错误的发生。
为什么需要可选链操作符？
考虑以下场景：你从某个 API 获取数据，或从用户输入中解析信息。这些操作的结果可能不总是符合预期，例如，正则表达式匹配可能失败，导致 match 变量为 null。
如果没有可选链操作符，直接访问 null 或 undefined 的属性会导致运行时错误：
立即学习“Java免费学习笔记（深入）”；
const search = "test"; const match = search.match(/type=(.*)/); // 此时 match 为 null // 尝试访问 match[1] 会抛出错误 // const type = match[1]; // Uncaught TypeError: Cannot read properties of null (reading '1')
这种错误在复杂的应用中难以追踪，并且会中断程序的正常执行。为了避免这种情况，我们通常会添加额外的 if 判断：
const search = "test";
const match = search.match(/type=(.*)/);
let type;
if (match) {
type = match[1];
} else {
type = undefined; // 或者其他默认值
}
console.log(type); // undefined虽然这种方法有效，但当链式访问更深层次的属性时，代码会变得非常冗长和嵌套。
可选链操作符的实际应用
有了可选链操作符，上述代码可以被极大地简化，同时保持了安全性：
const search = "test"; const match = search.match(/type=(.*)/); // 此时 match 为 null const type = match?.[1]; // 使用可选链操作符 console.log(type); // undefined
在这个例子中，match 变量的值是 null。当遇到 match?.[1] 时，?. 操作符检测到 match 为 null，于是表达式短路，type 被赋值为 undefined，而不会抛出错误。
可选链操作符不仅适用于属性访问，还支持数组元素的访问和函数的调用：
- 属性访问： obj?.prop 或 obj?.['prop']
- 数组元素访问： arr?.[index]
- 函数调用： func?.(args)
示例：不同场景下的应用
// 1. 访问对象属性
const user = {
name: "Alice",
address: {
city: "New York",
},
};
const userName = user?.name; // "Alice"
const userZip = user?.address?.zipCode; // undefined (address.zipCode 不存在)
const company = null;
const companyName = company?.name; // undefined (company 为 null)
// 2. 访问数组元素
const numbers = [1, 2, 3];
const firstNum = numbers?.[0]; // 1
const fourthNum = numbers?.[3]; // undefined (索引 3 不存在)
const emptyArray = null;
const element = emptyArray?.[0]; // undefined (emptyArray 为 null)
// 3. 调用函数
const config = {
log: (msg) => console.log(`Log: ${msg}`),
};
config.log?.("Configuration loaded."); // "Log: Configuration loaded."
const processor = {}; // 没有 process 方法
processor.process?.(); // 不会报错，什么也不会发生注意事项
- 不是条件渲染特有： 尽管在 React 等框架的条件渲染逻辑中经常看到 ?. 的身影，但它是一个纯粹的 JavaScript 语言特性，与特定的框架或渲染机制无关。
- 仅检查 null 和 undefined： 可选链操作符只对 null 和 undefined 值进行短路。对于其他“假值”如 0、''（空字符串）或 false，它不会短路。
- 不能用于赋值： 可选链不能出现在赋值操作符的左侧。例如，obj?.prop = value 是不允许的。
- 浏览器兼容性： 可选链操作符是 ES2020（ECMAScript 2020）的新特性。在较旧的浏览器或 Node.js 环境中可能需要 Babel 等工具进行转译。
总结
可选链操作符 ?. 是现代 JavaScript 中一个极其有用的语法糖，它通过提供一种安全、简洁的方式来处理可能存在的 null 或 undefined 值，显著提升了代码的健壮性和可读性。掌握并合理运用这一特性，能够帮助开发者编写出更优雅、更少出错的 JavaScript 代码。
