UD5工具箱
什么是可选链操作符?.？它解决了什么问题？
可选链操作符?.是ECMAScript 2020（ES11）引入的一种新语法，用于安全地访问嵌套对象的深层属性。它的工作原理是在每一步属性访问前先检查左侧的值是否为null或undefined，如果是则立即短路返回undefined，而不是继续向下访问导致TypeError异常。例如，user?.address?.city在user为null或address为null时都会安全返回undefined，而传统的user.address.city会抛出"Cannot read properties of null"的错误。?.解决了JavaScript中长期存在的"空值引用"问题，让开发者可以用简洁的链式语法替代冗长的if判断语句来处理可能为null的嵌套属性访问。
什么是空值合并运算符??？它和逻辑或||有什么区别？
空值合并运算符??是ES2020引入的逻辑运算符，语法为value ?? defaultValue。当value为null或undefined时返回defaultValue，否则返回value。它和逻辑或||的核心区别在于对"假值"的处理方式：||会将0、""（空字符串）、false、NaN等所有假值都视为"无效"并返回右侧默认值，而??只处理null和undefined这两种明确的空值。例如，设用户偏好fontSize为0时，fontSize || 16会错误返回16（因为0是假值），而fontSize ?? 16会正确返回0（因为0不是null也不是undefined）。在需要区分"空值"和"合法假值"的场景中，??是更精确的选择。
?.和??可以配合使用吗？最佳实践是什么？
可以，?.和??是天然的搭配组合，这是现代JavaScript中最常见的空值安全模式。典型用法为obj?.a?.b?.c ?? '默认值'。?.负责安全地逐层访问嵌套属性，避免TypeError；??在?.返回undefined时提供合理的默认值。最佳实践是：当访问的属性确实需要一个有效值（而非undefined）时，使用??提供默认值；当属性可能合法地为undefined且后续代码能处理undefined时，只用?.即可。另外，??不能直接与&&和||混合使用而不加括号，如需混合使用应写作(obj?.a ?? '默认') || '备选'，以避免语法歧义。
可选链支持哪些使用形式？
可选链支持三种使用形式。第一种是属性访问：obj?.prop，安全访问可能为空的对象的属性，如果obj为null或undefined则返回undefined。第二种是数组索引访问：arr?.[index]，安全访问可能为空的数组的指定索引元素，如果arr为null或undefined则返回undefined。第三种是函数调用访问：fn?.(args)，安全调用可能未定义的函数，如果fn为null或undefined则返回undefined而不抛出TypeError。这三种形式覆盖了JavaScript中最常见的属性访问、数组取值和函数调用场景。需要注意的是，?.不能用于赋值操作，如obj?.prop = value是不合法的语法，赋值场景仍需使用传统的条件判断。
可选链的浏览器兼容性如何？需要转译吗？
可选链?.和空值合并??的浏览器原生支持情况良好：Chrome 80+（2020年2月）、Firefox 74+（2020年3月）、Safari 13.1+（2019年9月）、Edge 80+（2020年2月）。在Node.js 14+版本中也原生支持。对于2024年以后的新项目，绝大多数用户的浏览器都已原生支持这些特性，通常不需要额外转译。如果项目需要支持更旧的浏览器（如IE11），可以使用Babel的@babel/plugin-proposal-optional-chaining和@babel/plugin-proposal-nullish-coalescing-operator插件，或通过TypeScript编译器将语法降级为兼容代码。在TypeScript项目中，只需在tsconfig.json中设置target为es2020或更高版本即可直接使用。
可选链的性能影响大吗？
可选链的性能影响极小，几乎可以忽略不计。?.在引擎层面的实现本质上等价于在每一步属性访问前增加一个null/undefined检查，这与开发者手写的if判断在运行时开销上没有显著差异。实际上，由于?.的短路特性，当空值出现在属性链的前几层时，?.反而比传统写法更快（因为跳过了后续不必要的属性查找）。现代JavaScript引擎（V8、SpiderMonkey、JavaScriptCore）都对?.进行了专门的性能优化。在绝大多数应用场景中，可选链引入的性能开销远小于一次DOM操作或网络请求，开发者完全不必为了性能而避免使用?.。代码的可读性和安全性才是更需要关注的维度。
可选链有哪些使用限制？
可选链的主要限制包括以下几个方面。第一，不能用于赋值操作：obj?.prop = value是非法语法，可选链只能用于读取属性，不能用于设置属性。第二，不能用于delete操作：delete obj?.prop也是不合法的。第三，不能直接与&&和||混合使用而不加括号：a?.b && c或a?.b || c需要写作(a?.b) && c或(a?.b) || c以避免语法歧义。第四，可选链表达式的整体不能直接赋值给变量后使用其左侧部分（如const x = obj?.a; x.b会报错因为x可能为undefined）。第五，在模板字符串中使用可选链需要加括号：`${obj?.name}`是可以的，但更复杂的表达式建议用括号明确优先级。这些限制在实际开发中很少成为障碍，但了解它们有助于避免潜在的语法错误。
可选链和空值合并适合用在哪些场景？
可选链?.和空值合并??最适合以下场景。API响应处理：后端返回的JSON数据中，某些字段可能为null（如未填写的用户资料、可选的配置项），使用?.?.可以安全提取所需字段，配合??提供默认值。用户配置和偏好：用户可能没有设置某些偏好项，对应字段为null或undefined，使用??回退到默认配置。DOM操作：document.querySelector可能返回null，使用?.可安全调用方法。第三方数据集成：集成外部SDK或第三方API时，返回的数据结构可能不符合预期，?.可以防御性地安全访问。数组和集合操作：arr?.[0]安全访问数组首元素，配合??提供空数组时的默认值。函数安全调用：callback?.()在回调函数可能未定义时安全调用。总之，任何可能遇到null或undefined的属性访问链都是?.和??的理想使用场景。
TypeScript中如何使用可选链？它对类型系统有什么帮助？
TypeScript从3.7版本（2019年11月发布）开始原生支持?.和??语法。在TypeScript中使用可选链与JavaScript完全相同，无需额外的配置。可选链对TypeScript类型系统的最大帮助是自动的类型收窄：当属性类型为string | null | undefined时，使用?.访问后返回类型会自动收窄为string | undefined，编译器能够据此进行更精确的类型检查。在strictNullChecks模式下，可选链是处理可空类型的标准方式——它消除了运行时TypeError的同时，也满足了编译器的严格类型检查要求。对于函数返回值为可空类型的场景（如querySelector返回Element | null），?.?.可以安全地链式调用方法，TypeScript会正确推断每个中间步骤的类型，确保整条链的类型安全。