Gatsby项目中代码片段的current链式方法作用是什么

首先纠正认知：这里的current不是链式调用方法，而是对象属性，这段是JavaScript中常见的防御性取值写法，作用是避免读取undefined属性时抛出运行时错误。

代码运行逻辑拆解 #

• 第一步执行slug || {}：当slug为undefined、null、空字符串等假值时，会返回空对象{}，兜底避免后续取属性时报Cannot read properties of undefined的错误
• 第二步对返回结果取current属性：如果前一步返回空对象，{}.current会直接返回undefined，不会抛出异常

Gatsby场景下的关联说明 #

你提到slug的类型是字符串或undefined，这个类型判断存在偏差：如果slug真的是字符串类型，字符串原型上不存在current属性，取值会返回undefined。实际场景中这个slug大概率是你从Gatsby的GraphQL查询结果中获取的字段，Gatsby中部分自动生成的字段、关联引用字段会被包装为包含current属性的对象，实际的slug字符串值就存储在current属性中。

更简洁的等价写法 #

ES2020引入的可选链运算符可以实现完全相同的效果，可读性更高：

return slug?.current

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