ES6 -Generatoren und Iteratoren: Der Leitfaden eines Entwicklers

ES6 hat die JavaScript -Sprache viele neue Funktionen eingeführt. Zwei dieser Funktionen, Generatoren und Iteratoren, haben die Art und Weise, wie wir bestimmte Funktionen in komplexeren Front-End-Code schreiben, stark verändert.

Während sie gut zusammenarbeiten, können ihre tatsächlichen Funktionen etwas verwirrend sein. Schauen wir uns also genauer an.

Schlüsselpunkte

• ES6 bietet eine sauberere Möglichkeit zum Schreiben für Schleifen und bietet eine pythonartigere Möglichkeit, direkt mit Elementen im Datensatz zu interagieren, wodurch der Code leichter zu lesen und zu schreiben ist.
• Der Generator in ES6 ist eine Funktion, die sich an den Zustand zwischen jedem Aufruf erinnert. Sie können den nächsten Wert in der Sequenz jedes Mal generieren, wenn sie aufgerufen werden, wodurch benutzerdefinierte Iterationen effektiv erzeugt werden.
• Das Schlüsselwort "Ertrag" in der Generatorfunktion ist ähnlich wie "Return", behält jedoch den Status der Funktion auf, sodass sie die Ausführung vom Interrupt beim nächsten Anruf fortsetzen kann.
• Während Knoten und moderne Browser ES6 -Funktionen unterstützen, müssen ältere Browser Übersetzer wie Babel benötigen, um den ES6 -Code in den Codes für ECMAScript 5 zu konvertieren.

Iterator

Iteration ist eine gängige Praxis bei der Programmierung, die normalerweise verwendet wird, um eine Reihe von Werten zu durchschleifen, jeden Wert zu konvertieren oder zu verwenden oder auf eine spätere Verwendung zu speichern.

In JavaScript hatten wir immer eine für Schleife:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

Aber ES6 gibt uns eine andere Option:

for (const i of foo) {
  // 对i执行某些操作
}

Dies ist wohl prägnanter und einfacher zu bedienen und erinnert mich an Sprachen wie Python und Ruby. Es gibt jedoch eine andere sehr wichtige Sache über diese neue Iteration: Sie können direkt mit Elementen des Datensatzes interagieren.

Angenommen, wir möchten herausfinden, ob jede Zahl im Array eine Primzahl ist. Wir können dies tun, indem wir eine Funktion erstellen, die dies tut. Es könnte so aussehen:

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

Nicht das Beste der Welt, aber es funktioniert. Der nächste Schritt besteht darin, unsere Liste der Zahlen zu durchschleifen und zu überprüfen, ob jede Zahl mit unserer glänzenden neuen Funktion die Primzahl ist. Es ist sehr einfach:

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes现在是[73, 19]

wieder funktioniert es, aber es ist ungeschickt, und dieser ungeschickte Abhängigkeit hängt weitgehend davon ab, wie JavaScript für Schleifen gehandelt. Mit ES6 erhalten wir jedoch eine fast pythonähnliche Option im neuen Iterator. Daher kann der vorherige für die Schleife so geschrieben werden:

const possiblePrimes = [73, 6, 90, 19, 15];
const confirmedPrimes = [];

for (const i of possiblePrimes){
   if ( isPrime(i) ){
      confirmedPrimes.push(i);
   }
}

// confirmedPrimes现在是[73, 19]

Dies ist viel sauberer, aber das auffälligste ist für Schleife. Die Variable I repräsentiert jetzt das tatsächliche Element in einem Array namens SocialPrimes. Daher müssen wir es nicht mehr per Index aufrufen. Dies bedeutet, dass wir in der Schleife keine SocialPrimes [i] anrufen müssen, sondern nur ich.

hinter den Kulissen nutzt diese Iteration die glänzende neue Symbol von ES6. Diese Methode ist für die Beschreibung der Iteration verantwortlich und gibt, wenn er aufgerufen wird, ein JavaScript -Objekt zurück, das den nächsten Wert in der Schleife und einen fertiggestellten Schlüssel enthält, was wahr oder falsch ist, je nachdem, ob die Schleife abgeschlossen ist.

Wenn Sie an diesem Detail interessiert sind, können Sie diesen wundervollen Blog -Beitrag "Iteratoren" von Jake Archibald lesen. Wenn wir uns in einen anderen Teil dieses Artikels befassen: dem Generator, gibt es Ihnen auch eine gute Vorstellung davon, was hinter den Kulissen vor sich geht.

Generator

Der Generator (auch als "Iter Factory" bezeichnet) ist eine neue Art von JavaScript -Funktion, mit der bestimmte Iterationen erstellt werden. Sie bieten Ihnen eine spezielle, benutzerdefinierte Möglichkeit, sich durch Inhalte zu verschieben.

