for-for循环的性能成本

Question

Recently I was experimenting with ES6 code using babel . I was quite surprised to see the verbose code of a compiled for of loop. Here is an example:

ES6

const a = [1, 2, 3, 4, 5];
for (const i of a)
{
    console.log(i);
}

Compiled

"use strict";
var a = [1, 2, 3, 4, 5];
for (
    var _iterator = a,
    _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;

      console.log(i);
}

Whereas standard for loops, or a .forEach loop look almost exactly the same compiled as they do in ES6. I use the for of loop quite a lot in my code, it is a nice concise way to iterate over arrays. But until now I was unaware of all the added state and logic this brings with it. I would like to know whether using this compared to a normal for loop or .forEach has a non-negligible performance cost?

Answer 1

I would like to know whether using this compared to a normal for loop or .forEach has a non-negligible performance cost?

That completely depends on the size of your array.

Unless you're iterating over millions of elements, you're not going to notice a difference.

Babel expands the loop this much for compatibility purposes. Older browsers don't have for...of , but the functionality can be reproduced like that.