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.name) // 敲代码
// console.log(user.hobbies.name) // Uncaught TypeError: Cannot read property 'name' of undefined
console.log(user.hobbies?.name) // undefined
console.log(user.hobbies1?.?.name) // undefined和 ?? 搭配使用：
const obj = {
name: "小明",
};
const result = obj?.name1 ?? "大明";
console.log(result); // 大明
文档来源：51CTO技术博客https://blog.51cto.com/u_15301829/3068374
页:
[1]