Skip to main content

@babel/plugin-transform-for-of

信息

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

¥This plugin is included in @babel/preset-env

示例​

¥Example

输入

¥In

JavaScript
for (var i of foo) {
}

输出

¥Out

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;
    }
  }
}

安装​

¥Installation

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

用法​

¥Usage

¥With a configuration file (Recommended)

没有选项：

¥Without options:

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

有选项：

¥With options:

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

通过 CLI​

¥Via CLI

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

通过 Node API​

¥Via Node API

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

选项​

¥Options

loose​

boolean，默认为 false

¥boolean, defaults to false

在松散模式下，数组被置于快速路径中，从而大大提高了性能。

¥In loose mode, arrays are put in a fast path, thus heavily increasing performance.

提醒

考虑迁移到顶层 skipForOfIteratorClosing 假设。

¥Consider migrating to the top level skipForOfIteratorClosing assumption.

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

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

¥All other iterables will continue to work fine.

示例​

¥Example

输入

¥In

JavaScript
for (var i of foo) {
}

输出

¥Out

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 方法不会在抛出错误导致的突然完成时被调用。

¥Under the skipForOfIteratorClosing assumption, an iterator's return method will not be called on abrupt completions caused by thrown errors.

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

¥Please see google/traceur-compiler#1773 and babel/babel#838 for more information.

allowArrayLike​

boolean，默认为 false

¥boolean, defaults to false

添加于：v7.10.0

¥Added in: v7.10.0

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

¥This option allows for-of to be used with array-like objects.

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

¥An array-like object is an object with a length property: for example, { 0: "a", 1: "b", length: 2 }. Note that, like real arrays, array-like objects can have "holes": { 1: "a", length: 3 } is equivalent to [ (hole), "a", (hole) ].

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

¥While it is not spec-compliant to iterate array-like objects as if they were arrays, there are many objects that would be iterables in modern browsers with Symbol.iterator support. Some notable examples are the DOM collections, like document.querySelectorAll("img.big"), which are the main use case for this option.

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

¥Please note that Babel allows iterating arguments in old engines even if this option is disabled, because it's defined as iterable in the ECMAScript specification.

assumeArray​

boolean，默认为 false

¥boolean, defaults to false

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

¥This will apply the optimization shown below to all for-of loops by assuming that all loops are arrays.

当你只想要一个 for-of 循​​环来表示一个数组上的基本 for 循环时，它会很有用。

¥Can be useful when you just want a for-of loop to represent a basic for loop over an array.

优化​

¥Optimization

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

¥If a basic array is used, Babel will compile the for-of loop down to a regular for loop.

输入

¥In

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

输出

¥Out

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

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

¥You can read more about configuring plugin options here