跳至主要内容

@babel/plugin-transform-for-of

信息

此插件包含在 @babel/preset-env 中

示例​

输入

JavaScript
for (var i of foo) {
}

输出

JavaScript
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (
    var _iterator = foo[Symbol.iterator](), _step;
    !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
    _iteratorNormalCompletion = true
  ) {
    var i = _step.value;
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator.return != null) {
      _iterator.return();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}

安装​

npm install --save-dev @babel/plugin-transform-for-of

用法​

无选项

JavaScript
{
  "plugins": ["@babel/plugin-transform-for-of"]
}

带选项

JavaScript
{
  "plugins": [
    ["@babel/plugin-transform-for-of", {
      "loose": true, // defaults to false
      "assumeArray": true // defaults to false
    }]
  ]
}

通过 CLI​

Shell
babel --plugins @babel/plugin-transform-for-of script.js

通过 Node API​

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

选项​

loose​

boolean，默认为 false

在 loose 模式下，数组会被放入快速路径，从而大大提高性能。

注意

考虑迁移到顶级的 skipForOfIteratorClosing 假设。

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

所有其他可迭代对象将继续正常工作。

示例​

输入

JavaScript
for (var i of foo) {
}

输出

JavaScript
for (
  var _iterator = foo,
    _isArray = Array.isArray(_iterator),
    _i = 0,
    _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();
  ;

) {
  var _ref;

  if (_isArray) {
    if (_i >= _iterator.length) break;
    _ref = _iterator[_i++];
  } else {
    _i = _iterator.next();
    if (_i.done) break;
    _ref = _i.value;
  }

  var i = _ref;
}

异常完成​

在 skipForOfIteratorClosing 假设下，如果迭代器的 return 方法因抛出错误而导致异常完成，则不会调用该方法。

有关更多信息，请参阅 google/traceur-compiler#1773 和 babel/babel#838。

allowArrayLike​

boolean，默认为 false

添加于：v7.10.0

此选项允许将 for-of 与类数组对象一起使用。

类数组对象是具有 length 属性的对象：例如，{ 0: "a", 1: "b", length: 2 }。请注意，与真正的数组一样，类数组对象可以有“空洞”：{ 1: "a", length: 3 } 等效于 [ (空洞), "a", (空洞) ]。

虽然将类数组对象像数组一样迭代是*不*符合规范的，但在支持 Symbol.iterator 的现代浏览器中，许多对象都将是*可迭代的*。一些值得注意的例子是 DOM 集合，例如 document.querySelectorAll("img.big")，这是此选项的主要用例。

请注意，即使禁用了此选项，Babel 也允许在旧引擎中迭代 arguments，因为它在 ECMAScript 规范中被定义为*可迭代的*。

assumeArray​

boolean，默认为 false

这将通过假设*所有*循环都是数组，将以下所示的优化应用于所有 for-of 循环。

当您只想使用 for-of 循环来表示对数组的基本 for 循环时，这很有用。

优化​

如果使用基本数组，Babel 会将 for-of 循环编译为常规的 for 循环。

输入

JavaScript
for (let a of [1, 2, 3]) {
}

输出

JavaScript
var _arr = [1, 2, 3];
for (var _i = 0; _i < _arr.length; _i++) {
  var a = _arr[_i];
}
提示

您可以阅读更多关于配置插件选项的信息 此处