跳至主要內容

@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

在寬鬆模式中，陣列會被置於快速路徑，因此大幅提升效能。

注意

考慮遷移至頂層 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];
}
提示

你可以 在此處 閱讀更多關於設定外掛選項的資訊