之前看到一个新特性介绍,很心动 说是可以用?.来规避从 undefined 对象中取值的错误 例如
console.log(data.user?.address?.street) //undefined 这个特性什么时候准备实装? 或者现在有什么方式可以编译这个语法吗? 平常业务中确实很需要这个特性。

之前看到一个新特性介绍,很心动 说是可以用?.来规避从 undefined 对象中取值的错误 例如
console.log(data.user?.address?.street) //undefined 这个特性什么时候准备实装? 或者现在有什么方式可以编译这个语法吗? 平常业务中确实很需要这个特性。
1 bnm965321 Dec 5, 2019 CRA3.3 已经支持 其它情况需要自己设置 babel 插件 |
2 LG3xFA6kpn88HxEW Dec 5, 2019 这个是可选链语法 optional chaining 吧,在 swift 和 kotlin 中都已经实装了,es 现在这个规范还在提案阶段,与其期待 es 将这个规范实装,不如期待 ts 赶紧上,不过用 babel 也可以预编译享受这个新特性,使用 @babel/plugin-proposal-optional-chaining |
3 shintendo Dec 5, 2019 没记错的话还在 stage 2 |
4 qdwang Dec 5, 2019 via iPhone 这种功能其实和报错一样,除非你确实需要用到 undefined |
5 murmur Dec 5, 2019 已经用第三方组件访问很深的 object 了,除了性能会有丁点影响,不觉得很心动 |
6 hua123s Dec 5, 2019 data&&data.user&&data.user.address&&data.user.address.street 其实这样写更美观 (捂脸) |
7 Robbbbbb OP @l1nyanm1ng 好的,谢谢,我去试一下 |
8 bnm965321 Dec 5, 2019 @l1nyanm1ng ts3.7 已经支持了 |
10 LG3xFA6kpn88HxEW Dec 5, 2019 不介意的话用 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" |
11 rioshikelong121 Dec 5, 2019 用 lodash 规避即可。 这个语法形式看着和.net 的挺像。 |
12 virtual2019 Dec 5, 2019 via iPhone 最新的 chrome dev 已经支持了 |
13 zhixuanziben Dec 5, 2019 lodash.get 可以替代这个,或者就直接上 ts3.7 |
14 a4854857 Dec 5, 2019 lodash 在使用 vue 的时候写在 html 模板就不那么好看了...求支招 |
15 weixiangzhe Dec 5, 2019 还是用 lodash 的 get 吧 |
16 molvqingtai Dec 6, 2019 via Android babel |
17 weixiangzhe Dec 6, 2019 via Android 这东西不靠谱 对于 a.b.c 后台经常返回 a 为 null, 然后又崩了 |
18 Pastsong Dec 6, 2019 基本上已经进 ES2020 标准了,什么时候实装要看各引擎厂商 |
19 vipcc Dec 6, 2019 via Android C#已经支持 |
21 fernandoxu Dec 6, 2019 @rioshikelong121 应该就是从 c#抄来的 |
22 releaseme Dec 6, 2019 @l1nyanm1ng js 里面也有 ?? 了,https://github.com/tc39/proposal-nullish-coalescing 结合 Optional Chaining 初步能达到 lodash.get 的功能,其实我觉得还是 lodash.get 好用(逃 |
23 imhxc Dec 6, 2019 “实装” 啥意思? |
24 pandaii Dec 6, 2019 貌似 angular 还是 coffee 很早就有了,确实很好用 |
25 AV1 Dec 6, 2019 @releaseme @l1nyanm1ng JS 的??跟_.et 的第三个参数不能等同,这个需要注意. ({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 |
26 free9fw Dec 6, 2019 我自己 polyfill 了一个自用 |
27 onfuns Dec 6, 2019 es6 的结构可以啊,有点遗憾的只能是 undefined |
28 liajoy Dec 6, 2019 装 @babel/plugin-proposal-optional-chaining 是可以的 但是这玩意儿现在的开发体验不好,VSCode 的 TS 检查不支持,总是会提示错误 除非把 TS 检查关了,直接走 eslint 来做代码检查 |
29 weixiangzhe Dec 6, 2019 via Android @liajoy ts 有 a!.b!.c |
30 duan602728596 Dec 6, 2019 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 语法了 |
31 liajoy Dec 6, 2019 @weixiangzhe a!.b!.c 是 non-null assertion operator,和 optional chaining 不太一样 |
32 releaseme Dec 6, 2019 @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 |
33 luchenwei9266 Dec 6, 2019 Angular 表示早已实装.... |
34 jigi330 Dec 7, 2019 使用`Typescript 3.7`的 1 个月前已经用上了 |