【ES6】可选链操作符和空值合并操作符（链式调用防报错非常使用）

可选链操作符 ?.

例子 a.b?.c?.d

可以在调用前先验证调用属性，若引用为空（null或undefined）则发生短路，不执行之后代码也不抛出异常，表达式返回undefined。

也可以和函数一起使用，若函数不存在，也不抛出异常，返回undefined。

一、使用场景：

在对象的..链式调用时，配合可选链操作符，以防链式调用中出现null或者undefined，抛出异常导致程序错误。

在渲染早于异步请求数据的场景里，报undefined，非常实用。

---

二、原理：

链式操作符的原理似乎 等同于在调用先用if()或者&&判断引用是否存在。

首先如果不用链式操作符,如果链式调用层级加深，代码冗长且无可读性

let result = obj.first && obj.first.second

使用链式操作符

let result = obj.first?.second

实际等价于

let temp = obj.first        //实际并没有创建temp这个变量
let result = ((temp === null || temp === undefined) ? undefined : temp.second);

---

三、其他一些场景（以上讨论均为可选链与对象）

1.可选链与函数调用

当你调用某个对象的api是否可用 let result = obj.functionApi?.()

2.处理可选的回调函数

// 常规写法
function callback(fn){
    if（fn）{
        fn.call(this);
    }
}
// 可选链写法
function callback(fn){
    fn?.call(this);
}

3.可选链与表达式

使用方括号访问非法标识符['na!me!'] let result = obj?.['na!'+'me!']
属性访问器有点号.和方阔括号[]两种

4.可选链访问数组

let arrayItem = arr?.[42];

5.可选链不能用于赋值

let obj ={}; 
obj?.property = 1; // Uncaught SyntaxError: Invalid left-hand side inassignment

---

四、空值合并操作符

若访问属性值不为空，则正常引用。
若访问属性值为空，则用缺省值代替空值。

let hero = {
  name: "paul",
  details: { gender:male, age: 82 }
};
let heroAddress = hero?.address ?? "祖国";
console.log(heroAddress );  // “祖国”

五、可选链操作符出现兼容问题

vue里无论在模板或者JS代码处书写可选链，均可以使用。且目前所有浏览器均已兼容，除了IE（IE6月15日停运）
但是uniapp里模板使用可选链仍然报错，uniapp只能在js代码中使用可选链。解决办法：uniapp中可以使用computed计算完后再展示到模板代码中即可。

若你遇到的框架完全不兼容可选链操作符，则需另外单独下babel转译包。

// 安装依赖  npm install  @babel/plugin-proposal-optional-chaining -S
// @babel/plugin-proposal-nullish-coalescing-operator -S
// 在babel.config.js中  的 plugins中添加 "@babel/plugin-proposal-optional-chaining"

module.exports = {
  plugins: [
    '@babel/plugin-proposal-optional-chaining',  //可选链 ?.
    '@babel/plugin-proposal-nullish-coalescing-operator'  //空值合并 ??
  ]
}