Okay, was bedeutet es? Schauen wir uns ein Beispiel an. Angenommen, wir wollen eine Funktion, und jedes Mal, wenn wir sie nennen, erhalten wir die nächste Primzahl:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

Wenn Sie an JavaScript gewöhnt sind, sieht einige dieser Dinge ein bisschen wie Hexerei aus, aber es ist in der Realität nicht schlecht. Wir haben diesen seltsamen Stern nach der Keyword -Funktion, aber das sagt JavaScript nur, dass wir einen Generator definieren.

Ein weiterer seltsamer Teil ist das Keyword. Dies ist tatsächlich das, was der Generator ausspuckt, wenn Sie es nennen. Es entspricht ungefähr zurück, um zurückzukehren, behält jedoch den Zustand der Funktion bei, anstatt jedes Mal, wenn sie aufgerufen wird, alles erneut zu überlegen. Es "erinnert" an seinen Standort zur Laufzeit. Wenn Sie es das nächste Mal nennen, wird es vom Interrupt fortgesetzt.

Dies bedeutet, dass wir dies tun können:

for (const i of foo) {
  // 对i执行某些操作
}

Dann können wir als NextPrime:

anrufen:

function isPrime(number) {
  if (number <= 1) {
    return false;
  } else if (number === 2) {
    return true;
  }

  for (var i = 2; i < number; i++) {
    if (number % i === 0) {
      return false;
      break;
    }
  }

  return true;
}

Sie können auch NextPrime.next () anrufen, was nützlich ist, wenn Ihr Generator nicht unendlich ist, da es ein Objekt wie folgt zurückgibt:

var possiblePrimes = [73, 6, 90, 19, 15];
var confirmedPrimes = [];

for (var i = 0; i < possiblePrimes.length; i++) {
  if (isPrime(possiblePrimes[i])) {
    confirmedPrimes.push(possiblePrimes[i]);
  }
}

// confirmedPrimes现在是[73, 19]

Hier wird in der Taste ausgezeichnet, ob die Funktion ihre Aufgabe abgeschlossen hat. In unserem Fall endet unsere Funktion nie, was uns theoretisch alle Primzahlen bis in die Unendlichkeit verleiht (wenn wir so viel Computerspeicher haben).

Es ist cool, also kann ich jetzt Generatoren und Iteratoren verwenden?

Obwohl die ECMascript 2015 abgeschlossen ist und seit vielen Jahren gibt, ist die Browser -Unterstützung für seine Funktionen (insbesondere Generatoren) alles andere als perfekt. Wenn Sie diese und andere moderne Funktionen wirklich verwenden möchten, können Sie Übersetzer wie Babel und Traceur ansehen, die Ihren Codes für ECMAScript 2015 in einen äquivalenten (wenn möglich) ECMascript 5 -Code umwandeln.

Es gibt auch viele Online -Redakteure, die ECMAScript 2015 unterstützen oder sich speziell darauf konzentrieren, insbesondere auf den Regenerator von Facebook und JS Bin. Wenn Sie nur spielen und lernen möchten, wie JavaScript jetzt geschrieben ist, sind diese einen Blick wert.

Schlussfolgerung

Generatoren und Iteratoren bieten viel neue Flexibilität für unseren Ansatz für JavaScript -Probleme. Mit Iteratoren können wir auf pythonartigere Weise für Schleifen schreiben, was bedeutet, dass unser Code sauberer und leichter zu lesen aussieht.

Generatorfunktionen ermöglichen es uns, Funktionen zu schreiben, die sich daran erinnern, wo sie zuletzt gesehen wurden, und können die Ausführung vom Interrupt fortsetzen. Sie können auch unendlich sein, was sie tatsächlich erinnern, was in einigen Fällen sehr bequem ist. <🎜>

Die Unterstützung für diese Generatoren und Iteratoren ist gut. Sie werden im Knoten und in allen modernen Browsern mit Ausnahme von Internet Explorer unterstützt. Wenn Sie ältere Browser unterstützen müssen, besteht der beste Weg, einen Übersetzer wie Babel zu verwenden.

FAQs über ECMascript 2015 Generatoren und Iteratoren (FAQ)

Was ist der Unterschied zwischen Iteratoren und Generatoren in ECMascript 2015?

Iteratoren und Generatoren sind beide Merkmale von ECMascript 2015 und werden verwendet, um Datenfluss zu verarbeiten. Ein Iterator ist ein Objekt, mit dem der Programmierer alle Elemente in einer Sammlung iterieren kann. Es hat eine nächste () -Methode, die das nächste Element in der Sequenz zurückgibt. Andererseits ist der Generator eine Funktion, die auf halbem Weg stehen und dann vom Stopp fortgesetzt werden kann. Mit anderen Worten, der Generator sieht aus wie eine Funktion, verhält sich aber wie ein Iterator.

