跳至主要内容

@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 规范中被定义为可迭代的。

参考资料​