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

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

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

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

    34 回复  |  直到 2019-12-07 13:56:49 +08:00
    bnm965321
        1
    bnm965321   44 天前
    CRA3.3 已经支持

    其它情况需要自己设置 babel 插件
    l1nyanm1ng
        2
    l1nyanm1ng   44 天前   ♥ 1
    这个是可选链语法 optional chaining 吧,在 swift 和 kotlin 中都已经实装了,es 现在这个规范还在提案阶段,与其期待 es 将这个规范实装,不如期待 ts 赶紧上,不过用 babel 也可以预编译享受这个新特性,使用 @babel/plugin-proposal-optional-chaining
    shintendo
        3
    shintendo   44 天前
    没记错的话还在 stage 2
    qdwang
        4
    qdwang   44 天前 via iPhone
    这种功能其实和报错一样,除非你确实需要用到 undefined
    murmur
        5
    murmur   44 天前
    已经用第三方组件访问很深的 object 了,除了性能会有丁点影响,不觉得很心动
    hua123s
        6
    hua123s   44 天前   ♥ 3
    data&&data.user&&data.user.address&&data.user.address.street 其实这样写更美观 (捂脸)
    Robbbbbb
        7
    Robbbbbb   44 天前
    @l1nyanm1ng 好的,谢谢,我去试一下
    bnm965321
        8
    bnm965321   44 天前
    @l1nyanm1ng ts3.7 已经支持了
    bnm965321
        9
    bnm965321   44 天前
    @shintendo 已经进入 stage3,ts3.7 已经支持这个特性
    l1nyanm1ng
        10
    l1nyanm1ng   44 天前
    不介意的话用 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   44 天前
    用 lodash 规避即可。 这个语法形式看着和.net 的挺像。
    virtual2019
        12
    virtual2019   44 天前 via iPhone
    最新的 chrome dev 已经支持了
    zhixuanziben
        13
    zhixuanziben   44 天前
    lodash.get 可以替代这个,或者就直接上 ts3.7
    a4854857
        14
    a4854857   44 天前
    lodash 在使用 vue 的时候写在 html 模板就不那么好看了...求支招
    weixiangzhe
        15
    weixiangzhe   43 天前
    还是用 lodash 的 get 吧
    molvqingtai
        16
    molvqingtai   43 天前 via Android
    babel
    weixiangzhe
        17
    weixiangzhe   43 天前 via Android
    这东西不靠谱 对于 a.b.c 后台经常返回 a 为 null, 然后又崩了
    Pastsong
        18
    Pastsong   43 天前
    基本上已经进 ES2020 标准了,什么时候实装要看各引擎厂商
    vipcc
        19
    vipcc   43 天前 via Android
    C#已经支持
    releaseme
        20
    releaseme   43 天前
    @shintendo 昨天看推上一位 TC39 成员说 stage 4 了
    fernandoxu
        21
    fernandoxu   43 天前
    @rioshikelong121 应该就是从 c#抄来的
    releaseme
        22
    releaseme   43 天前
    @l1nyanm1ng js 里面也有 ?? 了,https://github.com/tc39/proposal-nullish-coalescing
    结合 Optional Chaining 初步能达到 lodash.get 的功能,其实我觉得还是 lodash.get 好用(逃
    imhxc
        23
    imhxc   43 天前   ♥ 1
    “实装” 啥意思?
    pandaii
        24
    pandaii   43 天前
    貌似 angular 还是 coffee 很早就有了,确实很好用
    DOLLOR
        25
    DOLLOR   43 天前   ♥ 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   43 天前
    我自己 polyfill 了一个自用
    onfuns
        27
    onfuns   43 天前
    es6 的结构可以啊,有点遗憾的只能是 undefined
    liajoy
        28
    liajoy   43 天前
    装 @babel/plugin-proposal-optional-chaining 是可以的
    但是这玩意儿现在的开发体验不好,VSCode 的 TS 检查不支持,总是会提示错误
    除非把 TS 检查关了,直接走 eslint 来做代码检查
    weixiangzhe
        29
    weixiangzhe   43 天前 via Android
    @liajoy ts 有 a!.b!.c
    duan602728596
        30
    duan602728596   43 天前
    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   43 天前
    @weixiangzhe a!.b!.c 是 non-null assertion operator,和 optional chaining 不太一样
    releaseme
        32
    releaseme   43 天前
    @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   43 天前
    Angular 表示早已实装....
    jigi330
        34
    jigi330   42 天前
    使用`Typescript 3.7`的 1 个月前已经用上了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2479 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 56ms · UTC 14:59 · PVG 22:59 · LAX 06:59 · JFK 09:59
    ♥ Do have faith in what you're doing.