JavaScript ES6 Iterator Guide

Lazy execution

Iterators allow us to next() execute the corresponding logic after the first call to the function. In the example above, when we call an iterator, we immediately perform the sort and value work. However, if the next() function is never called, we waste performance. So let's optimize it:

1Table[symbol.iterator] =function () {2   var_this = This;3   varKeys =NULL;4   varindex = 0;5 6   return {7Nextfunction () {8       if(Keys = = =NULL) {9Keys =Object.keys (_this). sort ();Ten       } One  A       return { -Value:keys[index], done:index++ >=Keys.length -       }; the     } -   } -}

for-ofand for-in the difference

Understanding for-of and for-in The difference between, is very important. Here is an example of a simple, but very good explanation of the difference:

1 varList = [3, 5, 7];2List.foo = ' Bar ';3 4  for(varKeyinchlist) {5Console.log (key);//0, 1, 2, foo6 }7 8  for(varvalue of list) {9Console.log (value);//3, 5, 7Ten}

As you can see, the for-of loop prints only the values in the array, ignoring the other properties. This is because the array iterator returns only the elements that it expects.

Built-in iterators

String, Array , TypedArray , Map and Set are built-in iterators, because they have a method in their prototypes Symbol.iterator .

1 var string = "Hello"; 2 3  for (var  chr of String) {4   // h, E, L, L, O 5 }

Deconstruction Assignment

The deconstruction operation also accepts an iterator:

1 var hello = ' world '; 2 var [First, second, ... rest] = [... hello]; 3 // w o ["R", "L", "D"]

Infinite iterators

done: truean infinite iterator is implemented as long as it is never returned. Of course, it is necessary to avoid this situation vigorously.

1 varids = {2*[symbol.iterator]:function () {3     varindex = 0;4 5     return {6Nextfunction () {7         return{value: ' id-' + index++, done:false };8       }9     };Ten   } One }; A  - varCounter = 0; -  the  for(varvalue of IDs) { - Console.log (value); -  -   if(counter++ > 1000) {//Let's make sure we get out! +      Break; -   } +}

Generator function

If you don't know the ES6 generator function yet, refer to the MDN documentation. In short, a generator function is the ES6 feature that is currently being talked about most, and it is a function that can be temporarily exited and later re-entered to continue execution. In multiple entry, its context (the bound variable) is saved. generatorThe function itself is an iterator, see the following example:

1 function*List (value) {2    for(varitem of value) {3 yield item;4   }5 }6 7  for(varValue of list ([1, 2, 3])) {8 Console.log (value);9 }Ten  One variterator = List ([1, 2, 3]); A  -Console.log (typeofIterator.next);//function -Console.log (typeofIterator[symbol.iterator]);//function the  -Console.log (Iterator.next (). value);//1 -  -  for(varvalue of iterator) { +Console.log (value);//2, 3 -}

So, we can use generator the function to rewrite the iterator above us:

1 function* () {2   var keys = Object.keys (this). sort (); 3 4    for (var  item of keys) {5    yield item; 6   }7 }

At last

The iterator gives JavaScript a new dimension to the loop, generator function, and value series (value series). You can use it to define the sort of value in a class, or you can use it to create a lazy or infinite sequence, and so on.

Original address

https://strongloop.com/strongblog/introduction-to-es6-iterators/

Translation Address:

http://segmentfault.com/a/1190000003021261

JavaScript ES6 Iterator Guide