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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1716 天前的主题，其中的信息可能已经有所发展或是发生改变。

举例
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 进行页面渲染时的&&或者?:

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

106 条回复 • 2020-04-17 19:57:29 +08:00

1 2

❮

❯

Flourite

2020-04-16 14:32:01 +08:00

这语法在其他语言也不是很罕见的，比如 swift

asAnotherJack

2020-04-16 14:33:19 +08:00

kotlin 也有这种语法

mercury233

2020-04-16 14:33:51 +08:00

可空类型，不算冷门

murmur

2020-04-16 14:34:14 +08:00

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

cmdOptionKana

2020-04-16 14:34:26 +08:00

现在主流语言是天下语法一大抄，越来越趋同了。

skies457

2020-04-16 14:35:11 +08:00

Optional Chaining, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

devwolf

2020-04-16 14:35:50 +08:00

感谢楼上的各位解疑，原来是其他语言已经存在的语法，get 了

Lin0936

2020-04-16 14:36:43 +08:00

最近在 kotlin 里写这个都写吐了. 之前 swift 的项目里也用到很多.

yaphets666

2020-04-16 14:38:13 +08:00

我写了一年多 js 也不知道这个...我是不是太菜了

crs0910

2020-04-16 14:38:48 +08:00

你还可以使用 ?? 来代替 ||，避免需要判断值是不是 0 这种情况
关键词：Nullish Coalescing

vivipure

2020-04-16 14:39:15 +08:00

dart 也有。这是 ES2020 的新语法，挺好用的，不用在写什么 a && a.b 之类的了。

aaronlam

2020-04-16 14:39:45 +08:00

刚开始看到时，我也是很震惊的。
但是实话实说，这个语法的确很实用，不对吗？

littleylv

2020-04-16 14:40:51 +08:00

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

oneisall8955

2020-04-16 14:42:24 +08:00 via Android

kotlin 里面有，thymeleaf 模板写对象判断非空也是用这里的语法

islxyqwe

2020-04-16 14:49:02 +08:00

新版本 ts 提前支持的 Optional Chaining 等 ES2020 的新语法拉

liuy1994g

2020-04-16 14:55:16 +08:00 via Android

es 里还在提案吧

noobma

2020-04-16 14:56:09 +08:00

关注 ts 的话应该不会觉得这个写法冷门😂

Justin13

2020-04-16 14:59:15 +08:00 via Android

建议关注 ECMA262 repo

luob

2020-04-16 15:03:21 +08:00

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

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

crz

2020-04-16 15:03:21 +08:00

主要是新，冷门应该不至于，毕竟很实用

g00001

2020-04-16 15:05:01 +08:00

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

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

baozijun

2020-04-16 15:09:40 +08:00

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.

sarlanori

2020-04-16 15:15:10 +08:00

C#也有这个语法了

murmur

2020-04-16 15:16:53 +08:00

@luob 浏览器端不敢瞎 babel，比不了后端可以自己决定版本

xianxiaobo

2020-04-16 15:26:15 +08:00

有意思，学到了

yhxx

2020-04-16 15:28:33 +08:00

@liuy1994g 已经进 stage4 了

jadehare

2020-04-16 15:31:43 +08:00

ts 有插件会自动不上。。虽然我自己写还是 if 判断一下

zmqking

2020-04-16 15:35:08 +08:00

c# 里面也有！

9ki

2020-04-16 15:36:57 +08:00

要多想

Lax

2020-04-16 15:37:53 +08:00

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

goodboy95

2020-04-16 15:38:05 +08:00

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

yolee

2020-04-16 15:51:37 +08:00

c# 也是用这个判断是否为空的

lower

2020-04-16 15:53:45 +08:00

语法糖

Veneris

2020-04-16 15:55:28 +08:00

dart 也有

no1xsyzy

2020-04-16 15:55:38 +08:00

https://caniuse.com/#feat=mdn-javascript_operators_optional_chaining
太超前了，FF 和 CR 各只过了两个版本，过 babel 可行（ angular 可以用大概就是 babel 的原因？）
早前 coffee 就看到了

lithbitren

2020-04-16 15:55:49 +08:00

?? 和 || 有啥区别啊

liukangxu

2020-04-16 16:02:05 +08:00

看来 C#还是有人用的。。。

apeople

2020-04-16 16:05:42 +08:00

angular 也只是能在模板中使用吧，要想在 ts 中使用还是得配置 babel 插件。

DivineRapierH

2020-04-16 16:07:40 +08:00 via iPhone

@Lax #30 这种我一直是用 lodash 的 get 一把梭

Removable

2020-04-16 16:07:57 +08:00

C#里我经常这么用，比判断==null 方便多了

redam

2020-04-16 16:08:00 +08:00

@luob 啊，老哥一般是在哪里了解这些新内容的？

