Last time we talked about for… The of loop is a new loop syntax in ES2015, which is a unified way to iterate over all data structures. But after the actual attempt to find that it can only go through the number group of data structure, corresponding to the common object if directly to go through the error will be reported. The reason is that there are more and more structured data types in ES, from arrays and objects to sets and maps, and developers can combine these types to define data structures that fit their business needs. In order to provide a unified way to traverse ES2015 provides an Iterable interface meaning Iterable. Interfaces are a specification. For example, ECMAscript has a toString method for any data type because they implement a uniform specification. The more technical way to say it in programming languages is that they all implement a uniform interface. The specification standard for unified traversal access for the OF loop. In other words, as long as this data structure implements an iterable interface, it can be… Of loops to iterate over. This means that what we tried before can be directly for… The of loop iterates over data types that already implement this interface internally. Here we leave for… So let’s look at what this interface called Iterable actually does.

  • An array of

  • Set 

  • Map 

For two reasons: First, these three can be directly blamed for… Every object traversed by of has a method like this; Second, the name of this method is iterator. According to these two reasons can basically determine the Iterable interface conventions is the object of must to mount a method called the Iterator (can be used (arr | set | map) [Symbol. The Iterator] get). Calling this method returns an iterator object that contains a next method, which returns an object with two members value and done. Value corresponds to the item in the array, and Done identifies the end of the loop. The iterator maintains a data pointer that moves back one bit each time next is called. The done attribute is used to indicate whether all member data has been iterated.

const arr = [100, 200, 300];
const iterator = arr[Symbol.iterator]();
iterator.next() // {value:100, done: false}
iterator.next() // {value:200, done: false}
iterator.next() // {value:300, done: false}
iterator.next() // {value: undefined, done: true}
Copy the code

Conclusion: All can be for… Each of the data types iterated by the OF loop must implement the Iterable interface. That is, it must mount an iterator method internally that returns an object with a next method that can be iterated over and over again.

const s = new Set([1, 2, 3]);
const iterator = s[Symbol.iterator]
itertaor.next() // {value: 1, done: false}
iterator.next() // {value: 2, done: false}
iterator.next() // {value: 3, done: false}
iterator.next() // {value: undefined, done: true}
Copy the code

This is for… Of the inner workings of the loop, for… The inside of the of loop is the same loop that we did here, but we could use the while loop to do the same loop.