可选链plugin-proposal-optional-chai

1 传送门

https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining

2 安装

npm安装@babel/plugin-proposal-optional-chaining

3 babel配置

plugin-proposal-optional-chaining

4 使用方式举例

1）有个cell对象，

    let cell={
      pageIndex:1
    }

以前访问属性的时候通常会写成cell&&cell.pageIndex，用了这个编译器后可直接写为：

    cell?.pageIndex

2）react项目中接受组件传过来的方法时可以这么写：

    const {getValue}=this.props
    getValue && getValue()
    getValue?.()

3）数组在进行遍历前可以进行判断，避免数组为undefined/null报错：

        const arr=[1,2,3]
        arr?.map(item=>{
            //...
        })

主要是为了解决繁琐的深层次嵌套问题，属性和方法均可用，其他例子敬请查阅官网，文档很详细了。

5 编译后的代码

下面以第一个例子为例，看下编译后的代码。
测试代码：

const code = 'let cell={};const pageIndex=cell?.page';
const output = require("@babel/core").transformSync(code, {
    plugins: ["@babel/plugin-proposal-optional-chaining"]
});
console.log(output.code);

node运行完的输出代码：

测试代码编译后代码