可选链(Optional chaining)新特性

前言

相信大部分开发前端的的码农们都会遇到下面一个问题，在遍历一个深层的树状结构数据时，总要去判断该中间节点的数据是否存在，之后再去取值或者对应的操作，最常见的场景就是在对接后端的api了，假设现在有这么一个api返回obj.

let person = {
    name: 'a',
    owner: {
        token: '54163sdf',
        permission: {
            usecar: true
        }
    }
},

let usecar = person.owner.permission.usecar()

我们需要取到person下面的owner下面的permission权限中用车权限usecar，上面的代码是我们大部分时候的做法，问题来了，我们怎么能够保证对象的中间节点数据都存在的呢，保不齐就是一个error.

常规办法

大部分时候我们的做法是判断取值或者引入带三方库像lodash等

if (person && person.owner && person.owner.permission) {
    let usecar = person.owner.permission.usecar, 
}
_.get(person, 'owner.permission.usecar');

上面方法也能够解决对应的问题，但不是本文讨论的问题，重点在下面。

应运而生

可选链(Optionalchaining)，在此背景下，目前已经进入了草案stage2阶段，相信很快就会大规模使用了，它使我们能检查一个对象上面的某属性是否为null或者undefined，如果是在则返回undefined，而不会报错。

// 使用示例
let usecar = person?.owner?.permission?.usecar ?? true;

有没有很酷，再也不用为了解决容错而写过多重复代码了，简单说下工作原理, 操作符检查 ?. 会检查操作符左边的值是否为 null 或 undefined。如果是，这个表达式就终止然后返回 undefined。否则，这个表达式继续执行检查通过! 另外配合stage2中的另一新特性 Nullish coalescing operator（??运算符），我们可以很方便的处理类似取值默认值的情况。

语法

// Optional Chaining 的语法有三种使用场景：

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

至于为什么语法不是 obj?prop，这种简洁一点的表达方式，在 FAQ 中有提到这个例子：

obj?[expr].filter(fun):0 引擎难以判断 obj?[expr] 是 Optional Chaning，亦或这是一个普通的三元运算语句.

详细对于该提议（Optional Chaining）的分析，推荐阅读下面这篇文章：可选链草案分析

使用问题

因为现在还是提案，浏览器还没有很好的支持，现在想在项目中使用是不可能的，不过总有大牛默默的帮我们铺平了道路，对应的babel插件已经存在， babel-plugin-proposal-optional-chaining, 下面我们简单看看该插件转义后的代码时啥样的?

const babel = require('@babel/core');

const code = 'const obj = {}; const baz = obj?.foo?.foo1';

const output = babel.transformSync(code, {
  plugins: ["@babel/plugin-proposal-optional-chaining"],
});

console.log(output.code);

下面是编译后的代码：

var _obj$foo;

const obj = {};
const baz = obj === null || obj === void 0 ? void 0 : (_obj$foo = obj.foo) === null || _obj$foo === void 0 ? void 0 : _obj$foo.foo1;

这样看上去是不是可以更好的理解该特性了，注意: 该bebel插件并不支持Nullish coalescing operator（?? 运算符）。