Iterator and for of.. loop

One 、Iterator

 1、Iterator（ Iterator ） The concept of

Iterator Iterator It's an interface , Provide unified access mechanism for different data structures . Any data structure , As long as the deployment Iterator Interface , You can complete the traversal operation .

Iterator The function of 3 individual ：

• Provide a unified framework for all kinds of data structures 、 Simple access interface ;
• Enables members of a data structure to be arranged in a certain order ;
• ES6 Creates a new traversal command ---for...of loop ,Iterator Main interface supply for...of consumption ;

Iterator The traversal process of is as follows ：

1. Create a Pointer object , Point to the start of the current data structure . That is, the traverser object is essentially a pointer object .
2. The first call to the next Method , You can point a pointer to the first member of a data structure .
3. The second call to the next Method , You can point the pointer to the second member of the data structure .
4. ...... ......
5. Calling the pointer object's next Method , Until it points to the end of the data structure .

Every time you call next Methods will return the information of the current member of the data structure . That is, return a containing value and done Objects with two properties . among ,value Property is the value of the current member ,done Property is a Boolean value indicating whether the traversal ends .

2、 Case study

function main() {
      var it = makeIterator(['a','b','c','d']);
      for(let i=0;i<5;i++)
      {
        let re = it.next();
        console.log("value:"+re.value+",done:"+re.done);
      }     
}
function makeIterator(array){
      var nextIndex =0;
      return {
        next:function(){
          return nextIndex<array.length?
          {value:array[nextIndex++],done:false}:{value:undefined,done:true};
        }
      };
  }

Execution results ：

The above case defines a makeIterator function , It's a traverser generator function , The function is to return an iterator object . An array ['a','b','c','d'] Execute this function , Will return the of the array Traverser object （ Pointer object ）it.

3、 Default Iterator Interface

ES6 Some data structures of are native Interator Interface , That is, it can be for...of... Loop traversal . The reason lies in , These data structures are deployed natively Symbol.iterator attribute , All deployed Sysbol.iterator The data structure of the property is called the deployed iterator interface . Calling this interface will return an iterator object .

Original possession Iterator The data structure of the interface is as follows ：

• Array、Map、Set、String、TypeArray、 Functional arguments object 、NodeList object

let arr =['a','b','c'];
let iter = arr[Symbol.iterator]();// Returns the traverser object , The traverser object has value and done Two attributes 
for(let i=0;i<3;i++)
{
    console.log(iter.next().value);
}

Two 、for...of.. loop

for...of The loop can automatically traverse Generator Function generated Iterator object , And there is no need to call next Method .

function main() {
      for(let v of DayGenerator())
      {
        console.log(v);
      }
}
function* DayGenerator()
{
      yield 'Sunday';
      yield 'Monday';
      yield 'Tuesday';
      yield 'Wednesday'; 
      yield 'Thursday'; 
      yield 'Friday'; 
      return 'Saturday';
}

Running results ：

once next Method of the return object done The attribute is true,for...of The cycle will end , And does not include the return object , So the top return Statement returned Saturday Not included in for...of In circulation .

except for...of loop , Extension operator （...）、 Deconstructing assignments and Array.from All calls inside the method are iterator interfaces . It means , They can all put Generator Function return Iterator Object as parameter .

function main() {
     // Extension operator 
     console.log([...DayGenerator()]);
     //Array.frome Method 
     console.log(Array.from(DayGenerator()));
     // Deconstruct assignment 
     let [x,y,z]=DayGenerator();
     console.log([x,y,z]);
     //for...of loop 
     for(let v of DayGenerator())
     {
       console.log(v);
     }
}
function* DayGenerator()
{
      yield 'Sunday';
      yield 'Monday';
      yield 'Tuesday';
      yield 'Wednesday'; 
      yield 'Thursday'; 
      yield 'Friday'; 
      return 'Saturday';
}

  Running results ：