メインコンテンツへスキップ

@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経由​

シェル
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 }は[ (hole), "a", (hole) ]と同じです。

配列のようなオブジェクトを配列のように反復処理することは、仕様に準拠していませんが、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];
}
ヒント

プラグインオプションの設定の詳細については、こちらを参照してください。