如何解读包含可选链操作符?.的JavaScript前端代码？

你看到的?.是ES2020标准新增的可选链操作符，作用是安全访问嵌套的属性/方法，避免因前置值为null/undefined触发运行时报错。

核心规则 #

当执行a?.b时：

• 若a的值是null或undefined，表达式直接返回undefined，不再继续尝试访问b
• 若a是有效值，则正常访问a.b属性

你提供的代码逐行解释 #

export default function Index({ allPosts: { edges }, preview }) {
  const heroPost = edges[0]?.node;
  const morePosts = edges.slice(1);
  ....// rest of the code 
}

1. 第一行是React函数组件的默认导出语句，使用了对象解构赋值：从组件入参props中取出allPosts属性，再二次解构取出allPosts里的edges数组；同时取出props里的preview属性直接作为函数内部变量使用。
2. 第二行const heroPost = edges[0]?.node;：
   尝试取edges数组的第一项的node属性赋值给heroPost。如果edges是空数组，edges[0]就是undefined，此时表达式直接返回undefined，不会抛出「无法读取undefined的node属性」这类报错。
3. 第三行const morePosts = edges.slice(1);：
   截取edges数组从下标1到末尾的所有项，赋值给morePosts。因为数组的slice方法支持空数组调用，调用空数组的slice会直接返回空数组，不需要额外做非空校验，所以这里没有用可选链。

内容的提问来源于stack exchange，提问作者Ben Jonson