ES6链判断运算符（?.）用法理解

JavaScript在实际编程中，如果读取对象或者数组内部的某个属性，往往需要判断一下属性的上层对象是否存在。
比如：后端返回的数据时，前端要对其进行判空操作，那么当嵌套属性比较多：

if(data && data.obj && data.obj.name) {
    this.userName = data.obj.name;
}

链判断运算符?.允许读取位于对象链深处的属性的值，而不必明确验证链中的每一个引用是否有效。

?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空或者undefined的情况下不会引起语法错误，?.表达式短路返回值是undefined

举例：一个常见赋值语句，想取到second这一层，得先确定obj.first存在

let nestedProp = obj.first && obj.first.second;

如果用链式运算符语句：在访问 obj.first.second 之前，先隐式的检查并确定 obj.first 既不是 null 也不是 undefined（无法判断为空的情况，魏空则返回空值）。如果 obj.first 是 null 或 undefined ，表达式将会短路计算直接返回 undefined。
以上表达式可以修改为：

let nestedProp = obj.first?.second;

例二：

let message={
  body:{
     user:{
          firstName:''
     }
  }
}
// 错误的写法;因为这message.body这个值可能没有，会导致报错
const  firstName = message.body.user.firstName || 'default';
// 正确的写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

//使用链式运算符
let myDefault= message?.body?.user?.firstName || '默认值';
/**
 * 上面代码中，如果message是null或undefined，
 * 或者message.body是null或undefined，
 * 或者message.body.user是null或undefined，
 * 或者message.body.user.firstName是null或undefined.
 * 就会返回--默认值。
 * */

链判断运算符（?.）==>判断对象是否有某个方法
?.运算符，直接在链式调用的时候判断左侧的对象是否为null或undefined，
如果是的，就不再往下运算，而是返回undefined，否则继续往下运算。

?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧值，否则返回左侧值。

 this.urlParams?.businessType ?? '1088',  
/*如果this.urlParams存在则取this.urlParams.businessType
否则判断this.urlParams.businessType 是否存在，
存在则取this.urlParams.businessType
不存在则取 默认值1088
*/

两者对比：
①访问不存在的属性：

console.log(obj.address.city);
// Uncaught TypeError: Cannot read property 'city' of undefined
 
console.log(obj?.address?.city);
// undefined

②访问不存在的方法：

console.log(obj.fun());
// TypeError: obj.fun is not a function
 
console.log(obj.fun?.());
// undefined

③访问数组：

let arr = [
    {name: 'zhangsan',age: "18"},
    {name: 'zlisi',age: "22"},
    {name: 'wangwu',age: "34"},
]
 
console.log(arr[0].name);  // zhangsan 
console.log(arr[4].name);  // Cannot read property 'name' of undefined
console.log(arr?.[4]?.name);  // undefined