Exemples détaillés d'itérateur et de boucles for...of dans la syntaxe JavaScript ES6

Iterator

Iterator est un tel mécanisme. Il s'agit d'une interface qui fournit un mécanisme d'accès unifié à différentes structures de données. Tant qu'une structure de données déploie l'interface Iterator, elle peut terminer l'opération de traversée (c'est-à-dire traiter tous les membres de la structure de données en séquence).

Fonction :

• Fournir une interface d'accès unifiée et simple pour diverses structures de données

• Créer la structure de données Les membres peuvent être disposé dans un certain ordre

• ES6 a créé une nouvelle commande de traversée for...of boucle, et l'interface Iterator est principalement destinée à for...of la consommation

Processus de parcours d'itérateur :

(1) Créez un objet pointeur pointant vers la position de départ de la structure de données actuelle. En d’autres termes, l’objet traverseur est essentiellement un objet pointeur.

(2) La première fois que vous appelez la méthode next de l'objet pointeur, vous pouvez pointer le pointeur vers le premier membre de la structure de données.

(3) La deuxième fois que la méthode next de l'objet pointeur est appelée, le pointeur pointe vers le deuxième membre de la structure de données.

(4) Continuez à appeler la méthode next de l'objet pointeur jusqu'à ce qu'il pointe vers la fin de la structure de données.

Dans ES6, il existe trois types de structures de données avec des interfaces Iterator natives : les tableaux, certains objets de type tableau, les structures Set et Map.

peut remplacer la méthode native Symbol.iterator pour modifier le comportement du traverseur.

for...of

La plage que la boucle for...of peut utiliser comprend des tableaux, des structures Set et Map, ainsi que certains objets de type tableau (tels que des objets arguments, DOM NodeList), l'objet Generator plus tard et la chaîne.

{
  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  }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!