Comprendre les boucles for...of et les objets Iterable dans ES6-js tutoriel-php.cn

Comprendre les boucles for...of et les objets Iterable dans ES6

Tutoriel recommandé : "Tutoriel vidéo JavaScript"

Cet article étudiera la boucle for ... of d'ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Old Way

Dans le passé, il y avait deux façons de parcourir javascript.

La première est la boucle classique for i, qui vous permet de parcourir un tableau ou tout objet indexable et possédant une propriété length.

for(i=0;i<things.length;i++) {
    var thing = things[i]
    /* ... */
}

Copier après la connexion

Suivi de la boucle for ... in, qui est utilisée pour parcourir les paires clé/valeur d'un objet.

for(key in things) {
    if(!thing.hasOwnProperty(key)) { continue; }
    var thing = things[key]
    /* ... */
}

Copier après la connexion

for ... in La boucle est souvent considérée comme une note secondaire car elle boucle sur chaque propriété énumérable de l'objet. Cela inclut les propriétés de l'objet parent dans la chaîne de prototypes, ainsi que toutes les propriétés affectées aux méthodes. En d’autres termes, cela passe par des choses auxquelles les gens ne s’attendaient pas. Utiliser for ... in signifie généralement beaucoup de clauses de garde dans le bloc de boucle pour éviter les attributs indésirables.

Les premiers JavaScript ont résolu ce problème grâce aux bibliothèques. De nombreuses bibliothèques JavaScript (par exemple : Prototype.js, jQuery, lodash, etc.) ont des méthodes ou des fonctions utilitaires comme each ou foreach qui vous permettent de parcourir des objets et des tableaux sans for i ou for ... in.

for ... of Les boucles sont le moyen utilisé par ES6 pour essayer de résoudre certains de ces problèmes sans bibliothèques tierces.

for … of

for ... of boucle

for(const thing of things) {
    /* ... */
}

Copier après la connexion

qui parcourra un objet itérable.

Un objet itérable est un objet qui définit la méthode @@ iterator, et la méthode @@iterator renvoie un objet qui implémente le protocole itérateur objet, ou la méthode est une fonction génératrice.

Il y a beaucoup de choses que vous devez comprendre dans cette phrase :

Objets itérables
@@iteratorMéthode (Que signifie @@ ?)
Itérateur Protocole (Que signifie protocole ici ?)
Attendez, itérable et itérable Ce n'est pas un itérateur la même chose?
Et puis, qu'est-ce qu'une fonction génératrice ?

Ce qui suit abordera ces questions une par une.

Itérable intégré

Tout d'abord, certains objets intégrés dans les objets JavaScript peuvent être itérés naturellement. Par exemple, la chose la plus simple à penser est le. objet tableau. Les tableaux peuvent être utilisés dans une boucle for ... of comme dans le code suivant :

const foo = [
&#39;apples&#39;,&#39;oranges&#39;,&#39;pears&#39;
]

for(const thing of foo) {
  console.log(thing)
}

Copier après la connexion

Le résultat de sortie est tous les éléments du tableau.

apples
oranges
pears

Copier après la connexion

Il existe également une méthode entries pour les tableaux, qui renvoie un objet itérable. Cet itérable renvoie la clé et la valeur sur chaque boucle. Par exemple, le code suivant :

const foo = [
&#39;apples&#39;,&#39;oranges&#39;,&#39;pears&#39;
]

for(const thing of foo.entries()) {
  console.log(thing)
}

Copier après la connexion

affichera le

