跳至主要內容

@babel/plugin-transform-spread

資訊

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

範例​

在

JavaScript
var a = ["a", "b", "c"];

var b = [...a, "foo"];

var c = foo(...a);

輸出

JavaScript
var a = ["a", "b", "c"];

var b = a.concat(["foo"]);

var c = foo.apply(void 0, a);

安裝​

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

用法​

不使用選項

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

使用選項

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

透過 CLI​

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

透過 Node API​

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

選項​

loose​

boolean，預設為 false。

在寬鬆模式下，所有可迭代物件都假設為陣列。

注意

考慮移轉到頂層 iterableIsArray 假設。

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

在 iterableIsArray 假設下，Babel 在展開陣列時會保留「洞」(例如，[ ...Array(2) ] 會產生 [ (hole), (hole) ])。將 iterableIsArray 設為 false 以避免這種行為。

提示

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

allowArrayLike​

boolean，預設為 false

新增於：v7.10.0

此選項允許將類陣列物件展開，就像它們是陣列一樣。

注意

考慮移轉到頂層 arrayLikeIsIterable 假設。

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

類陣列物件是一個具有 length 屬性的物件：例如，{ 0: "a", 1: "b", length: 2 }。請注意，與真實陣列一樣，類陣列物件可以有「洞」：{ 1: "a", length: 3 } 等於 [ (hole), "a", (hole) ]。

雖然將類陣列物件散開就像陣列一樣並不符合規格，但有許多物件在支援 Symbol.iterator 的現代瀏覽器中會是可迭代的。一些值得注意的範例是 DOM 集合，例如 document.querySelectorAll("img.big")，這是此選項的主要使用案例。

請注意，即使已停用此選項，Babel 仍允許在舊引擎中散開 arguments，因為它在 ECMAScript 規範中定義為可迭代的。

參考資料​