Iterierbares JS-Objekt

ES6 führt das Konzept von Iteratoren und iterierbaren Objekten ein und bietet zugehörige Unterstützung für iterierbare Objekte, z. B. for...of-Schleife, Map-Konstruktor (iterierbar), Erweiterungssyntax usw. Lassen Sie uns auch den Durchlaufvorgang der Datenerfassung außerhalb des Arrays erheblich vereinfachen

 Iterierbares Objekt

Ein Array ist ein spezielles Objekt und der Unterschied zu gewöhnlichen Objekten besteht nicht nur im sequentiellen Zugriff und der Speicherung von Elementen. Ein weiterer wichtiger Unterschied: Arrays sind iterierbar, das heißt, for ... ofauf alle Elemente kann mithilfe von Anweisungen zugegriffen (iteriert) werden.

Eine normale Objektnutzungsanweisung meldet for ... ofeinen Fehler

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

let obj = {
    name:'Kite',
    age:23,
}
for(let key of obj) { // obj is not iterable
    console.log(key)
}

Spread-Operator 

// es5 apply
function consoleLog() {
  console.log(...arguments)
}
console.log(consoleLog.apply(null, array))

// es6 扩展预算符
const array = [1, 2, 3, 4]
console.log(...array); // 1,2,3,4


const obj = {
  name: 'kite',
  age: 23,
}
console.log(...obj); // TypeError: Found non-callable @@iterator

Symbol.iterator

Wenn wir möchten, dass ein Objekt iterierbar ist, müssen wir dem Objekt eine Symbol.iteratoraufgerufene SymbolMethode hinzufügen

• Wenn for ... ofeine Schleife zum Durchlaufen eines Objekts verwendet wird, Symbol.iteratorwird eine Methode aufgerufen, die einen Iterator (ein next()Objekt mit Methoden) zurückgeben muss.
• Nachdem der Iterator abgerufen wurde, for ... ofruft er kontinuierlich die Iterator- next()Methode auf, um das nächste Element abzurufen
• next()Der von der Methode zurückgegebene Inhalt muss dem Format entsprechen: Zu diesem Zeitpunkt{done:Boolean,value:any} endet die Schleife, andernfalls handelt es sich um den nächsten Wert.done:truevalue

Iteratoren:

Der Iterator basiert auf C++dem Konzept anderer Sprachen. Das Prinzip des Iterators ähnelt einem Zeiger. Er zeigt auf ein Element in der Datensammlung. Sie können das Element abrufen, auf das er zeigt, und Sie können es auch verschieben, um andere Elemente abzurufen . Iteratoren ähneln der Erweiterung von Indizes in Arrays, und verschiedene Datenstrukturen wie verknüpfte Listen ( List), Sammlungen ( Set) und Karten ( Map) verfügen über entsprechende Iteratoren.

JSDie Iteratoren in sind speziell für das Durchlaufen dieser Operation konzipiert. Der jedes Mal erhaltene Iterator zeigt zunächst immer auf das erste Element, und der Iterator weist nur next()ein Verhalten 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 = {
    name: 'Kite',
    age:23,
    [Symbol('id')]: 20000219
}
obj[Symbol.iterator] = function(){
    //返回一个迭代器
    return {
        index: 0,
        next: function () {
            const keys = Reflect.ownKeys(obj);
            if(this.index < keys.length - 1 ) {
                const key = keys[this.index];
                this.index++;
                return { done:false,value:obj[key] }
            } else {
                return { done:true, value: undefined }//迭代结束
            }
        }
    }
}
for(let value of obj){
    console.log(value)  // Kite 23 20000219
}
for(let key in obj){
  console.log(key)  // name age
}

Das Konzept iterierbarer Objekte:

Das sogenannte iterierbare Objekt ist ein Symbol.iteratorgewöhnliches Objekt mit einer Methode namens Methode, die einen Iterator zurückgibt. Alternativ ist ein Objekt mit Symbol.iteratorbeiden nextMethoden auch ein iterierbares Objekt.