JavaScript 判断 undefined 的符号什么时候实装？

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

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

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

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

undefined

特性

console

log

34 条回复 • 2019-12-07 13:56:49 +08:00

bnm965321

2019-12-05 16:37:22 +08:00

CRA3.3 已经支持

其它情况需要自己设置 babel 插件

l1nyanm1ng

2019-12-05 16:38:20 +08:00

这个是可选链语法 optional chaining 吧，在 swift 和 kotlin 中都已经实装了，es 现在这个规范还在提案阶段，与其期待 es 将这个规范实装，不如期待 ts 赶紧上，不过用 babel 也可以预编译享受这个新特性，使用 @babel/plugin-proposal-optional-chaining

shintendo

2019-12-05 16:38:28 +08:00

没记错的话还在 stage 2

qdwang

2019-12-05 16:40:06 +08:00 via iPhone

这种功能其实和报错一样，除非你确实需要用到 undefined

murmur

2019-12-05 16:42:15 +08:00

已经用第三方组件访问很深的 object 了，除了性能会有丁点影响，不觉得很心动

hua123s

2019-12-05 16:42:46 +08:00

data&&data.user&&data.user.address&&data.user.address.street 其实这样写更美观 (捂脸)

Robbbbbb

2019-12-05 16:44:46 +08:00

@l1nyanm1ng 好的，谢谢，我去试一下

bnm965321

2019-12-05 16:45:26 +08:00

@l1nyanm1ng ts3.7 已经支持了

bnm965321

2019-12-05 16:45:45 +08:00

@shintendo 已经进入 stage3，ts3.7 已经支持这个特性

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

2019-12-05 17:09:09 +08:00

用 lodash 规避即可。这个语法形式看着和.net 的挺像。

virtual2019

2019-12-05 17:25:18 +08:00 via iPhone

最新的 chrome dev 已经支持了

zhixuanziben

2019-12-05 20:10:53 +08:00

lodash.get 可以替代这个，或者就直接上 ts3.7

a4854857

2019-12-05 20:26:55 +08:00

lodash 在使用 vue 的时候写在 html 模板就不那么好看了...求支招

weixiangzhe

2019-12-05 23:17:39 +08:00

还是用 lodash 的 get 吧

molvqingtai

2019-12-06 01:19:17 +08:00 via Android

babel

weixiangzhe

2019-12-06 07:28:02 +08:00 via Android

这东西不靠谱对于 a.b.c 后台经常返回 a 为 null，然后又崩了

Pastsong

2019-12-06 08:11:27 +08:00

基本上已经进 ES2020 标准了，什么时候实装要看各引擎厂商

vipcc

2019-12-06 09:07:07 +08:00 via Android

C#已经支持

releaseme

2019-12-06 09:37:08 +08:00

@shintendo 昨天看推上一位 TC39 成员说 stage 4 了

fernandoxu

2019-12-06 09:38:33 +08:00

@rioshikelong121 应该就是从 c#抄来的

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

2019-12-06 09:48:03 +08:00

“实装” 啥意思？

pandaii

2019-12-06 09:52:49 +08:00

貌似 angular 还是 coffee 很早就有了，确实很好用

DOLLOR

2019-12-06 10:41:17 +08:00

@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

2019-12-06 10:59:02 +08:00

我自己 polyfill 了一个自用

onfuns

2019-12-06 11:16:32 +08:00

es6 的结构可以啊，有点遗憾的只能是 undefined

liajoy

2019-12-06 11:45:53 +08:00

装 @babel/plugin-proposal-optional-chaining 是可以的
但是这玩意儿现在的开发体验不好，VSCode 的 TS 检查不支持，总是会提示错误
除非把 TS 检查关了，直接走 eslint 来做代码检查

weixiangzhe

2019-12-06 12:18:06 +08:00 via Android

@liajoy ts 有 a!.b!.c

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

2019-12-06 14:18:09 +08:00

@weixiangzhe a!.b!.c 是 non-null assertion operator，和 optional chaining 不太一样

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

2019-12-06 16:42:02 +08:00

Angular 表示早已实装....

jigi330

2019-12-07 13:56:49 +08:00

使用`Typescript 3.7`的 1 个月前已经用上了