Skip to main content

@babel/plugin-transform-optional-chaining

信息

此插件包含在 @babel/preset-env 中，在 ES2020 中

¥This plugin is included in @babel/preset-env, in ES2020

示例​

¥Example

访问深度嵌套的属性​

¥Accessing deeply nested properties

JavaScript
const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42

const safe = obj?.qux?.baz; // undefined

// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if
// `bar` exists

// Example usage with bracket notation:
obj?.["foo"]?.bar?.baz; // 42

调用深度嵌套函数​

¥Calling deeply nested functions

JavaScript
const obj = {
  foo: {
    bar: {
      baz() {
        return 42;
      },
    },
  },
};

const baz = obj?.foo?.bar?.baz(); // 42

const safe = obj?.qux?.baz(); // undefined
const safe2 = obj?.foo.bar.qux?.(); // undefined

const willThrow = obj?.foo.bar.qux(); // Error: not a function

// Top function can be called directly, too.
function test() {
  return 42;
}
test?.(); // 42

exists?.(); // undefined

构建深度嵌套类​

¥Constructing deeply nested classes

JavaScript
const obj = {
  foo: {
    bar: {
      baz: class {
      },
    },
  },
};

const baz = new obj?.foo?.bar?.baz(); // baz instance

const safe = new obj?.qux?.baz(); // undefined
const safe2 = new obj?.foo.bar.qux?.(); // undefined

const willThrow = new obj?.foo.bar.qux(); // Error: not a constructor

// Top classes can be called directly, too.
class Test {
}
new Test?.(); // test instance

new exists?.(); // undefined

删除深度嵌套的属性​

¥Deleting deeply nested properties

添加于：v7.8.0

¥Added in: v7.8.0

JavaScript
const obj = {
  foo: {
    bar: {},
  },
};

const ret = delete obj?.foo?.bar?.baz; // true

安装​

¥Installation

npm install --save-dev @babel/plugin-transform-optional-chaining

用法​

¥Usage

¥With a configuration file (Recommended)

babel.config.json
{
  "plugins": ["@babel/plugin-transform-optional-chaining"]
}

通过 CLI​

¥Via CLI

Shell
babel --plugins @babel/plugin-transform-optional-chaining script.js

通过 Node API​

¥Via Node API

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-optional-chaining"],
});

选项​

¥Options

loose​

boolean，默认为 false。

¥boolean, defaults to false.

当 true 时，此转换将假装 document.all 不存在，并对 null 执行松散的相等检查，而不是对 null 和 undefined 进行严格的相等检查。

¥When true, this transform will pretend document.all does not exist, and perform loose equality checks with null instead of strict equality checks against both null and undefined.

提醒

考虑迁移到顶层 noDocumentAll 假设。

¥Consider migrating to the top level noDocumentAll assumption.

babel.config.json
{
  "assumptions": {
    "noDocumentAll": true
  }
}

示例​

¥Example

输入

¥In

JavaScript
foo?.bar;

出局 (noDocumentAll === true)

¥Out (noDocumentAll === true)

JavaScript
foo == null ? void 0 : foo.bar;

出局 (noDocumentAll === false)

¥Out (noDocumentAll === false)

JavaScript
foo === null || foo === void 0 ? void 0 : foo.bar;
提示

你可以阅读有关配置插件选项 此处 的更多信息

¥You can read more about configuring plugin options here

参考​

¥References