Introduction aux itérateurs et générateurs dans JavaScript ES6

Cet article présente principalement une compréhension approfondie des itérateurs et générateurs ES6. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Cet article présente une compréhension approfondie des itérateurs et générateurs ES6 et les partage avec vous :

<.>Problèmes avec les instructions de boucle

var colors = ["red", "green", "blue"];
for(var i=0; i<colors.length; i++){
  console.log(colors[i]);
}

Avant ES6, cette norme pour les boucles suivait l'index du tableau via des variables. Si plusieurs boucles sont imbriquées, plusieurs variables doivent être suivies, la complexité du code sera considérablement augmentée et des bogues d'utilisation incorrecte des variables de boucle se produiront facilement.

Des itérateurs ont été introduits pour éliminer cette complexité et réduire les erreurs dans les boucles.

Qu'est-ce qu'un itérateur

Expérimentons d'abord l'utilisation de la syntaxe ES5 pour simuler la création d'un itérateur :

function createIterator(items) {
  var i = 0;
  
  return { // 返回一个迭代器对象
    next: function() { // 迭代器对象一定有个next()方法
      var done = (i >= items.length);
      var value = !done ? items[i++] : undefined;
      
      return { // next()方法返回结果对象
        value: value,
        done: done
      };
    }
  };
}

var iterator = createIterator([1, 2, 3]);

console.log(iterator.next()); // "{ value: 1, done: false}"
console.log(iterator.next()); // "{ value: 2, done: false}"
console.log(iterator.next()); // "{ value: 3, done: false}"
console.log(iterator.next()); // "{ value: undefiend, done: true}"
// 之后所有的调用都会返回相同内容
console.log(iterator.next()); // "{ value: undefiend, done: true}"

Ci-dessus, nous renvoyons un objet en appelant la fonction createIterator(). Cet objet a une méthode next() Lorsque la méthode next() est appelée, le format de retour est { value : 1 , done: false} objet de résultat.

Par conséquent, nous pouvons le définir de cette façon : un itérateur est un objet spécial avec une méthode next(), et chaque fois que next() est appelé, un objet résultat est renvoyé.

Avec l'aide de cet objet itérateur, nous allons transformer la boucle for standard que nous venons de démarrer [oubliez la nouvelle fonctionnalité de boucle for-of d'ES6 pour l'instant] :

var colors = ["red", "green", "blue"];
var iterator = createIterator(colors);
while(!iterator.next().done){
  console.log(iterator.next().value);
}

Quoi ?, c'est juste pour éliminer la variable de boucle, mais ça demande tellement de peine, ça ne vaut pas la perte en termes de code ?

Ce n'est pas le cas. Après tout, createIterator() ne doit être écrit qu'une seule fois et peut être réutilisé à tout moment. Cependant, ES6 introduit des objets générateurs, qui peuvent faciliter le processus de création d'itérateurs.

Qu'est-ce qu'un générateur

Un générateur est une fonction qui renvoie un itérateur, passé l'astérisque après le mot clé fonction (* ) pour indiquer que le nouveau mot-clé rendement sera utilisé dans la fonction.

function *createIterator(items) {
  for(let i=0; i<items.length; i++) {
    yield items[i];
  }
}

let iterator = createIterator([1, 2, 3]);

// 既然生成器返回的是迭代器，自然就可以调用迭代器的next()方法
console.log(iterator.next()); // "{ value: 1, done: false}"
console.log(iterator.next()); // "{ value: 2, done: false}"
console.log(iterator.next()); // "{ value: 3, done: false}"
console.log(iterator.next()); // "{ value: undefiend, done: true}"
// 之后所有的调用都会返回相同内容
console.log(iterator.next()); // "{ value: undefiend, done: true}"

Ci-dessus, nous avons utilisé la génération ES6, ce qui a grandement simplifié le processus de création d'itérateur. Nous transmettons un tableau d'éléments à la fonction génératrice createIterator(). À l'intérieur de la fonction, la boucle for génère en continu de nouveaux éléments à partir du tableau et les place dans l'itérateur. La boucle s'arrêtera à chaque fois qu'elle rencontrera une instruction rendement ; de l'itérateur est appelée méthode (), la boucle continue de s'exécuter et s'arrête à la prochaine instruction rendement.

Comment créer un générateur

Un générateur est une fonction :

function *createIterator(items) { ... }

Oui Écrit en mode expression de fonction :

let createIterator = function *(item) { ... }

peut également être ajouté aux objets, des littéraux d'objet de style ES5 :

let o = {
  createIterator: function *(items) { ... }
};

let iterator = o.createIterator([1, 2, 3]);

Abréviation de la méthode objet de style ES6 :

let o = {
  *createIterator(items) { ... }
};

let iterator = o.createIterator([1, 2, 3]);

Objet itérable

Dans ES6, tous les objets de collection (tableaux, collections Set et collections Map) et les chaînes sont des objets itérables, et les objets itérables sont liés aux itérateurs par défaut.

