Explication détaillée des principes d'implémentation des tableaux de classes JavaScript et des objets itérables

[Recommandations associées : didacticiel vidéo JavaScript, front-end Web]

objets itérables

est un objet spécial, et sa différence par rapport aux objets ordinaires ne réside pas seulement dans l'accès séquentiel et le stockage des éléments. Une autre différence importante est que les tableaux sont itérables, c'est-à-dire que vous pouvez utiliser for ... of pour accéder (itérer) à tous les éléments.

Nous pouvons simplement faire une petite expérience :

soit arr = [1,2,3,4,5]for(let val of arr){
    console.log(val)}

résultats de l'exécution du code :

Le code ci-dessus utilise simplement la fonctionnalité d'itération du tableau. Lorsque nous accédons aux éléments du tableau, nous n'avons pas besoin d'utiliser l'indice de l'élément.

Que se passe-t-il si nous utilisons l'instruction for ... of sur un objet normal ?

soit obj = {
    nom: 'xiaoming',
    age:12,}for(let para of obj){ //Le code signalera une erreur console.log(para)}

L'effet d'exécution est le suivant :

Cela prouve qu'il existe un écart itérable entre les objets ordinaires et les tableaux. Nous appelons les objets avec des fonctions itératives des objets itérables .

Symbol.iterator

Si nous voulons qu'un objet soit itérable, nous devons ajouter une méthode appelée Symbol.iterator à l'objet (un Symbol intégré qui rend spécifiquement les objets itérables).

Les fonctions de la méthode incluent :

1. Lorsque vous utilisez for ... of pour itérer un objet, la méthode Symbol.iterator sera appelée et cette méthode doit renvoyer un itérateur (un objet avec une méthode next() ).
2. Après avoir obtenu l'itérateur, for ... of appellera continuellement la méthode next() de l'itérateur pour obtenir l'élément suivant.
3. Le contenu renvoyé par la méthode next() doit être conforme au format : {done:Boolean,value:any} . Lorsque done:true , la boucle se termine, sinon value est la valeur suivante.

Itérateur : L'itérateur

est un concept emprunté à des langages tels que C++ . Le principe de l'itérateur est comme un pointeur. Il pointe vers un élément dans la collection de données. Vous pouvez obtenir l'élément vers lequel il pointe ou le déplacer. pour obtenir d'autres éléments. Les itérateurs sont similaires à l'expansion des indices dans les tableaux. Diverses structures de données, telles que les listes chaînées ( List ), les ensembles ( Set ) et les cartes ( Map ), ont des itérateurs correspondants.

Les itérateurs en JS sont spécialement conçus pour cette opération. L'itérateur obtenu à chaque fois pointe toujours initialement vers le premier élément, et l'itérateur n'a que le comportement next() jusqu'à ce que le dernier élément de l'ensemble de données soit obtenu. Nous ne pouvons pas déplacer de manière flexible la position de l'itérateur, donc la tâche de l'itérateur est de parcourir les éléments de l'ensemble de données dans un certain ordre .

Implémentez un objet itérable :

let obj = {
    de : 1,
    à:5,}obj[Symbol.iterator] = function(){
    //Renvoie un itérateur return {
        actuel : this.from,
        dernier: ceci.à,
        suivant(){
            si(this.current<this.last){
                return {done:false,value:this.current++}
            }autre{
                return {done:true}//fin de l'itération}
        }
    }}pour(laisser para de obj){
    console.log(para)}

effet d'exécution de code :

Notez que bien que les objets ci-dessus puissent être itérés, le matériau utilisé pour l'itération n'est pas un objet, mais l'itérateur (également un objet) renvoyé par Symbol.iterator .

Construire l'objet lui-même en un itérateur

Le code ci-dessus construit une fonction intégrée Symbol.iterator() , qui renvoie un objet itérateur. Nous pouvons également utiliser une autre manière d'implémenter les itérateurs : faire de l'objet lui-même un itérateur :

let obj = {
    de : 1,
    à:5,
    [Symbol.iterator](){
        this.current = this.from;
        renvoyer ceci ;//Renvoyer l'objet lui-même},
    next(){//Ajouter une méthode next à l'objet if(this.current<this.to){
            return {done:false,value:this.current++}
        }autre{
            retourner {done:true}
        }
    }}pour(laisser para de obj){
    console.log(para)}

L'effet d'exécution du code est le même que l'image ci-dessus.

Bien que le code soit plus concis en faisant cela, puisqu'aucun nouvel objet itérable n'est généré, nous ne pouvons pas exécuter deux boucles for ... of pour itérer le même objet en même temps, mais deux itérations parallèles sont sur le même objet, c'est très. rare.

Nous pouvons résumer le concept d'objets itérables :

les objets dits itérables sont des objets ordinaires qui ont une méthode appelée Symbol.iterator de plus que les objets ordinaires. Cette méthode renvoie un itérateur.

Alternativement, un objet avec Symbol.iterator et une méthode next est également un objet itérable.

La chaîne est également itérable.

Les tableaux et les chaînes sont itérables. Nous pouvons facilement utiliser for...of pour parcourir les éléments de caractère du tableau :

let str = '123'for(let c of str){.
    console.log(c)}

Ceci est également valable pour les paires de substitution (caractères étendus UTF-16 ) :

let str = '...'for(let c of str){
    console.log(c)}

L'effet d'exécution est le suivant :

Les itérateurs de chaînes

ne sont pas seulement for...of instructions qui peuvent utiliser des itérateurs, nous pouvons aussi appeler explicitement des itérateurs :

let str = '12345'let itr = str[Symbol.iterator]()while(true){
    soit le résultat = itr.next()
    if(result.done)break;
    console.log(result.value)}

effet d'exécution de code :

Le code ci-dessus effectue l'opération de parcours des caractères d'une chaîne. Ne pensez-vous pas que les objets itérables ne sont plus si mystérieux !

Objets de type tableau et objets itérables

Les objets de type tableau et les objets itérables sont très similaires en termes de fonctions de parcours.Les deux peuvent accéder facilement aux éléments internes, mais il existe toujours des différences évidentes entre les deux :

1. objets itérables iterable : objets qui implémentent Symbol.iterator ;
2. objet de type array-like : a un index numérique et un attribut length ;

une chaîne est un objet itérable même s'il s'agit d'un objet de type tableau.

Les objets itérables et de type tableau ne sont généralement pas des tableaux. Si nous voulons convertir un objet itérable ou de type tableau en tableau, nous devons utiliser la méthode Array.from .

Array.from

Utilisez Array.from pour convertir une chaîne en tableau :

let str = '123' let arr = Array.from(str)console.log(arr)

L'effet d'exécution du code est le suivant :

Convertissez un objet personnalisé de type tableau en tableau :

let obj = {
    0 : '0',
    1 : '1',
    2 : '2',
    length:3}let arr = Array.from(obj)console.log(arr)

résultat de l'exécution du code :

La syntaxe complète de Array.from :

Array.from(obj[, mapFunc, thisArg])

mapFunc sera appelée sur chaque élément itérable ou de type tableau avant de générer le tableau. Si mapFunc est une méthode membre, vous pouvez utiliser thisArg pour fournir le this pointeur.

Par exemple :

let str = '12345'let arr = Array.from(str,itm=>+itm)console.log(arr)

résultat de l'exécution du code :

Ici, la fonction de mappage est utilisée pour convertir le tableau de caractères qui doit être généré en un tableau numérique.

Résumé

1. Les objets qui peuvent utiliser for...of sont appelés objets itérables.
2. Les objets itérables sont des objets qui implémentent Symbol.iterator sur la base d'objets ordinaires.
3. La méthode Symbol.iterator renvoie un itérateur
4. qui contient une méthode next
;
5. , cette méthode renvoie la valeur de l'élément suivant ;
la valeur de

6. Array.from

7. de next doit respecter le format {done:Boolean,value:nextVal} . Une fois done:true , l'itération se termine.

8. objets itérables dans des tableaux.

[Recommandations associées : didacticiels vidéo JavaScript, interface Web]

Ce qui précède est une explication détaillée des principes d'implémentation des tableaux de classes JavaScript et des objets itérables. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le. réseau de code source !