JavaScript 判断 undefined 的符号什么时候实装？

[Robbbbbb]

之前看到一个新特性介绍，很心动 说是可以用?.来规避从 undefined 对象中取值的错误 例如

console.log(data.user?.address?.street) //undefined

这个特性什么时候准备实装？ 或者现在有什么方式可以编译这个语法吗？ 平常业务中确实很需要这个特性。

[bnm965321]

CRA3.3 已经支持

其它情况需要自己设置 babel 插件

[l1nyanm1ng]

这个是可选链语法 optional chaining 吧，在 swift 和 kotlin 中都已经实装了，es 现在这个规范还在提案阶段，与其期待 es 将这个规范实装，不如期待 ts 赶紧上，不过用 babel 也可以预编译享受这个新特性，使用 @babel/plugin-proposal-optional-chaining

[shintendo]

没记错的话还在 stage 2

[qdwang]

这种功能其实和报错一样，除非你确实需要用到 undefined

[murmur]

已经用第三方组件访问很深的 object 了，除了性能会有丁点影响，不觉得很心动

[hua123s]

data&&data.user&&data.user.address&&data.user.address.street 其实这样写更美观 (捂脸)

[Robbbbbb]

@l1nyanm1ng 好的，谢谢，我去试一下

[bnm965321]

@l1nyanm1ng ts3.7 已经支持了

[bnm965321]

@shintendo 已经进入 stage3，ts3.7 已经支持这个特性

[l1nyanm1ng]

不介意的话用 lodash 也可以减少 undefined 和 null 的判断
```javascript
import _ from 'lodash';
const street = _.get(data, ['user', 'address', 'street'])
```
lodash#get 第三个参数可以设置，在这个 object 访问链返回 undefined 时的 fallback，相当于 swift 的 data.user?.address?.street ?? "fallback"

[rioshikelong121]

用 lodash 规避即可。 这个语法形式看着和.net 的挺像。

[virtual2019]

最新的 chrome dev 已经支持了

[zhixuanziben]

lodash.get 可以替代这个，或者就直接上 ts3.7

[a4854857]

lodash 在使用 vue 的时候写在 html 模板就不那么好看了...求支招

[weixiangzhe]

还是用 lodash 的 get 吧

[molvqingtai]

babel

[weixiangzhe]

这东西不靠谱 对于 a.b.c 后台经常返回 a 为 null， 然后又崩了

[Pastsong]

基本上已经进 ES2020 标准了，什么时候实装要看各引擎厂商

[vipcc]

C#已经支持

[releaseme]

@shintendo 昨天看推上一位 TC39 成员说 stage 4 了

[fernandoxu]

@rioshikelong121 应该就是从 c#抄来的

[releaseme]

@l1nyanm1ng js 里面也有 ?? 了，https://github.com/tc39/proposal-nullish-coalescing
结合 Optional Chaining 初步能达到 lodash.get 的功能，其实我觉得还是 lodash.get 好用（逃

[imhxc]

“实装” 啥意思？

[pandaii]

貌似 angular 还是 coffee 很早就有了，确实很好用

[DOLLOR]

@releaseme
@l1nyanm1ng

JS 的??跟_.get 的第三个参数不能等同，这个需要注意.

({a:null})?.a??'default'
=>'default'

_.get({a:null},'a','default')
=>null

这个才是等同的用法
_.defaultTo(_.get({a:null},'a'),'default')
=>'default'

@weixiangzhe

a?.b?.c，a 为 null 时并不会崩。
null?.b?.c
=>undefined

a 为 undefined 时并不会崩。
undefined?.b?.c
=>undefined

[free9fw]

我自己 polyfill 了一个自用

[onfuns]

es6 的结构可以啊，有点遗憾的只能是 undefined

[liajoy]

装 @babel/plugin-proposal-optional-chaining 是可以的
但是这玩意儿现在的开发体验不好，VSCode 的 TS 检查不支持，总是会提示错误
除非把 TS 检查关了，直接走 eslint 来做代码检查

[weixiangzhe]

@liajoy ts 有 a!.b!.c

[duan602728596]

babel 使用 babel-plugin-proposal-optional-chaining，typescript 大于等于 3.7 都已经可以用了。
如果是 ide 不支持，说明你的 ide 版本太低了，需要升级到新版本。
webstorm 很早就支持 a?.b?.c 语法和 a ?? b 语法了，webstorm2019.2 版本（也可能更早）也支持管道函数 a |> b |> c 语法了
webstorm2019.2 版本开始也支持 typescript 的 a ?? b 语法了

[liajoy]

@weixiangzhe a!.b!.c 是 non-null assertion operator，和 optional chaining 不太一样

[releaseme]

@DOLLOR
`({a:NaN})?.a??'default'`
>>> NaN

`_.defaultTo(_.get({a:NaN},'a'),'default')`
>>> default

🤦‍♀️，说到底还是判断条件不一致, emmmmmm
_.get 碰到 undefined 返回默认值
_.defaultTo 碰到 null || undefined || NaN 返回默认值
?? 碰到 null || undefined 返回默认值
.? 碰到 null || undefined 返回 undefined

[luchenwei9266]

Angular 表示早已实装....

[jigi330]

使用`Typescript 3.7`的 1 个月前已经用上了