[ 0, &#39;apples&#39; ]
[ 1, &#39;oranges&#39; ]
[ 2, &#39;pears&#39; ]

Copier après la connexion

suivant. La méthode entries sera plus utile lors de l'utilisation de la syntaxe suivante

const foo = [
    &#39;apples&#39;,&#39;oranges&#39;,&#39;pears&#39;
]

for(const [key, value] of foo.entries()) {
  console.log(key,&#39;:&#39;,value)
}

Copier après la connexion

est déclarée dans un for boucle Deux variables : une pour renvoyer le premier élément du tableau (la clé ou l'index de la valeur), et une pour le deuxième élément (la valeur à laquelle correspond réellement l'index).

Un objet javascript normal n'est pas itérable. Si vous exécutez le code suivant :

// 无法正常执行
const foo = {
  &#39;apples&#39;:&#39;oranges&#39;,
  &#39;pears&#39;:&#39;prunes&#39;
}

for(const [key, value] of foo) {
  console.log(key,&#39;:&#39;,value)
}

Copier après la connexion

vous obtiendrez une erreur

$ node test.js
/path/to/test.js:6
for(const [key, value] of foo) {
TypeError: foo is not iterable

Copier après la connexion

Cependant la méthode statique de l'objet Objectglobalentries accepte un objet normal en tant que paramètre et renvoie un objet Iterable. Un programme comme celui-ci :

const foo = {
  &#39;apples&#39;:&#39;oranges&#39;,
  &#39;pears&#39;:&#39;prunes&#39;
}

for(const [key, value] of Object.entries(foo)) {
  console.log(key,&#39;:&#39;,value)
}

Copier après la connexion

peut obtenir le résultat que vous attendez :

$ node test.js
apples : oranges
pears : prunes

Copier après la connexion

Créez votre propre Iterable

Si vous souhaitez créer votre propre Iterable Itérer des objets prend plus de temps. Vous vous souvenez de ce qui a été dit plus tôt :

Un objet itérable est un objet qui définit la méthode @@ iterator, et la méthode @@iterator renvoie une implémentation de Un objet du protocole itérateur, ou la méthode est une fonction génératrice.

Le moyen le plus simple de comprendre ce contenu est de créer un objet itérable étape par étape. Tout d’abord, nous avons besoin d’un objet qui implémente la méthode @@iterator. La notation @@ est un peu trompeuse, ce que nous voulons vraiment faire, c'est définir la méthode en utilisant la notation Symbol.iterator prédéfinie.

Si vous définissez un objet avec une méthode itératrice et essayez de parcourir :

const foo = {
  [Symbol.iterator]: function() {
  }
}

for(const [key, value] of foo) {
  console.log(key, value)
}

Copier après la connexion

vous obtenez une nouvelle erreur :

for(const [key, value] of foo) {
                          ^
TypeError: Result of the Symbol.iterator method is not an object

Copier après la connexion

C'est du javascript qui nous dit qu'il essaie pour appeler la méthode Symbol.iterator, mais le résultat de l'appel n'est pas un objet .

Afin d'éliminer cette erreur, il est nécessaire d'utiliser la méthode iterator pour renvoyer un objet qui implémente le Protocole Iterator. Cela signifie que la méthode itératrice doit renvoyer un objet avec une clé next, qui est une fonction. next

const foo = {
  [Symbol.iterator]: function() {
    return {
      next: function() {
      }
    }
  }
}

for(const [key, value] of foo) {
  console.log(key, value)
}

Copier après la connexion

Si vous exécutez le code ci-dessus, vous obtiendrez une nouvelle erreur.

for(const [key, value] of foo) {
                     ^
TypeError: Iterator result undefined is not an object

Copier après la connexion

这次 javascript 告诉我们它试图调用 Symbol.iterator 方法，而该对象的确是一个对象，并且实现了 next 方法，但是 next 的返回值不是 javascript 预期的对象。

next 函数需要返回有特定格式的对象——有 value 和 done 这两个键。

next: function() {
    //...
    return {
        done: false,
        value: &#39;next value&#39;
    }
}

Copier après la connexion

done 键是可选的。如果值为 true（表示迭代器已完成迭代），则说明迭代已结束。

如果 done 为 false 或不存在，则需要 value 键。 value 键是通过循环此应该返回的值。

所以在代码中放入另一个程序，它带有一个简单的迭代器，该迭代器返回前十个偶数。

class First20Evens {
  constructor() {
    this.currentValue = 0
  }

  [Symbol.iterator]() {
    return {
      next: (function() {
        this.currentValue+=2
        if(this.currentValue > 20) {
          return {done:true}
        }
        return {
          value:this.currentValue
        }
      }).bind(this)
    }
  }
}

const foo = new First20Evens;
for(const value of foo) {
  console.log(value)
}

Copier après la connexion

生成器

手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象（由生成器函数返回）也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样：

class First20Evens {
  constructor() {
    this.currentValue = 0
  }

  [Symbol.iterator]() {
    return function*() {
      for(let i=1;i<=10;i++) {
        if(i % 2 === 0) {
          yield i
        }
      }
    }()
  }
}

const foo = new First20Evens;
for(const item of foo) {
  console.log(item)
}

Copier après la connexion

本文不会过多地介绍生成器，如果你需要入门的话可以看这篇文章。今天的重要收获是，我们可以使自己的 Symbol.iterator 方法返回一个生成器对象，并且该生成器对象能够在 for ... of 循环中“正常工作”。 “正常工作”是指循环能够持续的在生成器上调用 next，直到生成器停止 yield 值为止。