JavaScript-Array-[Symbol.iterator]()-Methode

Array 对象参考手册JavaScript Array-Objekt

Beispiel

Rufen Sie das Iterator-Objekt eines Arrays ab und geben Sie es in einer Schleife aus:

const fruits = ['apple', 'banana', 'orange']; //1. Iterator-Objekt des Arrays abrufen const iterator = fruits[Symbol.iterator](); //2. Manuell die next()-Methode des Iterators aufrufen console.log(iterator.next()); // { value: 'apple', done: false } console.log(iterator.next()); // { value: 'banana', done: false } console.log(iterator.next()); // { value: 'orange', done: false } console.log(iterator.next()); // { value: undefined, done: true } //3. Die for...of-Schleife verwenden (sie ruft intern automatisch [Symbol.iterator]() auf) for (const fruit of fruits) { console.log(fruit); } //Ausgabe: // apple // banana // orange //4. Den Spread-Operator verwenden (er stützt sich ebenfalls auf den Iterator) const fruitCopy = [...fruits]; console.log(fruitCopy); // ['apple', 'banana', 'orange']

Selbst ausprobieren »

Definition und Verwendung

[Symbol.iterator]()Es ist eine eingebaute Methode von JavaScript-Arrays, die den Standard-Iterator des Arrays zurückgibt. Diese Methode macht das Array zu einem iterierbaren Objekt, dasfor...ofvon Schleifen und anderen Konstrukten verwendet werden kann.

Was ist ein Iterator?

Bevor wir[Symbol.iterator]()die Methode erklären, müssen wir zuerst verstehen, was ein Iterator ist.

Ein Iterator ist ein Protokoll in JavaScript, das definiert, wie sequenziell auf die Elemente einer Sammlung zugegriffen wird. Jedes Objekt, das das Iterator-Protokoll implementiert, kannfor...ofvon Schleifen, dem Spread-Operator (...) und anderen JavaScript-Funktionen verwendet werden.

Ein Iterator-Objekt muss einenext()Methode implementieren, die ein Objekt mit zwei Eigenschaften zurückgibt:

  • value: der Wert der aktuellen Iteration
  • done: ein boolescher Wert, der angibt, ob die Iteration abgeschlossen ist

Grundlegende Syntax

const iterator = array[Symbol.iterator]();

Beispielcode

Schauen wir uns ein einfaches Beispiel an:

Beispiel

const fruits = ['apple', 'banana', 'orange'];

// Iterator des Arrays abrufen
const iterator = fruits[Symbol.iterator]();

console.log(iterator.next()); // { value: 'apple', done: false }
console.log(iterator.next()); // { value: 'banana', done: false }
console.log(iterator.next()); // { value: 'orange', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

In diesem Beispiel:

  1. erstellte ein Array mit drei Früchten
  2. durch die[Symbol.iterator]()Methode, den Iterator des Arrays erhalten
  3. Rufe wiederholt dienext()Methode des Iterators auf, um jedes Element des Arrays nacheinander zu erhalten.

Praktische Anwendungsszenarien

1. Verwendung der for...of-Schleife

for...ofDie Schleife ruft intern automatisch die des Arrays auf[Symbol.iterator]()Methode:

Beispiel

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// Ausgabe:
// red
// green
// blue

2. Verwendung des Spread-Operators

Der Spread-Operator verlässt sich ebenfalls auf das Iterator-Protokoll:

Beispiel

const numbers = [1, 2, 3];
const copiedNumbers = [...numbers];

console.log(copiedNumbers); // [1, 2, 3]

3. Destrukturierende Zuweisung

Array-Destrukturierung verwendet ebenfalls den Iterator:

Beispiel

const [first, second] = ['a', 'b', 'c'];
console.log(first); // 'a'
console.log(second); // 'b'

Anpassen des Array-Iterationsverhaltens

Obwohl selten benötigt, können Sie die Standardmethode des Arrays überschreiben,[Symbol.iterator]()um das Iterationsverhalten anzupassen:

Beispiel

const customArray = [1, 2, 3];

customArray[Symbol.iterator] = function() {
  let index = this.length;
 
  return {
    next: () => {
      index--;
      return {
        value: this[index],
        done: index < 0
      };
    }
  };
};

for (const num of customArray) {
  console.log(num);
}
// Ausgabe:
// 3
// 2
// 1

In diesem Beispiel haben wir den Iterator so geändert, dass das Array von hinten nach vorne durchlaufen wird.

Vergleich mit anderen Iterationsmethoden

Unterschiede zu forEach()

  • forEach()ist eine Array-Methode, die eine Callback-Funktion für jedes Element ausführt
  • [Symbol.iterator]()gibt ein Iterator-Objekt zurück, was eine flexiblere Kontrolle über den Iterationsprozess ermöglicht

Beziehung zu keys()/values()/entries()

Diese Methoden geben alle Iteratoren zurück, haben aber unterschiedliche Verwendungszwecke:

  • keys(): gibt einen Iterator für die Array-Indizes zurück
  • values(): gibt einen Iterator für die Array-Elemente zurück (gleich wie[Symbol.iterator]())
  • entries(): gibt einen Iterator für Index/Wert-Paare zurück

Browser-Kompatibilität

Array [Symbol.iterator]()Die Methode wird in den folgenden Umgebungen unterstützt:

  • Chrome 38+
  • Firefox 36+
  • Edge 12+
  • Safari 9+
  • Opera 25+
  • Node.js 0.12+

Zusammenfassung

Array [Symbol.iterator]()Die Methode ist entscheidend dafür, dass JavaScript-Arrays das iterierbare Protokoll implementieren. Zu verstehen, wie diese Methode funktioniert, kann dir helfen:

  1. Ein tieferes Verständnis des Iterationsmechanismus von JavaScript gewinnen
  2. Schreiben Sie effizienteren Iterationscode
  3. Passen Sie das Iterationsverhalten bei Bedarf an

Denken Sie daran, dass Sie diese Methode in den meisten Fällen nicht direkt aufrufen müssen, dennfor...ofSchleifen und andere Sprachfunktionen erledigen das intern. Aber wenn Sie verstehen, wie es funktioniert, werden Sie ein besserer JavaScript-Entwickler.

Array 对象参考手册JavaScript Array-Objekt

Andere Erweiterungen