ES6链式判断运算符

在前端进行日常开发时，经常会遇到一种情况：需要用到的某个属性在接口返回的数据中可能不存在，如后端给前端返回

let resData = {
    res:{
        data:[
            {a:1},
            {a:2}
        ]
    }

在数据格式正确的情况下我们是可以resData.res.data获取到目标数组。

但要是后端没查到数据给前端返回 resData = {}空数组时，代码里直接写的resData.res.data逻辑就会报错Cannot read property data of undefined,指明错误原因是未在 undefined 中读取到data属性。

可选连运算符（ ?. ）

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

?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空或者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 temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

可选链用于函数调用

当尝试调用一个可能不存在的方法时也可以使用可选链。

函数调用时如果被调用方法不存在，使用可选链可以使表达式自动返回一个 undefined 而不是抛出一个异常。

let result = someInterface.customMethod?.();

可选链和动态表达式

let nestedProp = obj?.['prop' + 'Name'];

可选链访问数组元素

let arrayItem = arr?.[42];

注意：可选链不能用于赋值

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

和空值合并运算符一起使用

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

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”