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 · 4960 次点击
    这是一个创建于 1799 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前看到一个新特性介绍,很心动 说是可以用?.来规避从 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 插件
    l1nyanm1ng
        2
    l1nyanm1ng  
       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 已经支持这个特性
    l1nyanm1ng
        10
    l1nyanm1ng  
       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 很早就有了,确实很好用
    DOLLOR
        25
    DOLLOR  
       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   ·   实用小工具   ·   5568 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 98ms · UTC 01:42 · PVG 09:42 · LAX 17:42 · JFK 20:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.