un guide du développeur –

ES6 a apporté un certain nombre de nouvelles fonctionnalités au langage JavaScript. Deux de ces caractéristiques, les générateurs et les itérateurs, ont considérablement changé la façon dont nous écrivons des fonctions spécifiques dans un code frontal plus complexe.

Bien qu'ils jouent bien ensemble, ce qu'ils font peut être un peu déroutant, alors vérifions

Iterators

L'itération est une pratique courante en programmation et elle est généralement utilisée pour boucler un ensemble de valeurs, soit en transformant chaque valeur, soit en l'utilisant ou en l'enregistrant d'une manière ou d'une autre.

, nous avons toujours eu pour boucles qui ressemblent à ceci:

 pour (var i = 0; i <foo.length; i ++) {
  // fais quelque chose avec moi
}

Mais ES6 nous donne une alternative:

 pour (const i of foo) {
  // fais quelque chose avec moi
}

Ceci est sans doute beaucoup plus propre et plus facile à travailler, et me rappelle des langages comme Python et Ruby. Mais il y a quelque chose d'important à noter sur ce nouveau type d'itération: il vous permet d'interagir directement avec des éléments d'un ensemble de données.

Imaginons que nous voulions savoir si chaque nombre d'un tableau est premier ou non. Nous pourrions faire cela en proposant une fonction qui fait exactement cela. Cela pourrait ressembler à ceci:

 function isPrime (number) {
  if (nombre <2) {
    return false;
  } else if (nombre === 2) {
    retourner vrai;
  }

  pour (var i = 2; i <nombre; i ++) {
    if (nombre% i === 0) {
      return false;
      Pause;
    }
  }

  retourner vrai;
}

Pas le meilleur au monde, mais ça marche. L'étape suivante consisterait à faire une boucle sur notre liste de numéros et à vérifier si chacun est premier avec notre nouvelle fonction brillante. C'est assez simple:

 var possiblePrimes = [73, 6, 90, 19, 15];
var confirmPrimes = [];

pour (var i = 0; i <possiblePrimes.length; i ++) {
  if (isPrime (possiblePrimes [i])) {
    confirmedPrimes.push (possiblePrimes [i]);
  }
}

// confirmedPrimes est maintenant [73, 19]

Encore une fois, cela fonctionne, mais il est maladroit et ce clunkiness est en grande partie à la façon dont JavaScript gère pour boucles. Avec ES6, cependant, on nous donne une option presque Pythonic dans le nouvel itérateur. Donc la boucle pour précédente pourrait être écrite comme ceci:

 const possiblePrimes = [73, 6, 90, 19, 15];
const confirmPrimes = [];

pour (const i of possiblePrimes) {
   if (isPrime (i)) {
      confirmedPrimes.push (i);
   }
}

// confirmedPrimes est maintenant [73, 19]

C'est beaucoup plus propre, mais le plus frappant c'est la boucle pour . La variable i représente maintenant l'élément réel dans le tableau appelé possiblePrimes . Donc, nous n'avons plus besoin de l'appeler par index. Cela signifie qu'au lieu d'appeler possiblePrimes [i] dans la boucle, nous pouvons juste appeler i .

Dans les coulisses, ce type d'itération utilise les ES6 brillants et brillants ] Symbol.iterator () méthode. Ce mauvais garçon est chargé de décrire l'itération et, lorsqu'il est appelé, renvoie un objet JavaScript contenant la valeur suivante dans la boucle et une clé faite qui est soit true ou false selon que la boucle est terminée ou non

Si vous êtes intéressé par ce genre de détail, vous pouvez en lire plus sur ce fantastique article de blog intitulé Iterators va itérater par Jake Archibald. Cela vous donnera aussi une bonne idée de ce qui se passe sous le capot quand nous plongerons dans l'autre côté de cet article: les générateurs.

Les générateurs

Les générateurs, aussi appelés "usines itératrices", sont un nouveau type de Fonction JavaScript qui crée des itérations spécifiques. Ils vous donnent des moyens spéciaux et autodéfinis pour faire des boucles sur les choses.