Wie verwendet ich den Keyword in ECMascript 2015?

Ertragsschlüsselwort wird für die ECMASScript 2015 -Pause und Wiederherstellungsgeneratorfunktionen (Funktion* oder Legacy -Generatorfunktionen) verwendet. Ausbeute kann einen Wert aus der Generatorfunktion zurückgeben. Dieser Rückgabewert ist normalerweise ein Objekt mit zwei Eigenschaften: Wert und fertig. Das Wertattribut ist das Ergebnis der Berechnung des Ertragsausdrucks und erfolgt ein boolescher Wert, der angibt, ob der Generator seinen letzten Wert generiert hat.

Was ist der Zweck der nächsten () Methode in ECMascript 2015?

Die nächste () Methode ist ein wesentlicher Bestandteil des Iteratorprotokolls in ECMAScript 2015. Es gibt ein Objekt mit zwei Eigenschaften zurück: Wert und fertig. Das Wertattribut ist der nächste Wert in der Iterationssequenz, und ein boolescher Wert, der angibt, ob die Iteration abgeschlossen ist. Wenn er wahr ist, hat der Iterator das Ende der Iterationssequenz überschritten.

Wie kann man Generatoren für asynchrone Programmierungen in ECMascript 2015 verwenden?

Der Generator in ECMascript 2015 kann verwendet werden, um die asynchrone Programmierung zu vereinfachen. Sie können verwendet werden, um die Ausführung zu blockieren, um zu warten, bis der asynchrone Betrieb abgeschlossen ist, ohne das gesamte Programm zu blockieren. Dies kann den asynchronen Code aussehen und sich eher wie Synchroncode verhalten, was leichter zu verstehen und zu begründen ist.

Was ist der Unterschied zwischen der Schleife und für… in der Schleife in ECMascript 2015?

Die für… der Schleife in ECMascript 2015 wird verwendet, um durch iterable Objekte wie Arrays, Zeichenfolgen, Karten, Sammlungen usw. zu schleifen. Es ruft benutzerdefinierte iterative Hooks mit Anweisungen auf, die für den Wert jedes unterschiedlichen Attributs ausgeführt werden. Andererseits wird die für… in Schleife verwendet, um die Eigenschaften eines Objekts zu durchschleifen. Es gibt eine Liste von Schlüssel für das iterierte Objekt zurück.

Wie erstelle ich einen benutzerdefinierten Iterator in ECMascript 2015?

In ECMascript 2015 können Sie einen benutzerdefinierten Iterator erstellen, indem Sie ein Objekt mit der nächsten () Methode definieren. Diese Methode sollte ein Objekt mit zwei Eigenschaften zurückgeben: Wert und ausgeführt. Das Wertattribut ist der nächste Wert in der Iterationssequenz, und ein boolescher Wert, der angibt, ob die Iteration abgeschlossen ist.

Welche Rolle spielt der Symbol. Kiterator in ECMascript 2015?

symbol.iterator ist ein speziell eingebautes Symbol in ECMAScript 2015. Es wird verwendet, um den Standard -Iterator für das Objekt anzugeben. Wenn ein Objekt iteriert werden muss (z. B. am Anfang von A for… of Loop), wird seine Iterator -Methode ohne Argumente aufgerufen, und der zurückgegebene Iterator wird verwendet, um den Wert zum ITERATE zu erhalten.

Können Sie ein Beispiel für Generatorfunktionen in ECMascript 2015 angeben?

Dies ist natürlich ein einfaches Beispiel für Generatorfunktionen in ECMascript 2015:

for (var i = 0; i < foo.length; i++) {
  // 对i执行某些操作
}

In diesem Beispiel ist die Idmaker -Funktion ein Generator, der eine Abfolge von Zahlen erzeugt.

Wie kann man Throw () -Methode und Generator in ECMascript 2015 verwenden?

Die Methode throw () in ECMascript 2015 kann im Generator verwendet werden, um die Ausführung der Generatorfunktion wiederherzustellen und einen Fehler aus dem Ertragsausdruck zu werfen. Die Methode throw () kann verwendet werden, um Fehler zu verarbeiten, die während der Ausführung der Generatorfunktion auftreten.

Welche Bedeutung hat das gemachtes Attribut im Iterator von ECMAScript 2015?

Das Eigentum

erledigt ist ein Boolean -Wert, der vom Iterator im ECMAScript 2015 zurückgegeben wurde. Es zeigt an, ob der Iterator über mehr Werte zurückgegeben werden muss. Wenn er wahr ist, hat der Iterator das Ende der Iterationssequenz überschritten. Wenn dies falsch ist, kann der Iterator immer noch mehr Werte erzeugen.

Das obige ist der detaillierte Inhalt vonES6 -Generatoren und Iteratoren: Der Leitfaden eines Entwicklers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!