跳至主内容

@babel/plugin-transform-destructuring

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

信息

此插件已包含在 @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"]
}

通过命令行​

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

通过 Node API​

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

配置选项​

loose​

boolean，默认值 false

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

注意

请考虑迁移到顶层的 iterableIsArray 假设。

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

useBuiltIns​

boolean，默认值 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​

boolean，默认值 false

添加于：v7.10.0

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

类数组对象是具有 length 属性的对象：例如 { 0: "a", 1: "b", length: 2 }。请注意，与真实数组类似，类数组对象可能存在"空位"(holes)：{ 1: "a", length: 3 } 等价于 [ (hole), "a", (hole) ]。

虽然将类数组对象当作数组解构不符合规范，但在支持 Symbol.iterator 的现代浏览器中存在许多可迭代对象。典型的例子是 DOM 集合（如 document.querySelectorAll("img.big")），这正是此选项的主要应用场景。

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

注意

请考虑迁移到顶层的 arrayLikeIsIterable 假设。

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

参考​