devwolf

2020-04-16 16:09:24 +08:00

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

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

lithbitren

2020-04-16 16:13:49 +08:00

@devwolf 蟹蟹，MDN 常看常新啊

Ritter

2020-04-16 16:35:34 +08:00

666

gromit1337

2020-04-16 16:37:56 +08:00

@vivipure #11 对对

iugo

2020-04-16 16:44:37 +08:00

VS Code + TypeScript 会给我强推这种写法.

iugo

2020-04-16 16:46:38 +08:00

tc39 还是要订阅一下的: https://github.com/tc39/proposal-optional-chaining https://github.com/tc39/proposals/blob/master/finished-proposals.md

iugo

2020-04-16 16:48:23 +08:00

推一下前两天我们关于 nullish coalescing operator post: https://zsqk.github.io/news/2020-04-08-nullish-coalescing-operator.html

klgd

2020-04-16 16:54:40 +08:00

上次遇见了一次，搜了半天才知道是干什么的
还有`!!`

ZZITE

2020-04-16 17:07:47 +08:00

Optional Chaining
去年写的 ts 项目就在用了，在 react 项目中很舒服。

lneoi

2020-04-16 17:10:46 +08:00

这是新语法啦，很实用的

AlynxZhou

2020-04-16 17:11:51 +08:00

看起来楼主没写过 coffeescript 啊，coffeescript 里面有这个问号运算符

jtwor

2020-04-16 17:13:36 +08:00

c# 空运算

Rwing

2020-04-16 17:14:32 +08:00

很棒的语法啊，c#首创的吧？

luzemin

2020-04-16 17:20:43 +08:00

C#的语法糖

est

2020-04-16 17:23:27 +08:00

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

xuchdeid

2020-04-16 17:28:35 +08:00

TypeScript 啊。。。

IllBeBack

2020-04-16 17:30:15 +08:00

相当于 Ruby 的单身狗运算符 a&.a

ruby-china.org/topics/30415

ershierdu

2020-04-16 17:42:25 +08:00

学 swift 的时候感觉这个有点绕，项目做完后不再写 swift 就忘了

wszgrcy

2020-04-16 17:55:16 +08:00 via Android

ts 3.7 的语法吧

mrleft

2020-04-16 18:03:06 +08:00

给你看个能飞升的
https://react-course.magicfun.ai/css/styled-components-how.html

g00001

2020-04-16 18:03:18 +08:00

c# 6.0 （ 2015 年）才有 Null 条件运算符，应当是比较晚了。

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

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

jin7

2020-04-16 18:10:10 +08:00

php 早就有了

ansenJ

2020-04-16 18:26:25 +08:00

ES7+后的新语法我知道有但是不知道在哪个版本里

optional

2020-04-16 18:41:46 +08:00 via iPhone

js 生态就要经常上来看看 tc39，ts 可以经常看看 roadmap

ccyu220

2020-04-16 18:45:08 +08:00

除了 ts , 暂时还不敢用。

g00001

2020-04-16 18:45:17 +08:00

PHP 就更晚了，PHP 7 才有 $d = $a->$b->$c ?? 'DEFAULT' 的写法，不是很简洁。

chouchoui

2020-04-16 18:48:04 +08:00 via iPhone

C#基本操作，ts 也有

xrr2016

2020-04-16 18:50:37 +08:00

Dart 里面经常用...还有 ?? 语法 😝

Chingim

2020-04-16 18:53:42 +08:00 via Android

多关注 tc39

en20

2020-04-16 19:00:49 +08:00 via iPhone

最近写 flutter，看别人的库经常这种语法

overflow99

2020-04-16 19:13:54 +08:00

很有用学习了

mingtianjiayou

2020-04-16 19:53:45 +08:00

新语法哈哈

nekochyan

2020-04-16 19:59:11 +08:00

没记错的话是 es7 新语法吧，一般情况下不敢用，怕不支持😄

shenyu1996

2020-04-16 20:11:43 +08:00

最近新开项目下意识在使用 ?. ... 这些语法
说真的能少掉好多头发少些好多代码

xg4

2020-04-16 20:12:59 +08:00

@nekochyan 已经纳入标准，可以用 babel 进行兼容处理

shenyu1996

2020-04-16 20:15:32 +08:00

```
{
name: 'aaa',
...(true && {age: 10})
}
```

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

Felldeadbird

2020-04-16 20:36:29 +08:00

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

cnit

2020-04-16 20:53:49 +08:00

thymeleaf 里面经常会用到

cbais7890

2020-04-16 20:57:45 +08:00

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

LukeChien

2020-04-16 20:58:27 +08:00 via Android

现在很常见了，以前在模板引擎语法里很常见

yxcoder

2020-04-16 21:06:01 +08:00

因为 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