Detailed examples of iterator and for...of loops in JavaScript ES6 syntax

Iterator traverser

Iterator (Iterator) is such a mechanism. It is an interface that provides a unified access mechanism for various different data structures. As long as any data structure deploys the Iterator interface, it can complete the traversal operation (that is, process all members of the data structure in sequence).

Function:

• Provides a unified and simple access interface for various data structures

• makes the data structure The members can be arranged in a certain order

• ES6 created a new traversal commandfor...ofloop, the Iterator interface is mainly used forfor ...ofConsumption

The traversal process of Iterator:

(1) Create a pointer object pointing to the starting position of the current data structure. In other words, the traverser object is essentially a pointer object.

(2) The first time you call the next method of the pointer object, you can point the pointer to the first member of the data structure.

(3) The second time you call the next method of the pointer object, the pointer points to the second member of the data structure.

(4) Keep calling the next method of the pointer object until it points to the end of the data structure.

In ES6, there are three types of data structures with native Iterator interfaces: arrays, certain array-like objects, Set and Map structures.

You can override the native Symbol.iterator method to modify the behavior of the iterator.

for...of

The range that the for...of loop can use includes arrays, Set and Map structures, and some array-like objects (such as arguments objects, DOM NodeList objects) , Generator object later, and string.

{
  let arr=['hello','world'];
  let map=arr[Symbol.iterator]();  //done表示是否还有下一步了，false有 true 没有
  console.log(map.next()); //{value: "hello", done: false}
  console.log(map.next()); //{value: "world", done: false}
  console.log(map.next()); //{value: undefined, done: true}}

{
  let obj={
    start:[1,3,2],
    end:[7,9,8],    //声明    
    [Symbol.iterator](){      //函数体
      let self=this;
      let index=0; //当前遍历索引
      let arr=self.start.concat(self.end); //合并数组
      let len=arr.length;//记住数组长度
      return {        //iterator部署的时候一定要有next这个方法        
      next(){          //遍历过程
          if(index<len){            
          return {
              value:arr[index++],
              done:false
            }
          }else{            
          return {
              value:arr[index++],
              done:true //遍历结束            
              }
          }
        }
      }
    }
  }  //验证接口是否部署成功
  for(let key of obj){
    console.log(&#39;key1&#39;,key); //1 3 2 7 9 8  }
}

{
  let arr=[&#39;hello&#39;,&#39;world&#39;];  for(let value of arr){
    console.log(&#39;value&#39;,value); //hello ,world  }
}

The above is the detailed content of Detailed examples of iterator and for...of loops in JavaScript ES6 syntax. For more information, please follow other related articles on the PHP Chinese website!