Detaillierte Beispiele für Iteratoren und for...of-Schleifen in der JavaScript ES6-Syntax

Iterator

Iterator ist ein solcher Mechanismus. Es handelt sich um eine Schnittstelle, die einen einheitlichen Zugriffsmechanismus für verschiedene Datenstrukturen bietet. Solange eine Datenstruktur die Iterator-Schnittstelle bereitstellt, kann sie den Durchlaufvorgang abschließen (d. h. alle Mitglieder der Datenstruktur nacheinander verarbeiten).

Funktion:

• Bereitstellung einer einheitlichen und einfachen Zugriffsschnittstelle für verschiedene Datenstrukturen

• Erstellen Sie die Datenstruktur. Die Mitglieder können in einer bestimmten Reihenfolge angeordnet werden

• ES6 hat eine neue Durchlaufbefehlsschleife for...of erstellt, und die Iterator-Schnittstelle dient hauptsächlich dem for...of Verbrauch

Iterator-Traversal-Prozess:

(1) Erstellen Sie ein Zeigerobjekt, das auf die Startposition der aktuellen Datenstruktur zeigt. Mit anderen Worten, das Traverser-Objekt ist im Wesentlichen ein Zeigerobjekt.

(2) Wenn Sie die Methode next des Zeigerobjekts zum ersten Mal aufrufen, können Sie den Zeiger auf das erste Mitglied der Datenstruktur verweisen.

(3) Beim zweiten Aufruf der next-Methode des Zeigerobjekts zeigt der Zeiger auf das zweite Mitglied der Datenstruktur.

(4) Rufen Sie die Methode next des Zeigerobjekts so lange auf, bis es auf das Ende der Datenstruktur zeigt.

In ES6 gibt es drei Arten von Datenstrukturen mit nativen Iterator-Schnittstellen: Arrays, bestimmte arrayähnliche Objekte, Set- und Map-Strukturen.

kann die native Symbol.iterator-Methode überschreiben, um das Verhalten des Traversers zu ändern.

for...of

Der Bereich, den die for...of-Schleife verwenden kann, umfasst Arrays, Set- und Map-Strukturen sowie einige arrayähnliche Objekte (z. B. Argumentobjekte, DOM). NodeList-Objekte), später das Generator-Objekt und den 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  }
}

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für Iteratoren und for...of-Schleifen in der JavaScript ES6-Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!