[JS Master's Road] ES6 series Tutorial-iterators and Builders

What is an iterator?

An iterator is a special object that has the following characteristics:

1, all objects have a next method

2, each time the next method is called, an object is returned that contains two properties, one is value, which represents the next value that will be returned. The other is done, which is a Boolean value that indicates whether the iterator still has data to return.

3, the iterator also saves an internal pointer to the value in the current collection

There is an iterative pattern in design mode that is similar to an iterator, and I have previously written 2 articles about iteration patterns:

[JS Master Road] design mode Series-iterators (1)

[JS Master's Road] design mode series-dom iterators (2)

To encapsulate an iterator in a es5 way:

1 functionCreateiterator (arr) {2     vari = 0;3     return {4Next:function(){5             varDone = (I >=arr.length);6             varValue =!done? arr[i++]: undefined;7             return {8 Done:done,9 Value:valueTen             } One         } A     }; - } -  the variterator = Createiterator ([10, 20, 30 ] ); -Console.log (Iterator.next ());//{done:false, value:10} -Console.log (Iterator.next ());//{done:false, value:20} -Console.log (Iterator.next ());//{done:false, value:30} +Console.log (Iterator.next ());//{done:true, value:undefined}

Then you'll see if it fits the characteristics of the iterator object we said above.

With the foundation of the iterator, let's take a look at what is a generator?

A generator is a function that returns an iterator that is represented by an asterisk (*) after the function keyword, and a new keyword yield is used in the functions. Asterisks can be followed by a function followed by a space after the function.

1 function*Createiterator () {2Yield 10;3Yield 20;4Yield 30;5 }6 7 variterator =createiterator ();8Console.log (Iterator.next ());//{done:false, value:10}9Console.log (Iterator.next ());//{done:false, value:20}TenConsole.log (Iterator.next ());//{done:false, value:30} OneConsole.log (Iterator.next ());//{done:true, value:undefined}

By the above procedure, you should see that the results are similar to the iterators we implemented with ES5. But you don't see the next method, done, and the Value property in this generator function at all. Iterators are implemented internally because of the generator function. Focus on the yield keyword, what are the characteristics of it?

1, each time a yield statement is executed, the function automatically stops executing and after yield 10 is executed, the function stops automatically.

2, the next time the next method is called, yield 20 will be executed, and the function will stop automatically.

3, Next call next method, will execute yield 30, function automatically stop

4, the next time in the call, there is no element that can iterate, value returns undefined

Returns the current value of the array with the yield keyword

1 function*Createiterator (arr) {2      for(vari = 0, len = arr.length; i < Len; i++ ) {3 yield arr[i];4     }5 }6 variterator = Createiterator ([10, 20, 30 ] );7Console.log (Iterator.next ());//{done:false, value:10}8Console.log (Iterator.next ());//{done:false, value:20}9Console.log (Iterator.next ());//{done:false, value:30}TenConsole.log (Iterator.next ());//{done:true, value:undefined}

Use the yield keyword, where you need to be aware:

The yield keyword can only be used inside the generator, and the function used inside the generator will also error.

1 function Show () {2     yield; 3 }4 Show ();

This use will be error, the following use, will also error

1  function *createiterator (arr) {2     forvar i = 0, len = arr.length; i < Len i++ ) {3         returnfunction() {4            yield arr [i]; 5         }6    }7 }

The generator supports the notation of function expressions, but does not support arrow functions

1 varCreateiterator =function*(arr) {2      for(vari = 0, len = arr.length; i < Len; i++ ) {3 yield arr[i];4     }5 }6 variterator = Createiterator ([10, 20, 30 ] );7Console.log (Iterator.next ());//{done:false, value:10}8Console.log (Iterator.next ());//{done:false, value:20}9Console.log (Iterator.next ());//{done:false, value:30}TenConsole.log (Iterator.next ());//{done:true, value:undefined}

 1  var  createiterator = * (arr) =>< Span style= "color: #000000;" >{ for  (var  i = 0, len = arr.length; i < Len;        I++  Yield arr[i];  4   5  }

1 var *createiterator = (arr) = ={2     forvar i = 0, len = arr.length; I &l T Len i++ ) {3        yield arr[i]; 4     }5 }

The above 2 types of arrows are not supported.

The builder can be added to the object

1 varobj = {2Createiterator:function*(arr) {3          for(vari = 0, len = arr.length; i < Len; i++ ) {4 yield arr[i];5         }6     }7 };8 variterator = Obj.createiterator ([10, 20, 30 ] );9Console.log (Iterator.next ());//{done:false, value:10}TenConsole.log (Iterator.next ());//{done:false, value:20} OneConsole.log (Iterator.next ());//{done:false, value:30} AConsole.log (Iterator.next ());//{done:true, value:undefined}

You can also use the abbreviated method of the object:

1 varobj = {2*Createiterator (arr) {3          for(vari = 0, len = arr.length; i < Len; i++ ) {4 yield arr[i];5         }6     }7 };8 variterator = Obj.createiterator ([10, 20, 30 ] );9Console.log (Iterator.next ());//{done:false, value:10}TenConsole.log (Iterator.next ());//{done:false, value:20} OneConsole.log (Iterator.next ());//{done:false, value:30} AConsole.log (Iterator.next ());//{done:true, value:undefined}

[JS Master's Road] ES6 series Tutorial-iterators and Builders