ES11引入可选链操作符(?.),用于安全访问深层嵌套对象属性、调用可能不存在的方法或访问数组元素,遇null/undefined即返回undefined而不报错;常与空值合并操作符??配合提供默认值。

ES11(即 ECMAScript 2020)是 JavaScript 在 2020 年发布的标准版本,它引入了几个实用的新特性,其中最常用、影响最广的就是可选链操作符(Optional Chaining Operator,?.)。它能帮你安全地访问深层嵌套对象的属性,避免因中间某层为 null 或 undefined 而抛出错误。
可选链操作符 ?. 是什么
可选链操作符允许你在访问对象属性或调用方法时,自动检查中间路径是否有效。只要链中任意一环是 null 或 undefined,整个表达式就立即返回 undefined,而不会报错。
常见使用场景包括:
-
访问嵌套对象属性:
user?.address?.city—— 如果user或address不存在,不报错,直接返回undefined -
调用可能不存在的方法:
obj?.method?.()—— 先检查obj和method是否存在,再执行 -
访问数组元素(配合括号语法):
arr?.[0]—— 若arr为null,也不报错
它解决了什么老问题
在 ES11 之前,要安全访问 a.b.c.d,你得层层判断:
立即学习“Java免费学习笔记(深入)”;
技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
const city = a && a.b && a.b.c && a.b.c.d;
或者用 try/catch 包裹,代码冗长且可读性差。可选链让这类逻辑变得简洁直观,语义也更清晰。
注意事项和搭配建议
可选链必须配合空值合并操作符 ?? 使用才更完整——因为 ?. 遇到断链会返回 undefined,而 ?? 可以提供默认值:
-
user?.name ?? '匿名用户'—— 名字不存在时显示默认值 -
config?.theme?.color ?? '#333'—— 安全取色,无配置也不崩 - 注意:
?.不能用于赋值左侧,比如obj?.prop = value是语法错误
其他 ES11 重要特性简提
除了可选链,ES11 还包含:
-
空值合并操作符
??:仅当左侧为null或undefined时才用右侧值(区别于||) - Promise.allSettled():等待所有 Promise 结束(无论成功失败),返回结果数组
-
BigInt 支持大整数运算:如
123n + 456n -
globalThis 提供统一全局对象访问方式(替代
window、global、self等)










