What is Optional Chaining
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
When accessing nested object properties (e.g., o.a.b), if property a is null, a reference error will be thrown.
For this, we had to handle it like this:
const c = o.a && o.a.b ? o.a.b : undefined With optional chaining, you can safely reference properties that are null or undefined:
const o = {} const tryA_B = o?.a?.b
console.log(tryA_B) // undefined What is Nullish Coalescing
value1 ?? value2
?? between value1 and value2, returns value2 only when value1 is null or undefined, otherwise returns value1 (0, false, "" are considered meaningful, so they still return value1).
const o = {} const c_or_d = o.c ?? 'd' console.log(c_or_d) // 'd' console.log(0 ?? 1) // 0 console.log("" ?? "foo") // "" Equivalent to:
const c_or_d = (o.c === null || typeof o.c === "undefined") ? o.c : 'd' How to Use
First, check the babel version in your project dependencies. If your babel version is <7, then unfortunately, you need to upgrade babel first.
For babel 7 and above, you can add the following 2 devDependencies:
@babel/plugin-proposal-optional-chaining // Optional chaining
@babel/plugin-proposal-nullish-coalescing-operator // Nullish coalescing
Then in .babelrc or babel.config.js, add these 2 plugins (the plugins property at the top level of JSON):
{ "plugins": [ "@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-optional-chaining" ] } Then you can use them happily!
Minimal Practice
To verify if the plugins actually work, here is a minimal practice example:
First, write the example code 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
Initialize the npm repository in the project root with npm init, then install the following dependencies (it's 2020 now, all default to version 7 and above):
npm i --save-dev @babel/cli @babel/core @babel/preset-env
Add the configuration file babel.config.js in the project root. No need to add anything else, the optional chaining and nullish coalescing plugins will automatically transpile based on your syntax:
module.exports = { presets: [ "@babel/preset-env" ] } </div>
<p>
Run the compilation command:
</p>
<blockquote>
<p>
npx babel index.js -d dist
</p>
</blockquote>
<p>
After building, see the generated file in <code>./dist/index.js</code>, indicating successful compilation:
</p>
<div class="_2Uzcx_">
<button class="VJbwyy" type="button" aria-label="Copy code"><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);
暂无评论。