跳至主要內容

@babel/plugin-transform-object-rest-spread

資訊

此外掛程式包含在 @babel/preset-env 中，在 ES2018 中

範例​

Rest 屬性​

JavaScript
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Spread 屬性​

JavaScript
let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

安裝​

npm install --save-dev @babel/plugin-transform-object-rest-spread

使用​

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

透過 CLI​

Shell
babel --plugins @babel/plugin-transform-object-rest-spread script.js

透過 Node API​

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

選項​

預設情況下，此外掛程式會使用 Babel 的 objectSpread 輔助函式來產生符合規範的程式碼。

loose​

布林值，預設為 false。

啟用此選項將使用 Babel 的 extends 輔助函式，它基本上與 Object.assign 相同（請參閱下方的 useBuiltIns 以直接使用它）。

注意

考慮遷移至頂層 setSpreadProperties 假設。

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

請記住，即使它們幾乎相等，但擴散和 Object.assign 之間有一個重要的區別：擴散定義新屬性，而 Object.assign() 設定它們，因此在某些情況下使用此模式可能會產生意外的結果。

有關詳細資訊，請查看 擴散 VS. Object.assign 和 指定 VS. 定義屬性。

useBuiltIns​

布林值，預設為 false。

啟用此選項將直接使用 Object.assign，而不是 Babel 的 extends 輔助函式。

範例​

.babelrc

JSON
{
  "assumptions": {
    "setSpreadProperties": true
  },
  "plugins": [
    ["@babel/plugin-transform-object-rest-spread", { "useBuiltIns": true }]
  ]
}

輸入

JavaScript
z = { x, ...y };

輸出

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

您可以在 這裡 閱讀更多關於配置外掛選項的資訊

參考資料​