Voici la nouvelle fonctionnalité de boucle ES6 tant attendue pour-of :

var colors = ["red", "green", "blue"];
for(let color of colors){
  console.log(color);
}

boucle for-of, qui peut être utilisée dans On itérable objets, l'itérateur par défaut sur les objets itérables est utilisé. Le processus général est le suivant : chaque fois que la boucle for-of est exécutée, elle appellera la méthode next() de l'objet itérable et stockera l'attribut value de l'objet résultat renvoyé par l'itérateur dans une variable. La boucle continuera à s'exécuter. ce processus jusqu'à ce que l'objet terminé soit renvoyé. La valeur de la propriété est vraie.

Si vous avez uniquement besoin de parcourir les valeurs d'un tableau ou d'une collection, utiliser une boucle for-of au lieu d'une boucle for est un bon choix.

Accès à l'itérateur par défaut

Les objets itérables ont une méthode Symbol.iterator Lorsque la boucle for-of est effectuée, le symbole du tableau de couleurs est. appelée. méthode itérateur pour obtenir l'itérateur par défaut, ce processus est effectué derrière le moteur JavaScript.

Nous pouvons prendre l'initiative de faire ressentir cet itérateur par défaut :

let values = [1, 2, 3];
let iterator = values[Symbol.iterator]();

console.log(iterator.next()); // "{ value: 1, done: false}"
console.log(iterator.next()); // "{ value: 2, done: false}"
console.log(iterator.next()); // "{ value: 3, done: false}"
console.log(iterator.next()); // "{ value: undefined, done: true}"

Dans ce code, le tableau est obtenu via Symbol.iterator L'itérateur par défaut pour les valeurs et utilisé pour parcourir les éléments du tableau. L'exécution d'une instruction de boucle for-of dans le moteur JavaScript est un processus similaire.

Utilisez la propriété Symbol.iterator pour détecter si l'objet est un objet itérable :

function isIterator(object) {
  return typeof object[Symbol.iterator] === "function";
}

console.log(isIterable([1, 2, 3])); // true
console.log(isIterable(new Set())); // true
console.log(isIterable(new Map())); // true
console.log(isIterable("Hello")); // true

Créer un objet itérable

Lorsque nous créons un objet, ajoutez un générateur à la propriété Symbol.iterator pour le transformer en un objet itérable :

let collection = {
  items: [],
  *[Symbol.iterator]() { // 将生成器赋值给对象的Symbol.iterator属性来创建默认的迭代器
    for(let item of this.items) {
      yield item;
    }
  }
};

collection.items.push(1);
collection.items.push(2);
collection.items.push(3);

for(let x of collection) {
  console.log(x);
}

Itérateurs intégrés

Les objets Collection dans ES6, y compris les tableaux, les collections Set et les collections Map, ont tous trois itérateurs intégrés :

• entries() renvoie un itérateur dont la valeur est constituée de plusieurs paires clé-valeur. S'il s'agit d'un tableau, le premier élément est la position de l'index ; s'il s'agit d'un ensemble, le premier élément et le deuxième élément sont tous deux des valeurs.

• values() renvoie un itérateur dont la valeur est la valeur de la collection.

• keys() renvoie un itérateur dont la valeur correspond à tous les noms de clés de la collection. S'il s'agit d'un tableau, l'index est renvoyé ; s'il s'agit d'un Set, la valeur est renvoyée (la valeur du Set est utilisée à la fois comme clé et comme valeur).

不同集合的默认迭代器

每个集合类型都有一个默认的迭代器，在for-of循环中，如果没有显式指定则使用默认的迭代器。按常规使用习惯，我们很容易猜到，数组和Set集合的默认迭代器是values()，Map集合的默认迭代器是entries()。

请看以下示例：

let colors = [ "red", "green", "blue"];
let tracking = new Set([1234, 5678, 9012]);
let data = new Map();

data.set("title", "Understanding ECMAScript 6");
data.set("format", "print");

// 与调用colors.values()方法相同
for(let value of colors) {
  console.log(value);
}

// 与调用tracking.values()方法相同
for(let num of tracking) {
  console.log(num);
}

// 与调用data.entries()方法相同
for(let entry of data) {
  console.log(entry);
}

这段代码会输入以下内容：

"red"
"green"
"blue"
1234
5678
9012
["title", "Understanding ECMAScript 6"]
["format", "print"]

for-of循环配合解构特性，操纵数据会更方便：

for(let [key, value] of data) {
  console.log(key + "=" + value);
}

展开运算符操纵可迭代对象

let set = new Set([1, 2, 3, 4, 5]),
  array = [...set];
  
console.log(array); // [1,2,3,4,5]

展开运算符可以操作所有的可迭代对象，并根据默认迭代器来选取要引用的值，从迭代器读取所有值。然后按返回顺序将它们依次插入到数组中。因此如果想将可迭代对象转换为数组，用展开运算符是最简单的方法。

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!