回顾下可选链操做符(?.)

背景

今天又被 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 看文档吧。

今天就这么多， 但愿对你们有所启发。