通过babel配置使用可选链`?.`和双问号`??`

Others 2021-05-07 06:38:48 2021-05-07 06:38:48 1782 次浏览

什么是可选链

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
当访问多层对象属性(如o.a.b)时，如果属性a为空，则会报引用错误
为此我们不得不这么处理： 

const c = o.a && o.a.b ? o.a.b : undefined

有了可选链，就可以对一个为null或者undefined属性安全引用： 

const o = {} const tryA_B = o?.a?.b
console.log(tryA_B) // undefined

什么是双问号

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator 

value1 ?? value2

??在value1和value2之间，只有当value1为null或者 undefined时取value2，否则取value1（0,false,""被认为是有意义的，所以还是取value1） 

const o = {} const c_or_d = o.c ?? 'd' console.log(c_or_d) // 'd' console.log(0 ?? 1) // 0 console.log("" ?? "foo") // ""

等价于 

const c_or_d = (o.c === null || typeof o.c === "undefined") ? o.c : 'd'

如何使用

首先检查你的项目依赖中的babel版本，如果你的babel版本<7，那么很遗憾，你得先解决babel版本升级的问题。
如果是babel7以上的版本，可以添加以下2个devDependencies依赖：

@babel/plugin-proposal-optional-chaining // 可选链
@babel/plugin-proposal-nullish-coalescing-operator // 双问号

然后在.babelrc或者babel.config.js中这加入2个插件(plugins属性放在JSON顶层)： 

{ "plugins": [ "@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-optional-chaining" ] }

之后就可以愉快地使用了！

最简实践

为了检验插件是否真的有用，这里提供一个最小实践示例：
首先编写示例代码 index.js： 

var foo = {
    a: 1,
    zero: 0,
}


var fooA = foo.a;
var fooB = foo?.b;
var fooNilValue = foo?.nil?.value;


var fooDefault = foo.default ?? 'default value';
var fooZeroDefault = foo.zero ?? 'zero value';


console.log(fooA); // 1
console.log(fooB); // undefined
console.log(fooNilValue); // undefined
console.log(fooDefault); // default value
console.log(fooZeroDefault); // 0

项目根目录下初始化npm仓库 npm init，然后安装下列依赖(现在是2020年了，默认都是7以上的版本)：

npm i --save-dev @babel/cli @babel/core @babel/preset-env

项目根目录添加配置文件 babel.config.js ，不用加别的，可选链和双问号插件会根据你的语法自动转义： 

module.exports = { presets: [ "@babel/preset-env" ] } 
</div>
<p>
	执行编译命令：
</p>
<blockquote>
	<p>
		npx babel index.js -d dist
	</p>
</blockquote>
<p>
	构建完毕，在<code>./dist/index.js</code> 中看到生成的文件，说明编译成功：
</p>
<div class="_2Uzcx_">
	<button class="VJbwyy" type="button" aria-label="复制代码"><i aria-label="icon: copy" class="anticon anticon-copy"><svg viewbox="64 64 896 896" focusable="false" class="" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg></i></button> 

"use strict";

var _foo$nil, _foo$default, _foo$zero;

var foo = {
  a: 1,
  zero: 0
};
var fooA = foo.a;
var fooB = foo === null || foo === void 0 ? void 0 : foo.b;
var fooNilValue = foo === null || foo === void 0 ? void 0 : (_foo$nil = foo.nil) === null || _foo$nil === void 0 ? void 0 : _foo$nil.value;
var fooDefault = (_foo$default = foo["default"]) !== null && _foo$default !== void 0 ? _foo$default : 'default value';
var fooZeroDefault = (_foo$zero = foo.zero) !== null && _foo$zero !== void 0 ? _foo$zero : 'zero value';
console.log(fooA);
console.log(fooB);
console.log(fooNilValue);
console.log(fooDefault);
console.log(fooZeroDefault);

Links: 511