链接操作符目前在第三阶段中， 2017年7月TC39委员会就已经开始讨论了，如今过去2年，马上就面世了。

概述

在寻找对象树结构深处的属性时，通常需要检查中间节点是否存在：

const street = user.address && user.address.street;

此外，许多API返回一个对象或null/undefined ,并且可能只想在结果不为null时从结果中提取属性：

const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined

可选的链接操作符允许开发人员处理许多这样的情况，而不必重复它们自己和/或在临时变量中分配中间结果：

const street = user.address?.street
const fooValue = myForm.querySelector('input[name=foo]')?.value

上面的代码可理解为：如果左侧为 null或undefined 则返回 undefined， 否则返回右侧求值结果。

语法

/**
 * 可选静态属性访问
 * 等价于  obj == null ? undefined : obj.prop
 */
obj?.prop

/**
 * 可选动态属性访问
 * 等价于  obj == null ? undefined : obj[expr]
 */
obj?.[expr]

/**
 * 可选函数或方法调用
 * 等价于  func == null ? undefined : func()
 */
func?.()

配合 ?? 操作符

有时候我们并不想要 undefined 作为结果，那么可以配合 ?? 操作符：

const street = user.address?.street ?? 'street'
const fooValue = document.querySelector('input[name=foo]')?.value ?? 'fooValue'

总结

链接操作符 可以减少代码量和提高代码健壮，习惯就好。 目前babel已经实现，不必等到浏览器实现再用，早用早享受。

转换前

const street = user.address?.street

babel转换后

"use strict";

var _user$address;

var street = (_user$address = user.address) === null || _user$address === void 0 ? void 0 : _user$address.street;