js ?. 可选链的用法和几个容易踩的坑

浏览器控制台蹦出一行 TypeError: Cannot read properties of undefined (reading 'name')，多数情况是中间某一层对象没拿到，代码却直接往下点。把 user.info.name 改成 user?.info?.name，报错就没了，这就是 js ?. 最常见的用法。

js ?. 在 ES2020 定稿，Node 14 以后和现在的主流浏览器都支持。它只做一件事：左边是 null 或 undefined，整条表达式直接返回 undefined，不再往下取值。

它省掉的是层层判断

老写法是 if (user && user.info && user.info.name)，或者三元一层层套。换成可选链只要一行：

const name = user?.info?.name; const city = order?.address?.city ?? '未填写';

注意问号只保护它左边那一层。user?.info.name 里如果 info 是 undefined，后面的 .name 照样报错，所以每一层都得写。

方法调用和数组下标也能用

可能不存在的方法写成 obj.method?.()，数组写成 list?.[0]。这两种在可选回调、配置项里很常见。obj?.method() 和 obj.method?.() 不是一回事，前者只判断 obj，方法本身不存在还是会抛错。

这几个位置不能写

赋值左边不能用，a?.b = 1 直接语法报错，new 后面也不行。低版本浏览器不认这个语法，会抛 SyntaxError，构建工具一般会转译，但要确认 target 配置。

还有，?. 和 || 混用时加括号，不然部分解析器报 Unexpected token。团队还在维护老安卓 WebView 的话，先看构建配置，别默认所有人都支持。

判断很简单：新项目放心用；要兼容老设备就交给 Babel 或 esbuild，别手写一堆 && 硬撑。真报错时看控制台堆栈，信息一般会指到具体行号，改起来不难，也省得挨个排查。