背景

明天又被 QA 找: 这个页面昨天还好好的, 明天就白屏了, 是不是你代码有问题啊, 连忙看看。

下来一看，找到了起因：

本来 pickup, dropoff 两个字段没有数据的话，应该返回 {}, 后果当初pickup 字段返回了null, 而咱们取值的时候，也没对这个中央做进攻。

list: openApiOrderInfo.pickup.address_list,

后果就是：脚本报错，页面不可用。

解决起来也很简略，要么给个 默认值，要么应用 ?. 做一层进攻。

改完再试一下，就 OK 了，页面恢复正常。

上面咱们就说一下这个 ?.

明天的次要内容：

• 什么是可选链操作符(?.)
• 如何启用这个性能
• 可选链操作符(?.) 是如何工作的
• Heny公布的相干些材料
• 总结

注释语种

可选链操作符(?.)，大家都很相熟了，这里再简略回顾一下。

什么是可选链操作符(?.)

可选链操作符 (?.) 容许读取位于连贯对象链深处的属性的值，而不用明确验证链中的每个援用是否无效。

比方，思考一个存在嵌套构造的对象 obj。不应用可选链的话，查找一个深度嵌套的子属性时，须要验证之间的援用，例如：

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

为了防止报错，在拜访 obj.first.second 之前，要保障 obj.first 的值既不是 null，也不是 undefined。

如果只是间接拜访 obj.first.second，而不对 obj.first 进行校验，则有可能抛出谬误。

有了可选链操作符（?.），在拜访 obj.first.second 之前，不再须要明确地校验 obj.first 的状态，再并用短路计算获取最终后果：

let nestedProp = obj.first?.second;

这等价于以下表达式，但实际上没有创立长期变量：

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

?. 操作符的性能相似于 . 链式操作符，不同之处在于：

在援用为空 (nullish) (null 或者 undefined) 的状况下 不会引起谬误，该表达式短路返回值是: undefined。

与函数调用一起应用时，如果给定的函数不存在，则返回 undefined。

当尝试拜访 可能不存在的对象属性 时，应用 可选链操作符 将会使表达式 更短、更扼要。

有两点须要咱们注意：

1. 如果存在一个属性名且不是函数, 应用 ?. 依然会产生一个 TypeError 异样 (x.y is not a function).

let result = someInterface.customMethod?.();

如果 someInterface 本身是 null 或者 undefined，异样 TypeError 仍会被抛出。

如果你心愿容许 someInterface 也为 null 或者 undefined，那么你须要像这样写 someInterface?.customMethod?.()

2. 可选链 不能用于赋值

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

如何启用这个性能

// install
npm install --save-dev @babel/plugin-proposal-optional-chaining

// babel config
{
 "plugins": [
    "@babel/plugin-proposal-optional-chaining" // 可选链
    "@babel/plugin-proposal-nullish-coalescing-operator", // 双问号
  ]
}

可选链操作符(?.) 是如何工作的

const a = {b: 1};

console.log(a?.b);

会被转换成：

const a = {b: 1};

console.log(a === null ? void 0 : a.b);

如果层级更深，会创立长期变量用于记录：

const a = {
  b: {
    c: 1,
    d: 2,
  }
};

console.log(a?.b?.c)

会被转换成：

var _a$b;

const a = {
  b: {
    c: 1,
    d: 2
  }
};
console.log(
  a === null || a === void 0
    ? void 0 
    : (_a$b = a.b) === null || _a$b === void 0
      ? void 0
      : _a$b.c
);

Heny公布的相干些材料

Heny 目前是 babel 我的项目的负责人，之前发过一片介绍以后 babel 窘境的文章。

上图推文链接：https://twitter.com/left_pad/…

感兴趣的能够去看看。

总结

?. 应用起来是十分不便的, 但如果用的不好，也会暗藏本应该裸露进去的问题。

所以, 应用的时候肯定要分明本人在做什么。

?. 还有个小兄弟叫 空值合并运算符(??), 这里就不说了，去 MDN 看文档吧。

明天就这么多，心愿对大家有所启发。