Javascript 判断 undefined 的符号什么时候实装? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a Javascript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
Javascript 权威指南第 5 版
Closure: The Definitive Guide
Robbbbbb
V2EX    Javascript

Javascript 判断 undefined 的符号什么时候实装?

  •  
  •   Robbbbbb 2019-12-05 16:31:29 +08:00 5511 次点击
    这是一个创建于 2204 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    34 条回复    2019-12-07 13:56:49 +08:00
    bnm965321
        1
    bnm965321  
       2019-12-05 16:37:22 +08:00
    CRA3.3 已经支持

    其它情况需要自己设置 babel 插件
    LG3xFA6kpn88HxEW
        2
    LG3xFA6kpn88HxEW  
       2019-12-05 16:38:20 +08:00   1
    这个是可选链语法 optional chaining 吧,在 swift 和 kotlin 中都已经实装了,es 现在这个规范还在提案阶段,与其期待 es 将这个规范实装,不如期待 ts 赶紧上,不过用 babel 也可以预编译享受这个新特性,使用 @babel/plugin-proposal-optional-chaining
    shintendo
        3
    shintendo  
       2019-12-05 16:38:28 +08:00
    没记错的话还在 stage 2
    qdwang
        4
    qdwang  
       2019-12-05 16:40:06 +08:00 via iPhone
    这种功能其实和报错一样,除非你确实需要用到 undefined
    murmur
        5
    murmur  
       2019-12-05 16:42:15 +08:00
    已经用第三方组件访问很深的 object 了,除了性能会有丁点影响,不觉得很心动
    hua123s
        6
    hua123s  
       2019-12-05 16:42:46 +08:00   3
    data&&data.user&&data.user.address&&data.user.address.street 其实这样写更美观 (捂脸)
    Robbbbbb
        7
    Robbbbbb  
    OP
       2019-12-05 16:44:46 +08:00
    @l1nyanm1ng 好的,谢谢,我去试一下
    bnm965321
        8
    bnm965321  
       2019-12-05 16:45:26 +08:00
    @l1nyanm1ng ts3.7 已经支持了
    bnm965321
        9
    bnm965321  
       2019-12-05 16:45:45 +08:00
    @shintendo 已经进入 stage3,ts3.7 已经支持这个特性
    LG3xFA6kpn88HxEW
        10
    LG3xFA6kpn88HxEW  
       2019-12-05 16:46:52 +08:00
    不介意的话用 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
        11
    rioshikelong121  
       2019-12-05 17:09:09 +08:00
    用 lodash 规避即可。 这个语法形式看着和.net 的挺像。
    virtual2019
        12
    virtual2019  
       2019-12-05 17:25:18 +08:00 via iPhone
    最新的 chrome dev 已经支持了
    zhixuanziben
        13
    zhixuanziben  
       2019-12-05 20:10:53 +08:00
    lodash.get 可以替代这个,或者就直接上 ts3.7
    a4854857
        14
    a4854857  
       2019-12-05 20:26:55 +08:00
    lodash 在使用 vue 的时候写在 html 模板就不那么好看了...求支招
    weixiangzhe
        15
    weixiangzhe  
       2019-12-05 23:17:39 +08:00
    还是用 lodash 的 get 吧
    molvqingtai
        16
    molvqingtai  
       2019-12-06 01:19:17 +08:00 via Android
    babel
    weixiangzhe
        17
    weixiangzhe  
       2019-12-06 07:28:02 +08:00 via Android
    这东西不靠谱 对于 a.b.c 后台经常返回 a 为 null, 然后又崩了
    Pastsong
        18
    Pastsong  
       2019-12-06 08:11:27 +08:00
    基本上已经进 ES2020 标准了,什么时候实装要看各引擎厂商
    vipcc
        19
    vipcc  
       2019-12-06 09:07:07 +08:00 via Android
    C#已经支持
    releaseme
        20
    releaseme  
       2019-12-06 09:37:08 +08:00
    @shintendo 昨天看推上一位 TC39 成员说 stage 4 了
    fernandoxu
        21
    fernandoxu  
       2019-12-06 09:38:33 +08:00
    @rioshikelong121 应该就是从 c#抄来的
    releaseme
        22
    releaseme  
       2019-12-06 09:44:20 +08:00
    @l1nyanm1ng js 里面也有 ?? 了,https://github.com/tc39/proposal-nullish-coalescing
    结合 Optional Chaining 初步能达到 lodash.get 的功能,其实我觉得还是 lodash.get 好用(逃
    imhxc
        23
    imhxc  
       2019-12-06 09:48:03 +08:00   1
    “实装” 啥意思?
    pandaii
        24
    pandaii  
       2019-12-06 09:52:49 +08:00
    貌似 angular 还是 coffee 很早就有了,确实很好用
    AV1
        25
    AV1  
       2019-12-06 10:41:17 +08:00   1
    @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
        26
    free9fw  
       2019-12-06 10:59:02 +08:00
    我自己 polyfill 了一个自用
    onfuns
        27
    onfuns  
       2019-12-06 11:16:32 +08:00
    es6 的结构可以啊,有点遗憾的只能是 undefined
    liajoy
        28
    liajoy  
       2019-12-06 11:45:53 +08:00
    装 @babel/plugin-proposal-optional-chaining 是可以的
    但是这玩意儿现在的开发体验不好,VSCode 的 TS 检查不支持,总是会提示错误
    除非把 TS 检查关了,直接走 eslint 来做代码检查
    weixiangzhe
        29
    weixiangzhe  
       2019-12-06 12:18:06 +08:00 via Android
    @liajoy ts 有 a!.b!.c
    duan602728596
        30
    duan602728596  
       2019-12-06 12:53:17 +08:00
    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
        31
    liajoy  
       2019-12-06 14:18:09 +08:00
    @weixiangzhe a!.b!.c 是 non-null assertion operator,和 optional chaining 不太一样
    releaseme
        32
    releaseme  
       2019-12-06 16:17:00 +08:00
    @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
        33
    luchenwei9266  
       2019-12-06 16:42:02 +08:00
    Angular 表示早已实装....
    jigi330
        34
    jigi330  
       2019-12-07 13:56:49 +08:00
    使用`Typescript 3.7`的 1 个月前已经用上了
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     3438 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 04:29 PVG 12:29 LAX 20:29 JFK 23:29
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86