ES6 getting started Iterator and for... of loop details, es6for...

ES6 getting started Iterator and for... of loop details, es6for...

This article mainly introduces the Iterator and for... of loop in ES6, and shares the content for your reference and learning. for more information, see the following:

I. Iterator)

Iterator is a protocol. Any object can be traversed by deploying this protocol. Traverse the operational characteristics in ES6 .... Of loop.

It has two main functions:

• Provides a unified interface for Traversing object attributes.
• So that the attributes of objects can be arranged in order.
  

The traversal protocol of ES6 stipulates that if the object of the next method is deployed, the traversal function is available. The next method must return an object that contains two attributes: value and done. The value attribute is the value of the current traversal position, while the done attribute is a Boolean value to indicate whether the traversal is complete.

 function makeIterator(array) {  var nextIndex = 0;  return {   next: function() {    return nextIndex < array.length ?     {value: array[nextIndex++], done: false} :     {value: undefined, done: true};   }  } } var it = makeIterator(['a', 'b']); it.next().value; //'a' it.next().value; //'b' it.next().done; // true

In the code snippet above, a makeIterator function is defined to return a traversal object to traverse the parameter array. Note the construction of the next return value.

Next, let's take a look at the sample code snippet of A traversal tool:

 function idMaker() {  var index = 0;   return {   next: function() {    return {value: index++, done: false};   }   } } var it = idMaker(); it.next().value; //'0' it.next().value; //'1' it.next().value; //'2'

II.... Of Loop

In ES6, as long as an object is deployed with the next method, it is considered to have an iterator interface, and you can use... Of cyclically traverses its value.

 function idMaker() {  var index = 0;  return {   next: function() {    return {value: index++, done: false};   }  } } for (var n of it) {  if (n > 5) {   break;   console.log( n );  } } //0 //1 //2 //3 //4 //5

The code above describes, .... Of starts from 0 by default.

Array native has iterator Interface

 const arr = [1, 5, 3, 9]; for (let v of arr) {  console.log( v ); } //1 //5 //3 //9

In comparison, the original Js... In loop, only the key name of the object can be obtained, and the key value cannot be obtained directly. ES6 provides... Of loop, which allows retrieving key values through traversal.

 var arr = ['a', 'b', 'c', 'd']; for (a in arr) {  console.log( a ); } //0 //1 //2 //3 for (a of arr) {  console.log( a ); } //0 //1 //2 //3

The above code snippet shows that... The in loop reads the key name, and... Of cyclically read key values.

For data in the Set and Map structures, you can directly use... Of loop.

 var name = ['S', 'D', 'J', 'Z', 'G', 'G', 'G']; for ( var e of name) {  console.log( e ); } //S //D //J //Z //G var es6 = new Map(); es6.set('edition', 6); es6.set('committee', 'TC39'); es6.set('standard', 'ECMA-262'); for(var [name, value] of es6) {   console.log(name + ": " + value); } // edition: 6 // commttee: TC39 // standard: ECMA-262

The code snippet above demonstrates how to traverse the Set structure and Map structure, which are the same as the traversal key name and key value.

For common objects, the for... of structure cannot be used directly; otherwise, an error is reported. The iterator interface must be deployed. However, in this case, the for... in loop can still traverse the key name.

 var es6 = {  name: "G.Dragon",  year: 22,  love: "coding" }; for (e in es6) {  console.log( e ); } //name //year //love for( e of es6) {  console.log( e ); } // TypeError: es6 is not iterable

Finally, let's make a summary. For... of loops can use an array, an object similar to an array (such as an argument object and DOM NodeList object), a Set and Map structure, a Generator object in the following text, and a string. The following example uses for... of to traverse strings and DOM NodeList objects cyclically.

// String example let str = "hello"; for (let s of str) {console. log (s);} // h // e // l // o // DOM NodeList object example let paras = document. getSelectorAll ("p"); for (let p of paras) {p. classList. add ("test ");}

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.