跳至主要内容

@babel/plugin-transform-destructuring

信息

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

示例​

输入

JavaScript
let { x, y } = obj;

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

输出

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);

安装​

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

用法​

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

通过 CLI​

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

通过 Node API​

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

选项​

loose​

布尔值，默认为 false。

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

注意

考虑迁移到顶级的 iterableIsArray 假设。

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

useBuiltIns​

布尔值，默认为 false。

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

示例​

.babelrc

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

输入

JavaScript
var { ...x } = z;

输出

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

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

allowArrayLike​

布尔值，默认为 false

添加于：v7.10.0

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

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

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

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

注意

考虑迁移到顶级的 arrayLikeIsIterable 假设。

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

参考​