ES6+ 可选链操作符
在 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
。这样做虽然能保证程序的健壮性,但当嵌套的对象很深时,则要对每一层进行验证,这样不利于阅读,而且容易出现程序上的。
针对上面的场景, 最新的版本给出了它的案 —— 可选链操作符。我们可以直接在浏览器的控制台中进行测试,那什么是可选链操作符呢?本节我们来学习这个 ES6 的新语法。
可选链操作符使用 ?.
来表示,可以判断操作符之前是否有效,从而链式读取对象的或返回 undefined
。
作用与 .
操作符类似。不同的是 ?.
如果对象链上的引用是 null
或者 undefined
时, .
操作符会像前言中的例子抛出,而 ?.
操作符则会按照短路计算的方式进行处理,返回 undefined
。可选链操作符也可用于,如果操作符前的不存在,也将会返回 undefined
。下面我们来看它的使用语法:
语法使用:
obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
参数解释:
实例
var user = {
name: 'Kira',
address: {
city: 'beijing',
other: {}
}
}
console.log(user?.name); // Kira
a?.b); // undefined
console.log(user?.address?.city); // beijing
console.log(user?.address?.other?.a?.b); // undefined
上面的可以看出,使用的方式很简单,在确保上值是有效时才会去下面的,避免程序报错。
对象的引用或可能是 undefined
或 null
时,可选链操作符提供了一种来简化被连接对象的值访问。
当使用方括号与名的形式来访问时,你也可以使用可选链操作符:
let firstName = obj?.['first' + 'Name'];
当尝试可能不存在的时也可以使用可选链。这将是很有帮助的。当时如果被的不存在,使用可选链可以使表达式返回 undefined
而不是抛出异常。
var person = {}
var name = person.getName?.();
注意:如果名不是也会报错,可选链只会判断是否有效,而不能判断的类型。
var person = {getName: ''}
var name = person.getName?.();
// Uncaught TypeError: person.getName is not a function
可选链是取值操作时所用的安全,不能使用在赋值操作上。
let obj = {};
obj?.name = 'imooc'; // Uncaught Error: Invalid left-hand side in assignment
上面的第 2 行使用可选链进行赋值操作,控制台会报语法,赋值的左侧是无效的。
可选链也是可以使用在数组取值的前置验证的。
var arr = []
let item = arr?.[];
本节学习了 ES6 中新增的可选链语法,它提供了一种来简化被连接对象的值访问,保证访问数据的安全性。它可以用于对象、数组、中。这个语法很有用,在项目中使用可以达到事半功倍的。