Skip to main content

@babel/plugin-transform-destructuring

信息

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

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

示例​

¥Examples

输入

¥In

JavaScript
let { x, y } = obj;

let [a, b, ...rest] = arr;

输出

¥Out

JavaScript
function _toArray(arr) { ... }

let _obj = obj,
    x = _obj.x,
    y = _obj.y;

let _arr = arr,
    _arr2 = _toArray(_arr),
    a = _arr2[0],
    b = _arr2[1],
    rest = _arr2.slice(2);

安装​

¥Installation

npm install --save-dev @babel/plugin-transform-destructuring

用法​

¥Usage

¥With a configuration file (Recommended)

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

通过 CLI​

¥Via CLI

Shell
babel --plugins @babel/plugin-transform-destructuring script.js

通过 Node API​

¥Via Node API

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

选项​

¥Options

loose​

boolean，默认为 false。

¥boolean, defaults to false.

启用此选项将假定你要解构的是一个数组，并且不会在其他可迭代对象上使用 Array.from。

¥Enabling this option will assume that what you want to destructure is an array and won't use Array.from on other iterables.

提醒

考虑迁移到顶层 iterableIsArray 假设。

¥Consider migrating to the top level iterableIsArray assumption.

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

useBuiltIns​

boolean，默认为 false。

¥boolean, defaults to false.

启用此选项将直接使用 Object.assign 而不是 Babel 的 extends 助手。

¥Enabling this option will use Object.assign directly instead of the Babel's extends helper.

示例​

¥Example

.babelrc

babel.config.json
{
  "plugins": [
    ["@babel/plugin-transform-destructuring", { "useBuiltIns": true }]
  ]
}

输入

¥In

JavaScript
var { ...x } = z;

输出

¥Out

JavaScript
var _z = z,
  x = Object.assign({}, _z);
提示

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

¥You can read more about configuring plugin options here

allowArrayLike​

boolean，默认为 false

¥boolean, defaults to false

添加于：v7.10.0

¥Added in: v7.10.0

此选项允许使用数组解构语法来解构类似数组的对象。

¥This option allows destructuring array-like objects using the array destructuring syntax.

类数组对象是具有 length 属性的对象：例如，{ 0: "a", 1: "b", length: 2 }。请注意，与真正的数组一样，类数组对象可以具有 "holes"：{ 1: "a", length: 3 } 等同于 [ (hole), "a", (hole) ]。

¥An array-like object is an object with a length property: for example, { 0: "a", 1: "b", length: 2 }. Note that, like real arrays, array-like objects can have "holes": { 1: "a", length: 3 } is equivalent to [ (hole), "a", (hole) ].

虽然像数组一样解构类似数组的对象并不符合规范，但在支持 Symbol.iterator 的现代浏览器中，有许多对象是可迭代的。一些值得注意的示例是 DOM 集合，例如 document.querySelectorAll("img.big")，它们是此选项的主要用例。

¥While it is not spec-compliant to destructure array-like objects as if they were arrays, there are many objects that would be iterables in modern browsers with Symbol.iterator support. Some notable examples are the DOM collections, like document.querySelectorAll("img.big"), which are the main use case for this option.

请注意，即使禁用此选项，Babel 也允许在旧引擎中解构 arguments，因为它在 ECMAScript 规范中被定义为可迭代的。

¥Please note that Babel allows destructuring arguments in old engines even if this option is disabled, because it's defined as iterable in the ECMAScript specification.

提醒

考虑迁移到顶层 arrayLikeIsIterable 假设。

¥Consider migrating to the top level arrayLikeIsIterable assumption.

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

参考​

¥References