Detaillierte Erläuterung der Implementierungsprinzipien von JavaScript-Klassenarrays und iterierbaren Objekten

[Verwandte Empfehlungen: JavaScript-Video-Tutorial, Web-Frontend]

iterierbarer Objekte

ist ein besonderes Objekt, und sein Unterschied zu gewöhnlichen Objekten besteht nicht nur im sequentiellen Zugriff und der Speicherung von Elementen. Ein weiterer wichtiger Unterschied besteht darin, dass Arrays iterierbar sind, d. h. Sie können for ... of Anweisung verwenden, um auf alle Elemente zuzugreifen (sie zu iterieren).

Wir können einfach ein kleines Experiment durchführen:

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

Ergebnisse der Codeausführung:

Der obige Code verwendet einfach die Iterationsfunktion des Arrays. Wenn wir auf die Array-Elemente zugreifen, müssen wir den Index des Elements nicht verwenden.

Was passiert, wenn wir die for ... of -Anweisung für ein normales Objekt verwenden?

sei obj = {
    Name:'xiaoming',
    age:12,}for(let para of obj){ //Der Code meldet einen Fehler console.log(para)}

Der Ausführungseffekt ist wie folgt:

Dies beweist, dass es eine iterierbare Lücke zwischen gewöhnlichen Objekten und Arrays gibt. Wir nennen Objekte mit iterativen Funktionen iterierbare Objekte .

Symbol.iterator

Wenn wir möchten, dass ein Objekt iterierbar ist, müssen wir dem Objekt eine Methode namens Symbol.iterator hinzufügen (ein integriertes Symbol , das Objekte speziell iterierbar macht).

Zu den Methodenfunktionen gehören:

1. Wenn Sie for ... of Schleife verwenden, um ein Objekt zu iterieren, wird die Methode Symbol.iterator aufgerufen, und diese Methode muss einen Iterator zurückgeben (ein Objekt mit einer next() -Methode).
2. Nach dem Abrufen des Iterators ruft for ... of kontinuierlich die next() -Methode des Iterators auf, um das nächste Element abzurufen.
3. Der von der Methode next() zurückgegebene Inhalt muss dem Format {done:Boolean,value:any} entsprechen. Wenn done:true , endet die Schleife, andernfalls ist value der nächste Wert.

Iterator: Iterator

ist ein Konzept, das aus Sprachen wie C++ entlehnt ist. Das Prinzip des Iterators ist wie ein Zeiger. Er kann auf ein Element in der Datensammlung verweisen oder es verschieben um andere Elemente zu bekommen. Iteratoren ähneln der Erweiterung von Indizes in Arrays. Verschiedene Datenstrukturen, wie z. B. verknüpfte Listen ( List ), Mengen ( Set ) und Karten ( Map ), verfügen über entsprechende Iteratoren.

Iteratoren in JS sind speziell für diesen Vorgang konzipiert. Der jedes Mal erhaltene Iterator zeigt zunächst immer auf das erste Element, und der Iterator weist nur das Verhalten next() auf, bis das letzte Element des Datensatzes abgerufen wird. Wir können die Position des Iterators nicht flexibel verschieben, daher besteht die Aufgabe des Iterators darin, die Elemente im Datensatz in einer bestimmten Reihenfolge zu durchlaufen .

Implementieren Sie ein iterierbares Objekt:

let obj = {
    von:1,
    to:5,}obj[Symbol.iterator] = function(){
    //Einen Iterator zurückgeben return {
        current:this.from,
        last:this.to,
        nächste(){
            if(this.current<this.last){
                return {done:false,value:this.current++}
            }anders{
                return {done:true}//Ende der Iteration}
        }
    }}for(let para of obj){
    console.log(para)}

Codeausführungseffekt:

Beachten Sie, dass die oben genannten Objekte zwar iteriert werden können, das für die Iteration verwendete Material jedoch kein Objekt ist, sondern der von Symbol.iterator zurückgegebene Iterator (auch ein Objekt).

Konstruieren des Objekts selbst in einen Iterator

Der obige Code erstellt eine integrierte Funktion Symbol.iterator() , die ein Iteratorobjekt zurückgibt. Wir können Iteratoren auch auf andere Weise implementieren: Machen Sie das Objekt selbst zu einem Iterator:

let obj = {
    von:1,
    bis:5,
    [Symbol.iterator](){
        this.current = this.from;
        return this;//Gib das Objekt selbst zurück},
    next(){//Fügen Sie dem Objekt eine nächste Methode hinzu if(this.current<this.to){
            return {done:false,value:this.current++}
        }anders{
            return {done:true}
        }
    }}for(let para of obj){
    console.log(para)}

Der Codeausführungseffekt ist der gleiche wie im Bild oben.

Obwohl der Code dadurch prägnanter wird, da kein neues iterierbares Objekt generiert wird, können wir nicht zwei for ... of -Schleifen gleichzeitig ausführen, um dasselbe Objekt zu iterieren, aber zwei parallele Iterationen erfolgen auf demselben Objekt selten.

Wir können das Konzept iterierbarer Objekte zusammenfassen:

Die sogenannten iterierbaren Objekte sind gewöhnliche Objekte, die über eine Methode namens Symbol.iterator mehr verfügen als gewöhnliche Objekte. Diese Methode gibt einen Iterator zurück.

Alternativ ist ein Objekt mit Symbol.iterator und einer next Methode auch ein iterierbares Objekt.

String ist auch iterierbar.

Wir können for...of einfach verwenden, um die Zeichenelemente im Array zu iterieren:

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

Dies gilt auch für Ersatzpaare (erweiterte UTF-16 -Zeichen):

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

Der Ausführungseffekt ist wie folgt:

String-Iteratoren

dienen nicht nur for...of Anweisungen, die Iteratoren verwenden können, wir können Iteratoren auch explizit aufrufen:

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

Codeausführungseffekt:

Der obige Code führt den Vorgang des Durchlaufens der Zeichen einer Zeichenfolge durch. Glauben Sie nicht, dass iterierbare Objekte nicht mehr so ​​mysteriös sind?

Array-ähnliche Objekte und iterierbare Objekte

sind in Bezug auf die Traversierungsfunktionen sehr ähnlich. Beide können bequem auf interne Elemente zugreifen, es gibt jedoch immer noch offensichtliche Unterschiede zwischen den beiden:

1. iterable iterierbare Objekte: Objekte, die Symbol.iterator implementieren ;
2. array-like Array-ähnliches Objekt: hat einen numerischen Index und ein length ;

ein String ist ein Objekt, das iterierbar ist, obwohl es ein Array-ähnliches Objekt ist.

Iterierbare und Array-ähnliche Objekte sind normalerweise keine Arrays. Wenn wir ein iterierbares oder Array-ähnliches Objekt in ein Array konvertieren möchten, müssen wir die Methode Array.from verwenden.

Array.from

Verwenden Sie Array.from um eine Zeichenfolge in ein Array umzuwandeln:

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

Der Codeausführungseffekt ist wie folgt:

Konvertieren Sie ein benutzerdefiniertes Array-ähnliches Objekt in ein Array:

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

Ergebnis der Codeausführung:

Die vollständige Syntax von Array.from :

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

mapFunc wird für jedes iterierbare oder arrayähnliche Element aufgerufen, bevor das Array generiert wird. Wenn mapFunc eine Mitgliedsmethode ist, können Sie thisArg verwenden um den this Zeiger bereitzustellen.

Zum Beispiel:

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

Ergebnis der Codeausführung:

Hier wird die Mapping-Funktion verwendet, um das zu generierende Zeichenarray in ein numerisches Array umzuwandeln.

Zusammenfassung

1. Objekte, die for...of -Syntax verwenden können , werden als iterierbare Objekte bezeichnet
2. next
die die Methode
3. Symbol.iterator
4. Symbol.iterator der Grundlage gewöhnlicher Objekte implementieren
5. , diese Methode gibt den Wert des nächsten Elements zurück;
6. der Rückgabewert next Methode muss dem Format {done:Boolean,value:nextVal} entsprechen. Wenn done:true ,

7. kann Array.from Klassenarrays konvertieren Iterierbare Objekte in Arrays.

[Verwandte Empfehlungen: JavaScript-Video-Tutorials, Web-Frontend]

Weitere Informationen finden Sie in anderen verwandten Artikeln Quellcode-Netzwerk!