JavaScript - 链接操作符

发表于:2019-07-31

链接操作符目前在第三阶段中, 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

上面的代码可理解为:如果左侧为 nullundefined 则返回 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;
JavaScript