Prenez le contrôle des boucles avec Symbol.iterator

Avez-vous déjà utilisé un Object.entries et vous êtes-vous demandé comment cela fonctionnait ? C'est beaucoup plus simple que vous ne le pensez !

Voici une implémentation de base :

function objectEntries(obj) {
  const entries = [];

  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      entries.push([key, obj[key]]);
    }
  }

  return entries;
}

Cependant, ce code n'est pas tout à fait suffisant : et si l'objet était massif ? Les performances de l’approche basée sur les tableaux devront être stockées en mémoire pendant tout le processus d’exécution de cette fonction. Et si vous l'utilisiez à nouveau ? Il devra tout de même construire et conserver un nouveau tableau en mémoire. Dans le monde réel, cela peut entraîner de graves problèmes de performances et, à un moment donné, nous devrons nous adapter aux performances. Cependant, il existe une solution élégante qui résoudra tous ces problèmes, dans laquelle Symbol.iterator vient à la rescousse !

Voici un extrait mis à jour :

function objectEntries(obj) {
  return {
    [Symbol.iterator]() {
      const keys = Object.keys(obj);
      let index = 0;

      return {
        next() {
          if (index 



<p><strong>Pourquoi utiliser Symbol.iterator pour l'itération ?</strong></p>

<p>Dans notre implémentation initiale, la fonction objectEntries construit un tableau de toutes les entrées (paires [clé, valeur]) en mémoire, ce qui peut poser problème si l'objet possède un grand nombre de propriétés. Stocker toutes les entrées dans un tableau signifie que nous devons allouer de la mémoire à chaque paire à l'avance. Cette approche est assez correcte pour les objets plus petits, mais elle devient rapidement inefficace et tout simplement lente à mesure que la taille de l'objet augmente.</p>

<p>Dans le code mis à jour, nous définissons [Symbol.iterator] sur un objet qui contient la logique d'itération. Décomposons-le étape par étape :</p>

• Initialize Keys : Object.keys(obj) récupère un tableau de clés à partir de l'objet obj. Cette liste de clés nous permet de savoir exactement à quelles propriétés nous devons accéder sans stocker chaque entrée.
• Utiliser un pointeur d'index : Un index variable garde une trace de notre position actuelle dans le tableau de clés. C'est le seul état que nous aurons dans la boucle.
• Définir la méthode suivante : La fonction next() utilise index pour récupérer la clé actuelle et l'incrémenter. Il renvoie chaque paire [key, obj[key]] sous forme de valeur et définit done: true lorsque nous avons parcouru toutes les clés.
• En faisant cela, nous permettons aux objectEntries d'être compatibles avec n'importe quelle boucle for...of sans le coût de mémoire lié à la création initiale d'un tableau complet d'entrées.

Application de Symbol.iterator aux boucles personnalisées

Approfondissons la façon dont ces méthodes peuvent fournir plus de contrôle sur le comportement des boucles. Chacun des exemples fournis démontre une manière unique d'interagir avec les données du tableau, ajoutant beaucoup de flexibilité à votre code. Nous explorerons les implications de chaque méthode et comment elles peuvent être exploitées dans différents scénarios.

Dans ces exemples, je vais étendre le prototype Array (plus d'informations sur les prototypes ici) avec les exemples de méthodes pour rendre mon code plus facile à lire. Allons-y !

Par exemple, cette méthode reverseIterator peut s'avérer utile dans quelque chose comme une application de chat dans laquelle vous souhaiterez peut-être afficher en premier les messages les plus récents. Les applications de chat sont connues pour avoir BEAUCOUP de données (des messages dans ce cas). En utilisant reverseIterator, vous pouvez parcourir une liste de messages et les afficher dans l'ordre souhaité sans avoir besoin de créer un nouveau tableau inversé.

function objectEntries(obj) {
  const entries = [];

  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      entries.push([key, obj[key]]);
    }
  }

  return entries;
}

Cette méthode unique vous permet de parcourir un tableau tout en vous assurant que seules des valeurs uniques sont renvoyées. C'est super utile pour éliminer les doublons à la volée, sans les filtrer au préalable et en utilisant plus de mémoire.

function objectEntries(obj) {
  return {
    [Symbol.iterator]() {
      const keys = Object.keys(obj);
      let index = 0;

      return {
        next() {
          if (index 



<p>La méthode des blocs ci-dessous peut être utile lorsque vous traitez de grands ensembles de données, vous pouvez les traiter en morceaux plus petits pour réduire l'utilisation de la mémoire et améliorer les performances. Disons que vous importez des données à partir de quelque chose comme un fichier CSV, vous pouvez les lire et les traiter dans des segments plus évolutifs. De plus, dans les interfaces utilisateur Web, le chunking peut être utilisé pour la pagination, vous permettant d'afficher un nombre spécifique d'éléments par page ou de mieux gérer un chargeur infini.<br>
</p>

<pre class="brush:php;toolbar:false">Array.prototype.reverseIterator = function() {
  let index = this.length - 1;
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        if (index >= 0) {
          return { value: this[index--], done: false };
        }
        return { done: true };
      }
    })
  };
};

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers.reverseIterator()) {
  console.log(num); // 5, 4, 3, 2, 1
}

Conclusion

Dans cet article, nous avons exploré comment Symbol.iterator personnalise la logique et améliore l'efficacité de nos boucles. En implémentant des méthodes itérables personnalisées sur Array.prototype (ou tout autre itérable à cet effet), nous pouvons gérer efficacement l'utilisation de la mémoire et contrôler le fonctionnement de notre boucle.

L'exemple initial de objectEntries a démontré comment une approche basée sur un tableau peut entraîner des problèmes de performances lors de la gestion d'objets volumineux. Cependant, en utilisant SYmbol.iterator, nous avons créé une solution efficace qui nous permet de parcourir les entrées d'objet sans la surcharge d'une allocation de mémoire inutile.

Nous avons également examiné plusieurs exemples pratiques de la façon dont l'extension du Array.prototype peut faciliter divers scénarios du monde réel auxquels les développeurs doivent faire face au quotidien.

Avec ces outils puissants à votre disposition, vous êtes mieux équipé pour résoudre des scénarios complexes de gestion de données en JavaScript avec des implications proches de zéro sur les performances de votre application.

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!