可选链plugin-proposal-optional-chaining的使用
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运行完的输出代码：
测试代码编译后代码
发表评论 (审核通过后显示评论)：