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++) {
  // 對(duì)i執(zhí)行某些操作
}

Aber ES6 gibt uns eine andere Option:

for (const i of foo) {
  // 對(duì)i執(zhí)行某些操作
}

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現(xiàn)在是[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現(xiàn)在是[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++) {
  // 對(duì)i執(zhí)行某些操作
}

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) {
  // 對(duì)i執(zhí)行某些操作
}

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現(xiàn)在是[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++) {
  // 對(duì)i執(zhí)行某些操作
}

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!