跳至主内容

@babel/plugin-transform-for-of

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

信息

此插件已包含在 @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
    }]
  ]
}

通过命令行​

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 mode)下，数组会进入快速处理路径，从而显著提升性能。

注意

建议迁移到顶层的 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;
}

突然中止(Abrupt completions)​

在 skipForOfIteratorClosing 假设下，当因抛出错误导致循环突然中止时，迭代器的 return 方法不会被调用。

更多信息请参考 google/traceur-compiler#1773 和 babel/babel#838。

allowArrayLike​

boolean，默认值 false

添加于：v7.10.0

此选项允许 for-of 循环用于类数组对象。

类数组对象是具有 length 属性的对象：例如 { 0: "a", 1: "b", length: 2 }。请注意，与真实数组类似，类数组对象可能存在"空位"(holes)：{ 1: "a", length: 3 } 等价于 [ (hole), "a", (hole) ]。

虽然将类数组对象当作数组迭代不符合规范，但现代浏览器中许多支持 Symbol.iterator 的对象实际上都是可迭代对象。典型示例是 DOM 集合（如 document.querySelectorAll("img.big")），这也是该选项的主要应用场景。

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

assumeArray​

boolean，默认值 false

此选项通过假设所有循环对象都是数组，将下述优化应用于所有 for-of 循环。

当你只需要 for-of 循环实现基础数组遍历时，此选项非常有用。

优化机制​

当遍历基础数组时，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];
}
提示

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