请教一下一个使我震惊的 js 语法 ?.(没错,看起来很像三目但却不是:而是.)

举例
let a = {a:\”1\”,b:\”2\”}
console.log(a?.a)

契机:另一个组的同事在一个 angular 项目里发现了这个语法的使用,
通过关键字查了一下也就这么个 csdn 的结果
《 angular 中的 ? 和 !》 https://blog.csdn.net/weixin_30908941/article/details/95594290

里面除了交代?可以判断前面的变量是否为 null 或 undefined 再执行后面,还有个!判断后面键所对应的值是否为 null 或 undefined,不过没有成功在 js 里再现这个!。

就我个人在网上的搜索结果来看,感觉这个?.的写法比!!还要冷门,用途的效果上个人感觉类似 react 写 jsx 进行页面渲染时的&&或者?:

当然,我自己的这些肤浅猜测总结也没什么营养,还请各位有了解或者感兴趣的分析一波这个?.吗

相关文章

99 thoughts on “请教一下一个使我震惊的 js 语法 ?.(没错,看起来很像三目但却不是:而是.)

  1. ?。这语法太超前了,虽然各种 objectPath 类组件早就在用,可以一次访问很深层的节点,不用一层层判空

  2. 写 swift 的时候经常这么写。现在的语言很多都开始互通有无了,都会相互借鉴对方的一些东西

  3. 写 js 的不都是天天跟着最新语法标准走吗,这种最近大半年都在谈的语法就算没用过,总不至于没听过吧……

    还是说现在前端已经足够成熟,大家都不学新内容了?

  4. 我觉得还是 aardio 中的直接下标更简洁好用,
    if( a[[b]] ){ } 不管 a 是什么都不会抛异常,不是对象返回 null,可以节省好多代码。

    比 swift,kotlin,js 什么的出现早多了,国产小语言也是有亮点的。

  5. Safe calls are useful in chains. For example, if Bob, an Employee, may be assigned to a Department (or not), that in turn may have another Employee as a department head, then to obtain the name of Bob’s department head (if any), we write the following:

    bob?.department?.head?.name
    Such a chain returns null if any of the properties in it is null.

  6. 为了减少对父元素的空置判定,尤其是很多个级别。
    a.b.c.d 这种,if(a) { if(a.b) { if(a.b.c) { a.b.c.d }}}},不想一级一级判断的时候就很方便了。

  7. 握草,刚刚试了一下,除了?.运算符之外,??运算符也被支持了!
    var a = {sa: 3, sb: 4};
    var b = null;
    console.log(a?.sa ?? 5); // 3
    console.log(b?.sa ?? 5); // 5

  8. @lithbitren
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
    摘录:
    由于 || 是一个布尔逻辑运算符,左侧的操作数会被强制转换成布尔值用于求值。任何假值( 0, ”,NaN,null,undefined )都不会被返回。这导致如果你使用 0,”或 NaN 作为有效值,就会出现不可预料的后果.
    空值合并操作符??可以避免这种陷阱,其只在第一个操作数为 null 或 undefined 时(而不是其它假值)返回第二个操作数。

    感谢#10 提供了拓展和线索

  9. ruby 里可以直接 inline 外挂一个 exception 更方便。不管是 . 挂了还是别的什么挂了都能正常执行。

  10. c# 6.0 ( 2015 年) 才有 Null 条件运算符,应当是比较晚了。

    国产小语言 aardio 在十多年前就有了类似的语法,不仅仅是对象,任何对象都可以 if( a[[b]] ){ } ,真正的有鸭子的声音就可以当鸭子用,说到偷懒这个事,我们还是行的。

    只能 null 对象,还是会有麻烦,如果是其他类型呢,还是要写判断,偷懒还是不够彻底这不行的。

  11. “`
    {
    name: ‘aaa’,
    …(true && {age: 10})
    }
    “`

    比如像这种神奇的写法 真的能让自己少掉好几根头发

  12. 我印象中 PHP7 也有这种语法。但是我还是喜欢用传统的:?判断为主。 太新的语法我怕其他人调式出错。就蒙蔽了。

  13. 可选链啊, 如果用过 Swift 肯定会觉得很熟悉
    实际上 a?.b 就等于 a && a.b 的意思, 防止对不存在的变量读取属性而产生异常
    在处理某些前后端交互的不稳定数据时相当舒服

  14. 因为 js 里面访问 undefined 或者 null 的成员会报错,所以如果调用很深,譬如这种,a.b.c.d.e.f,为了防止报错,要这么写

    a?a.b?a.b.c?a.b.c.d?a.b.c.d.e?a.b.c.d.e.f:null:null:null:null:null

    巨难看
    所以出了个语法糖

    a?.b?.c?.d?.e?.f

  15. C# 还有 ?? ??=

    a?.b 等同于 if(a == null) return null
    还有 a??0 等同于 if(a == null) return 0
    a??=0 等同于 if(a == null){ a = 0; return a;}

  16. 还好吧,flutter 早就有这个语法了,kotlin 也有类似的语法,简单来说就是简化判空操作的,js 听说要新加这个语法,当时跑了是还不能用的

  17. @yxcoder 您这个就算没有 ?. 语法,也可以不用 ?: 啊……
    用 ?: 是丑,但是直接
    a && a.b && a.b.c && a.b.c.d && a.b.c.d.e && a.b.c.d.e.f || null
    也稍微好看一些啊……
    (虽然还是 ?. 更香

  18. 我还写过 webpack 的实现,不过只是用了正则替换来判断,不是很完美。
    TC39 有关于可选链的解释。

  19. optional 更适合用来解包判空之类的。
    如果用来判断布尔的话是有歧义的,比如:if (a?.b == 0)或者 if(a?.b == false),到底是 a 为空还是 a 不为空 b 为 false 或者 b 为空

  20. 我写 C#,这玩意儿都写了好几年了,基本就是日常。。。。。
    学新语言的时候觉得没有 x?.x 还有 x??y 这种写法很别扭。。。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注