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); // 大明