ES2020可选链操作符(?.)
?. 的概念:
允许读取位于连接对象深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 操作符,不同之处在于,在引用为空的情况下不会引起错误,该表达式短路返回值是undefined。与函数一起使用时,如果给定的函数不存在,则返回undefined。
以上是MDN的解释:自己理解就是如果 ?. 左侧的值转布尔值为false,则返回undefined,如果为true,则继续往右执行。下面的案例给与理解这一点
比如从后台接口访问详细的用户信息:
const response = {
data: {
user: {
name: "小王",
},
},
};
为了在取出name的过程中程序不报错,
1、使用嵌套的三元表达式
const userName = response ? response.data ? response.data.user ? response.data.user.name : null : null : null;
2、使用 && 连接
const userName = response && response.data && response.data.user && response.data.user.name;
3、使用 ?.
const userName = response?.data?.user?.name;
最简洁的是第三种方式,只需要保证 !!response===true,这段代码就不会报错,取不到最后的name就会返回undefined
const user = { name: "小王同志", age: 18, homeaddress: { country: "中国", }, hobbies: [{ name: "敲代码" }, { name: "洗碗" }], getFirstName: function (data) { return data; }, }; console.log(user.homeaddress.country) // 中国 // console.log(user.homeaddress1.country) // Uncaught TypeError: Cannot read property 'country' of undefined console.log(user.homeaddress1?.country) // undefined console.log(user.getFirstName('123')) // '123' console.log(user.getFirstName?.(123)) // 123 console.log(user.getFirstName1?.(123)) // undefined console.log(user.hobbies[0].name) // 敲代码 // console.log(user.hobbies[3].name) // Uncaught TypeError: Cannot read property 'name' of undefined console.log(user.hobbies[3]?.name) // undefined console.log(user.hobbies1?.[3]?.name) // undefined
和 ?? 搭配使用:
const obj = { name: "小明", }; const result = obj?.name1 ?? "大明"; console.log(result); // 大明