ES6 borrows features from other programming languages to bring JavaScript for… Of loop syntax, used to iterate over data structures such as groups of numbers. Of course, because of the ES6 nature, we use for… In the case of of, transcoding is still done with Babel. Let’s see how Babel deals with for… Of code.

The ES6 native code is shown below. To avoid interference, no other ES6 features are used here.

var names = ['paul', 'jordan', 'griffin'];
for (var name of names) {
  console.log(name);
}
Copy the code

The result of Babel transcoding is as follows:

'use strict';

var names = ['paul', 'jordan', 'griffin'];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = names[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var name = _step.value;

    console.log(name);
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator.return) {
      _iterator.return();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}
Copy the code

We see the ES6 feature symbol.iterator in line 9 of Babel’s converted code. Why? Let’s first explore for… Implementation principle of OF.

The for… When of loops over a data structure, it actually calls the Iterator interface of that data structure. A data structure is considered “iterable” as long as it has an Iterator interface. Native data structures with “traversable” properties include arrays, sets, maps, and array-like objects such as strings. In terms of the Iterator interface, ES6 specifies that the default Iterator interface is deployed on the symbol. Iterator property of the data structure. The property itself is a function that returns a pointer object. This pointer object is called a traverser, and it must contain a next method. Calling next continuously causes the pointer to point from the first member of the data structure to the last member. That is, calling next returns information about the current member of the data structure, which is an object. Contains the value and done attributes. Value is the value of the current member, and done is a Boolean value indicating whether the traversal is complete. While the above theory is somewhat abstract, let’s simulate a “traversable” data structure:

const iterableData = { data: ['paul','jordan','griffin','redick','rivers'], dataIndex: Iterator: function () {var self = this; return { next: function () { return { value: self.data[self.dataIndex++], done: self.dataIndex < self.data.length? false: true }; }}; }}; for (let item of iterableData) { console.log(item); } // paul, jordan, griffin, redick, riversCopy the code

As you can see, as long as a data structure has the required symbol. iterator attribute, we can pass for… Of traversal (in fact, destruct assignment, extension operators, yield*, and other ES6 features also invoke this attribute interface).

Now, let’s go back to the Babel conversion for… The code for the of loop, which essentially calls the Iterator interface (note line 9), sets the for… Of converts to a traditional for loop and calls the next method of the traverser to spit out the values in the array in each loop. If an error occurs during a loop call, the traverser will be called if it contains a predefined return function (see the specification for traverser objects in the ES6 documentation), otherwise an error will be thrown.

So, the problem is that even calling Babel on for… With the transcoding of the OF loop, we can’t actually get rid of the ES6 feature completely — the code will still report errors without Symbol support. Babel only converts new JavaScript syntax by default, not new apis like Proxy, Set, Promise, Symbol, etc. Therefore, use for with caution when compatibility requirements are high. Of grammar, even though we have Babel.

In fact, it is possible to completely smooth out the new API introduced by ES6 features by introducing babel-Polyfill in the project and configuring it, but the other problem with this is that babel-Polyfill itself becomes much larger because of its size. So this move has both advantages and disadvantages, need to be weighed according to the actual situation.

Babel
ES6

Adhere to original technology sharing, your support will encourage me to continue to create!

Scan the QR code to share this article