跳到主要內容

@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
  }
}

參考資料​