JavaScript中的?.运算符是什么含义？结合react-hook-form场景说明

基础定义 #

?. 是JavaScript ES2020新增的可选链运算符，用于安全访问深层嵌套的对象属性，避免因上层属性不存在导致的运行时报错。

执行逻辑 #

当你写a?.b?.c时，运行时会按以下规则执行：

• 先判断a是否为null/undefined，如果是，直接返回undefined，终止后续属性访问
• 如果a存在，再访问a.b，判断a.b是否为null/undefined，如果是，返回undefined，终止访问
• 只有前面所有层级都存在时，才会最终返回a.b.c的值

react-hook-form中的场景说明 #

你代码中的errors是从useForm()的formState中解构出来的表单错误集合，对应规则如下：

• 只有当name字段的校验规则触发时（比如用户提交表单时该必填字段为空），errors对象中才会生成name属性，同时该属性下会挂载你定义的message错误提示文本
• 当用户未触发表单校验、或name字段校验通过时，errors中不存在name属性，此时用可选链访问会直接返回undefined，页面上对应的span就不会显示任何内容，刚好匹配错误提示的展示逻辑

若不使用可选链，你需要写多层兼容判断才能达到同样的效果：

<span>{errors && errors.name && errors.name.message}</span>

内容的提问来源于stack exchange，提问作者Brian Mwangi