OK, alors qu'est-ce que tout cela signifie? Regardons un exemple. Disons que nous voulons une fonction qui nous donnera le prochain nombre premier chaque fois que nous l'appelons. Encore une fois, nous allons utiliser notre fonction isPrime d'avant pour vérifier si un nombre est premier:

 function * getNextPrime () {
  laissez nextNumber = 2;

  while (true) {
    if (isPrime (nextNumber)) {
      céder nextNumber;
    }
    nextNumber ++;
  }
}

Si vous êtes habitué à JavaScript, certaines de ces choses ressembleront un peu à du vaudou, mais ce n'est pas trop mal. Nous avons cet astérisque étrange après le mot-clé fonction mais tout cela est de dire à JavaScript que nous définissons un générateur.

L'autre bit funky serait le mot-clé yield . C'est en fait ce qu'un générateur crache quand vous l'appelez. C'est à peu près l'équivalent de return mais il conserve l'état de la fonction au lieu de tout réexécuter à chaque fois que vous l'appelez. Il "se souvient" de sa place pendant l'exécution, donc la prochaine fois que vous l'appelez, il continue là où il l'a laissé.

Cela signifie que nous pouvons faire ceci:

 const nextPrime = getNextPrime ();

Et puis appelez nextPrime chaque fois que nous voulons obtenir – vous l'aurez deviné – le prochain premier:

 console.log (nextPrime.next (). Value); // 2
console.log (nextPrime.next (). value); // 3
console.log (nextPrime.next (). value); // 5
console.log (nextPrime.next (). value); // 7

Vous pouvez également appeler nextPrime.next () ce qui est utile dans les situations où votre générateur n'est pas infini, car il retourne un objet comme celui-ci:

 console.log (nextPrime. prochain());
// {value: 2, done: false}

Ici, cette touche done vous indique si la fonction a terminé sa tâche ou non. Dans notre cas, notre fonction ne finira jamais, et pourrait théoriquement nous donner tous les nombres premiers jusqu'à l'infini (si nous avions autant de mémoire d'ordinateur, bien sûr).

Cool, alors est-ce que je peux utiliser des générateurs et des itérateurs? ] Bien qu'ECMAScript 2015 ait été finalisé et soit dans la nature depuis quelques années, le support du navigateur pour ses fonctionnalités – en particulier les générateurs – est loin d'être complet. Si vous voulez vraiment utiliser ces fonctionnalités et d'autres, vous pouvez vérifier les transpileurs comme Babel et Traceur qui convertira votre code ECMAScript 2015 en son équivalent (si possible) ECMAScript 5 code

Il y a aussi beaucoup de rédacteurs en ligne qui supportent ECMAScript 2015, ou qui se concentrent spécifiquement dessus, en particulier Regenerator de Facebook et JS Bin . Si vous cherchez simplement à jouer et à avoir une idée de la façon dont JavaScript peut maintenant être écrit, cela vaut le coup d'œil.

Conclusions

Les générateurs d'énergie et les itérateurs nous donnent beaucoup de flexibilité dans notre approche de JavaScript problèmes. Les itérateurs nous permettent d'écrire de manière plus pythonique pour les boucles ce qui signifie que notre code sera plus clair et plus facile à lire.

Les fonctions génératrices nous permettent d'écrire des fonctions qui se souviennent la dernière fois les a vus, et peut ramasser là où ils se sont arrêtés. Ils peuvent aussi être infinis en termes de quantité dont ils se souviennent réellement, ce qui peut s'avérer très utile dans certaines situations.

La prise en charge de ces générateurs et itérateurs est bonne. Ils sont pris en charge dans Node et tous les navigateurs modernes, à l'exception d'Internet Explorer. Si vous avez besoin de prendre en charge des navigateurs plus anciens, votre meilleur pari est d'utiliser un transpileur comme Babel .

Byron Houwens est un concepteur et développeur qui aime se concentrer sur les technologies frontales et UX. Il travaille actuellement en tant que développeur front-end dans l'environnement edtech en plein essor et vit sous le soleil du Cap, en Afrique du Sud.