31. ES6+ 可选链操作符

1. 前言

在 ES5 中对于安全地访问对象的深嵌套属性时,首先检查它的上一个属性是否存在,然后才能获取属性的值,否则就会报错:

var obj = {}
console.log(obj.a)		// undefined
console.log(obj.a.b)	// Uncaught TypeError: Cannot read property 'b' of undefined

上面的代码中,obj 是一个对象,在获取 obj 对象的属性 a 时,属性 a 没有被定义所以返回 undefined,第 3 行获取 obj 对象 a 下的 b,由于 obj 上没有 a 属性,再获取 a 上的 b 属性就会报错。一般这样的情况,在程序中需要做前置验证,大部分情况会借助 && 来完成。

var obj = {}
var b = obj.a && obj.a.b
console.log(b)	// undefined

上面的代码中第 2 行首先会判断 obj.a 的值,如果不为空则继续执行 obj.a.b 否则返回 undefined。这样做虽然能保证程序的健壮性,但当嵌套的对象很深时,则要对每一层进行验证,这样不利于阅读,而且容易出现程序上的错误。

针对上面的场景,ES2020 最新的版本给出了它的解决方案 —— 可选链操作符?.。我们可以直接在浏览器的控制台中进行测试,那什么是可选链操作符呢?本节我们来学习这个 ES6 的新语法。

2. 方法详情

可选链操作符使用 ?. 来表示,可以判断操作符之前属性是否有效,从而链式读取对象的属性或返回 undefined 。

作用与 . 操作符类似。不同的是 ?. 如果对象链上的引用是 null 或者 undefined 时, . 操作符会像前言中的例子抛出一个错误,而 ?. 操作符则会按照短路计算的方式进行处理,返回 undefined。可选链操作符也可用于函数调用,如果操作符前的函数不存在,也将会返回 undefined。下面我们来看它的使用语法:

2.1 基本语法

语法使用:

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

参数解释:

参数 描述
prop 对象上的属性
expr 对象上的属性可以是一个表达式
index 对数组使用时,可以接数组的位置
args 对函数使用时,可以接收传入的参数

实例:

var user = {
  name: 'mybj',
  address: {
    city: 'beijing',
    other: {}
  }
}
console.log(user?.name);	// mybj
console.log(a?.b);	// undefined
console.log(user?.address?.city);		// beijing
console.log(user?.address?.other?.a?.b);	// undefined

上面的代码可以看出,使用的方式很简单,在确保上一个值是有效时才会去获取下面的属性,避免程序报错。

对象的引用或函数可能是 undefined 或 null 时,可选链操作符提供了一种方法来简化被连接对象的值访问。

3. 使用场景

3.1 可选链和表达式

当使用方括号与属性名的形式来访问属性时,你也可以使用可选链操作符:

let firstName = obj?.['first' + 'Name'];

3.2 可选链与函数调用

当尝试调用一个可能不存在的方法时也可以使用可选链。这将是很有帮助的。当函数调用时如果被调用的方法不存在,使用可选链可以使表达式自动返回 undefined 而不是抛出一个异常。

var person = {}
var name = person.getName?.();

注意:如果属性名不是函数也会报错,可选链只会判断属性是否有效,而不能判断属性的类型。

var person = {getName: ''}
var name = person.getName?.();
// Uncaught TypeError: person.getName is not a function

3.3 可选链不能用于赋值

可选链是取值操作时所用的安全方法,不能使用在赋值操作上。

let obj = {};
obj?.name = 'xiaohong';	// Uncaught SyntaxError: Invalid left-hand side in assignment

上面的代码第 2 行使用可选链进行赋值操作,控制台会报语法错误,赋值的左侧是无效的。

3.4 可选链访问数组元素

可选链也是可以使用在数组取值的前置验证的。

var arr = []
let item = arr?.[5];

4. 小结

本节学习了 ES6 中新增的可选链语法,它提供了一种方法来简化被连接对象的值访问,保证访问数据的安全性。它可以用于对象、数组、函数中。这个语法很有用,在项目中使用可以达到事半功倍的效果。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 31. ES6+ 可选链操作符

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们