JavaScript中问号后接句号（?.）是什么含义？

嘿，我完全懂你的困惑！这个?.运算符刚出来的时候确实容易和三元运算符（? :）搞混，而且搜索的时候如果关键词不对，确实会搜到一堆三元的内容。别担心，我来给你掰扯清楚：

什么是?.？ #

?.叫做可选链运算符，是ES2020新增的语法，核心作用就是安全地访问嵌套对象的属性或调用方法，避免因为中间某个层级的对象不存在（是null或undefined）而抛出TypeError。

结合你的示例代码解释 #

看你给出的这段React代码：

React.useEffect(() => {
  if (route.params?.post) {
    // Post updated, do something with `route.params.post`
    // For example, send the post to the server
  }
}, [route.params?.post]);

这里的route.params?.post可以拆解成两层意思：

1. 先检查route.params是否存在（即不是null或undefined）
2. 如果存在，就访问它的post属性；如果不存在，直接返回undefined，不会报错

对比不用可选链的写法

要是没有可选链，你得这么写才能保证安全：

// 条件判断里
if (route.params && route.params.post) { ... }

// 依赖数组里
[route.params ? route.params.post : undefined]

明显可选链的写法更简洁优雅，可读性也更强。

为什么搜索容易搜到三元运算符？ #

因为三元运算符的语法是condition ? exprIfTrue : exprIfFalse，和可选链的?.都带个?，如果搜索的时候只输入“JavaScript ?运算符”，搜索引擎很容易把三元的内容推给你。下次搜索可以试试关键词：JavaScript optional chaining operator或者直接搜“?. operator JavaScript”，就能精准找到相关内容啦。

内容的提问来源于stack exchange，提问作者Joshua Augustinus