Das vollständige Javascript und ES6 Tutorial – (einschließlich ES7 und React) [2/2]

1. Presenting: Klassen in JavaScript ermöglicht es, Modelle von Objekten basierend auf relevanten Daten und Verhalten von realen Objekten zu erstellen. Dies führt ein System der Vererbung zwischen verwandten Klassen ein. Dies hilft uns, Ähnlichkeit zwischen Objekten zu finden. Programme beschreiben dann, wie diese Objekte latent waren, interagieren miteinander, um Daten zu berechnen und Bedingungen auszuwerten. Um eine Klasse zu definieren, haben wir das Schlüsselwort class verwendet und geben einer Klasse die zugewiesenen Daten mit einer speziellen Konstruktorfunktion , die der Konstruktor erstellt und initialisiert, ist ein Objekt für diese Klasse basierend auf den eindeutigen Informationen, die wir ihm geben möchten. Wenn Sie neue Klassen basierend auf vorhandenen erstellen möchten, können wir jetzt das Schlüsselwort extends verwenden, um Unterklassen und Kinder von übergeordneten Klassen zu machen . Lassen Sie uns Klassen mit einem Beispiel erkunden, und wir werden uns an das Thema halten, mit dem Sie vielleicht vertraut sind und etwas, das Ihnen gefallen könnte. Der König der Löwen. Jetzt ist jeder in Der König der Löwen von Simba tis, wie Sie ein Tier ist, so an der Basis wird auf Tierklasse haben. Dieses Tier hat dann einige sehr grundlegende Objektdaten, wie einen Namen und einen Hype. Es wird sogar eine Methode haben, die Hello genannt wird. Das sagt eine Nachricht von dem, was sein Name ist und woher er er kommt. Andere Klassen werden in der Lage sein, sich auf diese tierische Klasse zu erstrecken. Nehmen wir an, wir haben eine Lügenklasse, die Tier ausdehnt. Es wird den Namen und Wartedaten von Animal erben, aber wir könnten seine Daten ein wenig für eine Zeile ändern. Wir könnten es noch mehr Daten geben, wie die Farbe seiner für und aktualisieren Sie die hallo Meth es, um seinen Namen zu sagen und dass es von Pride Rock. Ausgezeichnet. Jetzt kann sich diese Logik auf eine Vielzahl von Klassen erstrecken und auch vom Tier erben. Und Sie können sich die schiere Anzahl der Objekte vorstellen, die wir präsentieren könnten. Immerhin haben wir im Land Giraffen, Vögel, Warzenschweine und viele weitere mögliche Klassen, die auf dieser einen Tierklasse basieren. Gehen wir weiter, um diese Klassen in Aktion zu sehen 2. Kurse definieren: Lassen Sie uns unsere erstklassige Situation schaffen, indem Sie dieser Zeile folgen. König-Beispiel. Zuerst wollen wir eine Tierklasse, also verwenden Sie ein Klassenschlüsselwort und wir nennen es Tier. Und dann für den Körper der Klasse ist es nur ein Paar geschweifter Klammern wie jeder andere Bereich oder Funktion. Nun, innerhalb dieser Klasse, um die Objektdaten zu initialisieren, verwenden wir die spezielle Konstruktorschlüsselarbeit. Der Konstruktor kann eine beliebige Anzahl von Parametern annehmen. Wir entscheiden abhängig von den relevanten Daten für diese spezifische Klasse. Also denken Sie daran, dass wir einen Namen und eine Höhe für alle unsere Tiere wollen Jetzt, innerhalb des Konstruktors, können wir beginnen, das Objekt zu ändern, das für die Klasse mit dem Schlüsselwort this erstellt wird. Also müssen wir das spezifizieren. Sind dies für das Tier hat jetzt einen Schlüssel des Namens ein Zeichen des Namens, dass wir innerhalb der Konstruktoren Argumentliste übergeben . Sagen Sie also, dieser Stop-Name entspricht Name. Ebenso braucht dies für die Klasse einen High Tea ein Zeichen für die Höhe, die wir als zweiten Parameter übergeben . Diese Saadhöhe ist unsere Höhe. Lassen Sie sich nicht verwirren durch die Tatsache, dass wir einen Namen auf der linken und rechten Seite haben. Die Namensvariable, die Sie auf der rechten Seite sehen, bezieht sich auf den Namen, der durch den Konstruktor geht. Ebenso bezieht sich die Höhe, die sich auf der rechten Seite auf die Höhenvariable, die durch den Konstruktor übergeben wird . Und wir könnten das eigentlich alles nennen, was wir wollen, wie A oder B, solange Sie angegeben haben, dass dieser nicht Name jetzt gleich a ist, diese Höhe gleich sein. Lassen Sie uns diese Änderungen rückgängig machen. Alles sieht gut aus für das Tier konstruiert. Wir können am besten veranschaulichen, wie diese Klasse funktioniert, indem wir eine neue Instanz der Tierklasse . Erstellen Sie also einen neuen variablen König lassen König gleich und weisen Sie ihn dem neuen Schlüsselwort zu, gefolgt von Tier und ein Paar Klammern. Die neuen Schlüsselwörter bedeuten, dass JavaScript die Suche nach einer Klasse oder einem Objekttyp. Sehen Sie sich das Tier und seine Klammern an. Sie bemerken, dass es einer Funktion sehr ähnlich aussieht, die in diesen Klammern liegt. Genau wie eine Funktion. Wir können angeben, was wir als Parameter an das konstruierte jetzt übergeben wollen, also lassen Sie uns es verschieben Fossa für seinen Namen mehr Fatah und dann 4.5 für seine Höhe, weil mein Chef eine ziemlich hohe Linie ist, wie wir speichern. Wir sollten jetzt eine Königsklasse Variable haben. Und dann lassen Sie uns einfach voran und Rat Dot Log King und überprüfen Sie Be Konstanten. Lasst uns retten und boom. Wir haben eine neue Tierklasse mit dem Namen Move Fossa und einer Höhe von 4.5. Sehr cool. Nun, wie wäre es mit dem Hinzufügen einer speziellen Methoden? Die Klasse namens HELa, die uns einen schönen Gruß über den Namen der Tiere gibt und woher es kommt ? Lassen Sie uns den Konstruktor um acht sehen. Hallo, Method. Direkt nach Konstruktor, Sag hallo und dann wird dieser Gruß etwas wie hoch auf dem plötzlichen Namen aus dem Tierreich sagen . Also verwenden wir eine Tablet-Zeichenfolge, um dies zu erreichen. Wird Konsul dot ein Temp Littering hoch protokollieren? Ich bin dieser Punktname, und um auf diesen Sohn zugreifen zu können, benutzen wir das Dollarzeichen und ein Paar geschweifte Klammern. Dann können wir einfach den Lagernamen sagen, weil wir unser Objekt innerhalb der Klasse Tier haben . Jetzt gab es nur, sagen wir, aus dem Tierreich, Groß und diese Methode nicht zu verwenden. Lassen Sie uns dieses ständige Protokoll herausnehmen und wie ein Objekt greifen wir darauf mit dem Periode König Punkt Hallo zu, wie wir speichern. Hi, ich bin Mufasa vom Tierreich und schön, dich kennenzulernen. Bewegen Sie Fossa. Großartig. Wir haben gerade unsere erste Tierklasse in Aktion gesehen. Gehen wir weiter, um diese Klasse zu erweitern, um ein Kind zu schaffen und unser Wissen über sechs US-Klassen und Vererbung insgesamt zu erweitern . 3. Erziehende Kurse: Lassen Sie uns eine untergeordnete Klasse der tierischen Klasse erstellen, um die Vererbung zu zeigen, die in JavaScript arbeitet. Denken Sie daran, dass die Vererbung auf diese Idee bezieht, dass wir Klauseln aus einer Basisklasse erstellen und alle diese Eigenschaften von der übergeordneten Klasse erhalten können. Nehmen wir an, wir wollten eine lügende Klasse definieren. Wir beginnen die klassische Beziehung normal, aber dann, um vom Tier zu erben, wissen wir, spezifizieren, dass diese Löwenklasse sich auf das Tier erstreckt. Also lassen Sie uns sagen, Klasse Löwe erstreckt Tier groß. Da Linie Tier erweitert, können wir bereits Instanzen der Linie Klasse erstellen und ihm einige Daten geben. Lassen Sie uns einen Sohn Grable in einem Zeichen in eine neue Klasse erstellen und ihm einige Daten innerhalb der Parameter geben . Also lassen Sie uns Sohn gleich ein neuer Löwe war ein Simba, und seine Höhe ist, auch, weil er noch ziemlich jung, gut beraten Log-Sohn, und überprüfen Sie die Sonnenklausel oder die Linie Klasse eher und Boom. Wir haben eine Linie, deren Name Simba ist, und Höhe ist zwei. Ausgezeichnet. Jetzt ist die Linie immer noch genauso allgemein wie unsere Tierklasse. Wie machen wir es konkreter zu den Löwen und erlauben es uns, ihm Mawr Informationen in der Instanzdeklaration zu geben . Nun, wir würden der Zeile wieder einen Konstruktor geben. es zwei Parameter des Namens und der Höhe noch einmal. Aber nach der Höhe können wir anfangen, zusätzliche Felder anzugeben, um dieser Zeile mehr Daten zu geben. Da Linien manchmal anders gefärbt sind, geben wir ihm dieses zusätzliche Feld. Farbe ist also die 3. 1 in unserer Konstruktorliste. Bevor wir jedochauf dieses Objekt zugreifen können, jedoch müssen wir ein spezielles Schlüsselwort für diese Klasse aufrufen, da es Tier in Kind-Klassen erweitert, bevor wir dieses Objekt verwenden können, um Klassendaten zu ändern, Sie müssen ein super Schlüsselwort verwenden, um den Konstruktor eines Elternteils zu bestätigen. Dies wird den Konstruktor der übergeordneten Klasse mit dem Namen und der Höhe aufrufen, die wir zuerst angeben , also tun Sie es genau wie so Supername und Höhe, dann innerhalb des Konstruktors. Nachdem wir den Super verwendet haben, um den Elternkonstruktor aufzurufen, können wir erneut über dieses Objekt zugreifen. Jetzt haben wir die Freiheit zu sagen, dass diese Aktienfarbe einer Farbe entspricht, die wir innerhalb des Konstruktors argumentieren , und jetzt können wir Symbole Farbe in seiner Instanz angeben. So ist es Farbe ist golden und knall. Wir haben Simba genannt. Höhe zu Ihnen und seine Farbe ist golden. Alles im Moment, was ist, wenn wir immer noch diese Hello Methode für Zeilen verwenden möchten, aber wir wollen eine andere Nachricht vollständig protokollieren. Glücklicherweise in Kindklassen können wir in KindklassenMethoden von Elternklassen einfach überschreiben, indem wir sie neu deklarieren. Lassen Sie uns einen Hallo Gruß in der Linie Klasse anpassen, um Hallo zu sagen, ich bin dies nicht von Pride Rock benannt. Also jetzt bei einem Hello Muffin direkt nach dem Konstruktor sie ein Konsul Dot Log Hallo, ich bin dieser Punktname von Pride Rock und dann ganz unten statt Rat. Nicht einloggen, mein Sohn. Wir können einfach rufen Sohn nicht hallo, um zu sehen, dass Gruß in Aktion und hohe Simba ist groß, jemanden aus der königlichen Familie zu treffen. Als nächstes werden in der Regel mehrere Klassen in separaten Modulen existieren. Lassen Sie uns diese Basistierklasse in eine separate Datei namens Animal dodgy s extrahieren. Also zuerst, erstellen Sie die neue Kugel neue Datei Tier Punkt Js Jetzt nehmen Sie die Klasse wird es schneiden, Tempo es innerhalb der Tier Herzogtum s, und dann Fügen Sie einen Exportstandard von Tier zum Tierpunkt Js fünf und ganz oben in unserem Index Punkt Js Wir können nicht Tier aus Tier Dodge s importieren, um zu greifen extrahierte Tierklasse, Nehmen wir an, und dort sehen wir unsere SIMA-Nachricht immer noch Protokollierung in die Konsul Importieren und Exportieren hat für uns für diese Module für die Klassen gearbeitet. In Ordnung, genial. Wir haben gerade ein Beispiel der Vererbung mit Klassen und dem Schlüsselwort extends im Java-Skript gesehen Wir können tatsächlich so viele Kindklassen des Tieres implementieren, wie wir möchten. Wir könnten Hyänen, Vögel, Elefanten und alles, was du willst, im ganzen Tierreich erschaffen Vögel, . Darüber hinaus die Löwenkindklasse in jeder Klasse, die wir erstellen könnten, weiter erweitert werden, um noch mehr Unterklassen und Enkelkinder der Basistierklasse zu schaffen . Alles klar, gehen wir weiter zu einem anderen Konzept innerhalb von Klassen, statischen Methoden. 4. Statische Methoden in Kursen: Beginnen wir mit einem sauberen Schiefer und diskutieren ein neues Thema innerhalb der Klassen. Statische Methode. Wenn wir eine statische Methode innerhalb einer Klasse erstellen, können wir auf diese Methoden zugreifen, ohne explizit eine Instanz der Klasse zu deklarieren. Dies ist praktisch, wenn wir mehr praktische Klassen als benannte Leerzeichen für Methoden erstellen möchten , anstatt Daten zu speichern. zum Beispiel Beginnen wirzum Beispielmit einem leeren Schiefer und definieren eine neue Klasse des Rechners. Es ist ein Klassenrechner, und sein Körper ist ein Paar lockiger Rassen. Jetzt, mit in dieser Klasse, können wir wählen, einen Konstruktor zu haben. jedoch daran, Denken Siejedoch daran, dass wir diese Klasse nicht für ihre Daten verwenden, sondern ihre Methoden. Lassen Sie uns also eine statische Methode geben, um eine statische Methode zu erstellen. Es ist genau das gleiche wie die Definition einer regulären Methode für eine Klasse, außer wir gehen diese Methode mit dem statischen Schlüsselwort fort. Lassen Sie uns jetzt unsere erste statische Methode für die Rechnerklasse definieren und ihr eine namens Multiply geben . So statisch. Multiplizieren Sie eine B-Rückkehr ein mal B. Und wie Sie sehen können, ist diese eine völlig identisch mit der Multiplikationsmethode, die wir früher erstellt haben, als wir Module erforscht haben . In Ordnung, jetzt, da wir diese statische Methode haben. Wir können beginnen, die Rechnerklasse als Dienstprogramm zu verwenden, um schnell auf die Multiplikation zuzugreifen. Also lassen Sie uns eine Variable definieren und sagte, es ist ein stattdessen es gleich Rechner. Multiplizieren Sie nicht fünf und sieben Gut zuversichtlich. Loggen Sie ein und was erwarten Sie zu sehen, wenn Sie sagte 35? Du hast recht. Cool. So wie Sie Taschenrechner Punkt multiplizieren sehen können, ist jetzt eine statische Methode. Wir haben keine neue Instanz des Rechners erstellt, aber das statische Schlüsselwort ermöglicht es uns, darauf zuzugreifen. Multiplizieren Sie sofort. Großartig. Lassen Sie uns eine weitere statische Methode zur Rechnerklasse hinzufügen, um dieses Konzept bei der ekstatischen Add-Methode zu verstärken . Und genau wie zuvor von unseren Modulen, wird Beispiel ein Plus B zurückgeben Wenn wir den Rechner ändern, multiplizieren Sie nicht auf den Rechner Punkt Add fünf und sieben. Was denkst du, wird auftauchen? Bang, Wir sehen 12, wie Sie wahrscheinlich erraten haben, erscheinen in unserem Konsul. In Ordnung jetzt können wir beginnen, die Nützlichkeit des statischen Schlüsselworts in Klassen zu sehen. Calculator wird jetzt zu einer Möglichkeit, dass wir schnell auf eine ganze Sammlung von Methoden aus nur einem Klassenimport zugreifen können. Das neue Taschenrechner t Wort ist in diesem Fall kein Objekt, das Daten enthält, sondern ein Namensgeber für relevante Methoden wie hinzufügen und multiplizieren. Und wir könnten teilen, absoluten Wert subtrahieren, all das gute Zeug. In Ordnung, wir weiter, um sogar Mawr es Sechs mit Klassen und Prototypen zu erkunden. 5. Unterschiede zwischen Kursen und Prototypen hervorheben: Lassen Sie uns den Unterschied zwischen Klassen und Prototypen in JavaScript diskutieren. Diejenigen von Ihnen, die mit der Programmierung vertraut sind oder zuvor eine Informatik-Klasse absolviert haben könnten mit diesem Paradigma oder Konzept vertraut sein, das objektorientierte Programmierung genannt wird. Objektorientierte Programmierung bezieht sich auf dieses Konzept in der Informatik, das Objekte auf Basis von realen Objekten modelliert . Diese Objekte enthalten relevante Daten, und ein Programm wird umgestaltet, so dass diese Objekte miteinander interagieren. Viele der wichtigsten Programmiersprachen, wie C, Java und Ruby, bieten umfangreiche Unterstützung für objektorientierte Programmiermodelle rund um Systeme von Klassen und Vererbung. Die Frage ist also, Sind Jobs gut auf einem objektorientierten Programmiermodell basiert? Schließlich scheinen die E-sechs Jobklassen, die wir gerade erkundet haben, auf die Antwort zu verweisen. Ja, aber die wahre Antwort ist nein. JavaScript basiert auf einem Prototyp alle Vererbung Modell. Es ist ein bisschen anders als Klassen unter der Haube. Klassen sind eigentlich nur Extraktionen von Job-Skript-Prototypen, also erstellen wir nicht tatsächlich Datenklassen auf die gleiche Weise wie Java und Ruby mit ihrem objektorientierten Programmiermodell. Aber die Syntax der Klasse E six ermöglicht es uns, JavaScript-Prototypen sehr schnell auf eine verständlichere Weise zu erstellen . Die nächste Frage ist also, was ist ein Prototyp? Ein Prototyp ist ein Merkmal, das jedes Objekt in JavaScript hat, und das uns ein sehr spezifisches Merkmal über dieses Objekt sagt, und dieses Merkmal ist sein übergeordnetes Objekt oder das Objekt, das seine Eigenschaften von See geerbt . Jedes Objekt in JavaScript hat einen Prototyp und erbt tatsächlich Eigenschaften und Methoden von ihrem übergeordneten Prototyp. Dies erstellt eine Prototypkette oder sogar eine Datenstruktur wie ein Datum oder eine Rate in JavaScript erbt von Prototypen darüber. Ganz oben in dieser Kette befindet sich der Objektprototyp selbst. Nachdem wir nun untersucht haben, wie Prototypen in JavaScript funktionieren, haben wir auch den Unterschied zwischen Prototypen und Klassen in anderen objektorientierten Programmiermodellen geklärt . Wir haben jetzt ein besseres Verständnis dafür, dass Klassen überhaupt keine Klassen sind, sondern Prototypen unter der Haube. Insgesamt beginnt die ganze Geschichte viel weniger abstrakt zu werden, wenn wir tatsächlich Prototypen in Aktionsehen Aktion 6. Prototypen: Lassen Sie uns unseren ersten JavaScript-Objektprototyp zerschlagen. Um dies zu tun, verwenden wir die Objektkonstruktorfunktion im Job-Skript, verwenden Sie also eine Schlüsselwortfunktion und verfolgen Sie dann den Namen des Prototyps. Lassen Sie uns einen Assistenten Prototyp erstellen, so Funktion Assistent und der Körper ist ein Paar von geschweiften Klammern wie üblich. Nun wird das Schlüsselwort function in diesem Fall nicht verwendet, um eine tatsächliche Funktion zu erstellen, die einen logischen Ausdruck erreicht, sondern es wird verwendet, um Daten in diesem Objektprototyp zu hosten, einem Prototyp mit Daten entsprechend der Anzahl der Parameter, die wir an sie übergeben haben. Zuerst geben wir diesem Reserve-Prototyp das Namensfeld Ah, Hausfeld und ein Haustierfeld. So Funktion Assistent Name Haus Haustier. Großartig. Jetzt können wir auf das Objekt des Prototyps mit diesem Schlüsselwort zugreifen und dem gleichen Muster folgen , wie wir nicht Klassen. Wir sagten, die Schlüssel auf dem dies zu den Werten, die wir in der Funktionsliste der Parameter übergeben . Dieser Stunt-Name ist also gleich Name. Diese nicht Höhe oder dieses des Hauses ist eher gleich Haus. Mr Pet ist gleich Haustier. Ausgezeichnet. Lassen Sie uns nun unsere erste Instanz des Zauberers machen, der Name wird Harry Potter sein. Das Haus wird Griffin Door sein und sein Haustier wird draußen sein. Wir können jetzt keine Objektprototypen mit dem neuen Schlüsselwort beabsichtigen, genau wie eine Klasse und sie einer Variablen zuweisen. Also lassen Sie Harry die Variable gleich einem neuen Zauberer-Prototyp mit Harry Potter als der Name sein Haus Griffin Door sein wird und sein Haustier wird unser und dann werden wir zuversichtlich protokollieren Harry und speichern. Jetzt haben wir einen Prototyp des Assistenten, der in unserem Konsul auftaucht, der zeigt, dass relevant sind. Data Griffin Tür, Harry Potter und Out Awesome. Wir können dem Prototyp auch Methoden hinzufügen, die ihm einige Funktionen basierend auf seinen Daten . Lassen Sie uns eine Methode hinzufügen, die in einer Begrüßung namens Greep zum Prototyp Was dieser Assistent ist. Also werden wir sagen, dass dieser Aktienernte gleich einer Pfeilfunktion ist. Die Dis kehrt zurück. Ich bin dieser Punktname in einem Temp, der aus diesem Dot House stammt. Beachten Sie, dass ich in dieser Ära Funktion das Rückgabe-Schlüsselwort nicht angeben muss, also können wir diese Klammer herausnehmen, das Rückgabe-Schlüsselwort herausnehmen, und jetzt gibt dies den Ausdruck auf der rechten Seite durch Standardwert von der Pfeilfunktion Syntax , da wir die momentan geschweiften Klammern weglassen. Jetzt lasst uns etwas klären. Im Gegensatz zu normalen Funktionsdeklarationen erstellen Pfeilfunktionen standardmäßig kein eigenes dieses Objekt für den lokalen Bereich der Funktion . Stattdessen wird ihr Bereich immer noch darauf verweisen, dass dies von der äußeren Papageienfunktion entfernt ist. Dies nützt uns sehr, wenn wir fortschrittlichere Funktionen und Prototypen erstellen, da ihre Inter-Funktionen die Daten im Elternbereich referenzieren. In einem Log von Harry Dot Griechisch zum Rat. Also lassen Sie uns das ändern, um zu sagen, Harry Dockery, als wir retten, haben wir bemerkt, dass ich Harry Potter von Griffin Door bin. Schön dich als Nächstes kennenzulernen Angenommen, er wollte diesem Prototyp weitere Daten hinzufügen. Nun, wir könnten einfach die Prototyp-Deklaration aktualisieren. Aber jeder Prototyp kommt auch die prototyp-Schlüsselwort-Eigenschaft, die seine Objektdaten darstellt. Wir können dann die Vorteile dieses Prototypschlüsselworts toe Adam oder Eigenschaften sehr leicht auf den Wizard Prototyp nehmen. Nehmen Sie also an, Sie wollten ein anderes Feld wie Haustiername hinzufügen , ohne den tatsächlichen Konstruktor ändern zu müssen. Wir könnten ein Prototyp-Schlüsselwort verwenden, genau wie oben Harry. Sagen Sie Zauberer Duck Prototyp Punkt Haustier-Name. Und diese Linie als Haustier-Name-Eigenschaft. Sehen Sie den Prototyp, als ob wir es tatsächlich in der Prototyp-Deklaration getan hätten. Weiter, um den tatsächlichen Haustier-Namen hinzuzufügen. Wir sagen, Harry Dot Haustier-Name ist gleich Hedwig. Mir ist aufgefallen, dass unser Augenblick gleich bleibt. Aber wenn Sie sich beraten lassen, melden Sie Harry nicht an. Wir werden feststellen, dass der Haustiername für Harry Hedwig ist. Ehrfürchtig. Lassen Sie uns nun diese Diskussion, die wir früher über ihre Funktionen begonnen haben, nicht ihr eigenes dieses Objekt in ihrem Funktionsbereich zu erstellen. Angenommen, ich wollte jetzt eine Methode zu unserem Prototyp hinzufügen. Nun, lasst uns einen Prototyp benutzen. Er war genau wie bevor wir Wizard sagen können, nicht Prototyp Punkt-Info Also diese Funktion wird uns einige Informationen über das Wizards-Haustier geben. Versuchen wir also, diese Funktion mit einer Pfeilfunktion hinzuzufügen. Ich würde sagen, Wizard up Prototyp Punkt Info gleich Rücklauftemperaturring, der sagt, ich habe einen dieser Stopp Es nannte diesen Start, dass leben. Es wurde gesagt, ein Rat. Protokollieren Sie jetzt keine Harry-Punkt-Informationen, und wie Sie unsere Konzertbeschwerden sehen können, hat das keine Möglichkeit, dies zu handhaben, und Info ist undefiniert. Der Grund, warum dieser Code nicht funktioniert, ist, dass die Pfeilfunktion kein solches Objekt erstellt damit der Funktionsprototyp referenziert. Jetzt funktioniert eine Luftfunktion innerhalb des eigentlichen Funktionsprototyps, da sie eine äußere hat, die so als Lösung bezeichnet wird, wenn Sie das Schlüsselwort protect verwenden, um eine Methode zu definieren. Da wir dieses Objekt innerhalb des Prototyps nicht auf diesen lokalen Bereich verweisen können, verwenden wir keine Pfeilfunktion. Wir verwenden die normale Funktionsdeklaration. Dies wird dieses Objekt neu erstellen und es uns ermöglichen, auf die Eigenschaften zu verweisen, die innerhalb dieses Objekts unseres Prototyps gehalten werden. Stattdessen sagen wir Wizard Dot Prototyp dot info gleich Funktion ohne den Pfeil zurück. Ich habe dieses Stopp-Haustier nicht diesen Punktnamen genannt. Wie wir sparen, finden wir, dass ich nicht unseren Namen Hedwig arbeiten und Protokollieren im Rat Excellent mit einer einfachen alten Js-Funktionsoperation, die wir sehen, sind relevant. Daten erscheinen also, das zeigt, dass Luftfunktionen, obwohl wahnsinnig hilfreich und verkürzt prägnant, tatsächlich nicht die beste Lösung sind. Dieses Mal brauchten wir ein Funktionsschlüsselwort, um ein solches Objekt für unseren Prototyp zu erstellen. Jetzt, da wir Prototypen in Aktion gesehen haben, sollte es ein wenig klarer werden, dass die Klasse einfach ihre Logik extrahiert und einpackt um Prototypen für Programmierer mit einem objektorientierten Programmierhintergrund gut aussehen zu lassen. Aber wenn es darum geht, denken Sie daran, dass Klassen nur eingewickelt sind. Prototypen und Prototypen sind einfach Funktionen. Denken Sie daran, dass jedes Objekt in JavaScript von einem anderen Prototyp abstammt und diese Eigenschaften erbt beginnend am Anfang der Kette. Der Objektprototyp selbst. In Ordnung, lasst uns weiter E s, sechs lernen . 7. Datenstrukturen in ES6 präsentieren: auf dem Gebiet der Informatik-Datenstrukturen bezogen sich auf die programmatische Speicherung von Daten für eine effiziente Nutzung. Jede Anwendung auf Branchenebene nutzt eine Datenstruktur, um ihre Daten effizienter zu verwalten. Erstens nutzten ausgeklügelte Algorithmen Datenstrukturen, um erweiterte Berechnungen wie Suchen oder Sortieren in CS durchzuführen. nutzten ausgeklügelte Algorithmen Datenstrukturen, um erweiterte Berechnungen wie Wir können bestimmte Algorithmen anhand ihrer Laufzeit oder wie schnell sie ein Problem lösen, quantifizieren . Außerdem können wir Algorithmen basierend darauf, wie viel Speicher oder Daten sie verwenden, einordnen. Mit anderen Worten, die Ressource ist, dass sie jetzt in Essex benötigen, erhielt ein paar aktualisierte sauberere Datenstrukturen innerhalb der Veröffentlichung. Lassen Sie uns die erste Datenstruktur in dieser Sammlung untersuchen. Das Sechs-Set ermöglicht es uns, einzigartige Werte zu speichern. Es ist ähnlich wie ein Array, aber Sie können keine Duplikate der spezifischen Funktion ohne doppelte Werte haben. Platziert Sets als vorteilhafte Datenstruktur über ein Rennen. Angenommen, wir würden zum Beispiel eine Veranstaltung veranstalten, und jeder Einzelne erhält ein Werbegeschenk. Jedes Mal, wenn ein einzigartiger Besucher für ein Geschenk kommt, geben wir es ihm oder ihr, und beim Einzelnen an unsere Gruppe von Menschen, die ein Geschenk erhalten haben. Nehmen wir nun an, dass Individuum für ein zweites Geschenk mit einem Array zurückkam, müssten wir einen Algorithmus oder eine eigene benutzerdefinierte Hilfsfunktion implementieren, um zu überprüfen, ob unsere Liste diese Person bereits enthielt, dass wir dieser Person keine Sekunde geben Geschenk. jedoch ein Set verwenden, Wenn wirjedoch ein Set verwenden,um unsere Gäste mit Geschenken zu verfolgen, wissen wir sofort, ob diese Person bereits ein Geschenk erhalten hat, indem sie die Methoden verwendet, die die Javascript-Datenstruktur zur Verfügung stellt. Diese Methoden umfassen die Anzeigenmethode Löschmethode und verfügt über eine Methode mit Überprüfungen auf das Vorhandensein von Daten innerhalb eines Satzes. Alles klar, lassen Sie uns auf die Implementierung eines Satzes unserer ersten e Essex Datenstruktur gehen. 8. Ein Set schreiben: Lassen Sie uns in unsere 1. 6-Datenstruktur springen und einen Satz unter der Haube implementieren. Alle Sets erben vom Setprototyp, daher deklarieren wir eine Menge mit dem neuen Schlüsselwort. Deklariert eine neue Menge namens A In einem Zeichen es und neue Instanz der Menge Prototyp Deklaration Lassen Sie eine gleiche neue Menge. In diesem Satz können wir alles aus primitiven Werten hinzufügen. Zehengegenstände. Alles, was wir tun müssen, ist Vergangenheitsdaten zur eingestellten Punkt-Add-Methode. Lassen Sie uns einige neue Zahlen ein Punkt hinzufügen fünf, zum Beispiel, und ein Punkt hinzufügen 43. Ausgezeichnet. Wie wäre es nun, eine Stärke hinzuzufügen? Wird das funktionieren? ADA Anzeige gut und scheint, als wäre alles in Ordnung mit unserem Set. Lassen Sie uns nun versuchen, ein Objekt nur für ein gutes Maß hinzuzufügen, dessen X-Wert 50 ist und warum der Wert 200 sein wird. Gehen Sie weiter und speichern Sie das. Alles scheint in Ordnung zu sein. Und schließlich, lasst uns Konsul, loggen Sie sich nicht ein und schauen Sie sich das Set ein für allemal an. Wenn wir sparen, sehen wir, dass unsere fünf und 43 Zahlen schrumpfen und unseren Objektwert. Ausgezeichnet. Lassen Sie uns die Methoden untersuchen, die der Setprototyp jetzt für uns bietet, um einige Informationen über dieses Set zu erfahren . Für den Anfang haben alle Seiten eine Größeneigenschaft, auf die wir zugreifen können, um zu bestimmen, wie viele Elemente innerhalb des Satzes Council Dot Log eine Punktgröße und Boom existieren . Wir sehen vier, wie Sie vielleicht vermutet haben, weil wir vier Elemente zu unserem Set hinzugefügt haben. Jetzt kommt hier eine sehr nützliche Funktion. Lassen Sie uns überprüfen, ob dieses Set Daten enthält, wird prüfen, ob es Nummer fünf enthält. Also statt einer Punktgröße, lassen Sie uns vertrauensvoll protokollieren ein Punkt hat fünf. Und was denkst du, wird auftauchen? Nun, wahr, wie Sie vielleicht erraten haben, da wir fünf früher hinzugefügt haben, lassen Sie uns überprüfen, ob es sieben hat, und da gehen wir, wir werden falsch. Es ist also ein true oder false Wert, je nachdem, ob der Parameter innerhalb der Menge vorhanden ist. Alles klar, mal sehen wir etwas sehr Nützliches. Wir können ganze Radiergummi Sets sehr einfach umwandeln. Wir müssen nur ein Array an den Setkonstruktor übergeben. Lassen Sie uns eine Reihe von Zahlen machen und mit einem sauberen Schiefer beginnen. Lassen Sie die Zahlen gleich. Du könntest beliebige Zahlen haben, also mache ich 578 13 und 17 und bin jetzt taub. Set wird ein neuer Satz sein, der das Zahlenarray an den Konstruktor übergeben wird. Ich gehe voran Rat und logge nicht Numb Set ein. Und jetzt sehen wir einen Prototyp mit 578 13 und 17, was wir in unserem Original hatten, oder? Als Nächstes. Wie drucken wir jedes dieser Set-Elemente einzeln? Nun, wir brauchen eine Möglichkeit, durch diese Daten in der Menge zu generieren und jedes Element einzeln zu drucken . Glücklicherweise bietet uns das JavaScript-Set eine Wertemethode, mit der wir genau das tun können. Es gibt ein iteriertes Objekt, das alle Werte enthält, die für Polygonzug eingerichtet wurden entlang. Nun, um diese iterierte richtig zu behandeln, wird eine Variation der vier Schleife verwendet, die Enhanced for Loop genannt wird . Also lassen Sie uns erklären, dass vier Schleife jetzt für let Element von taub gesetzt Werte. Und in dieser Zeile sehen wir eine Vier-Schleife mit On-Zuweisung darin. Was passiert ist, ist, dass die Elementvariable bei jeder Anbetung der Schleife auf den aktuellen Wert gesetzt wird . Da also taub gesagt, Punktwerte im Wesentlichen eine ehrenwerte Liste von Werten aus dem ursprünglichen Satz enthalten, setzt diese Erweiterung für Schleife die Elemente jeder dieser Werte nacheinander. Wie wir Log-Element abgebrochen, sollten wir jede Generation sehen. Also bekommen wir 578 13 und sieben. Ehrfürchtig. Nun lassen Sie uns das Set auf ein relevantes Problem anwenden, das wir in einer Unternehmensanwendung oder einem persönlichen Projekt begegnen können . Betrachten Sie eine lange Zeichenfolge von zufälligen Zeichen. Wie können wir schnell erkennen, welche Zeichen in der Zeichenfolge erscheinen? Nun, als eine Lösung könnten wir den gesamten String Thunfisch Rochen umwandeln, dann in einen Satz umwandeln und knallen. Plötzlich haben wir all die einzigartigen Elemente in diesem ursprünglichen Schrumpfen. Versuchen wir es jetzt. Erstellen Sie eine Schrumpfung von zufälligen Zeichen, indem Sie verrückt auf Ihrer Tastatur. Also lassen Sie Zeichen gleich, was Sie wollen in dieser fantastischen Zeichenfolge. Nun teilen wir diese Liste von Zeichen in ein Array aller seiner Zeichen, indem wir das spezielle Split-Schlüsselwort auf dem slipped aufrufen . Lassen Sie Zeichen gleich sind. Chars Punkt aufgeteilt auf die leere Zeichenfolge, um jedes Zeichen innerhalb des ursprünglichen Schrumpfens zu teilen, und ich werde einen Ladungssatz machen, der ein neuer Satz ist, der in der Ladung übergeben wird, sind wir dann gehen und konstant protokollieren die Ladung Set und überprüfen Sie es aus. Und wie wir sehen, haben wir jetzt eine Reihe von jedem einzigartigen Element, das wir in unsere ursprüngliche zufällige Zeichenfolge aufgenommen haben und dass es nur geschafft, 10 Zeichen zu tippen, während ich auf meiner Tastatur verrückt wurde. Okay, das deckt ein Set in E s sechs ab. Lassen Sie uns weiter zu lernen, noch mehr e ein sechs Datenstrukturen. 9. Karten präsentieren: weiter oben wird eine Sekunde zu erkunden. Ja, sechs Datenstrukturkarten. Die Karte verfügt über Schlüssel- und Wertepaare. Für diese Schlüssel und Werte können wir sowohl primitive Werte als auch Objekte innerhalb eines Essex erfüllt verwenden. Jedes T ist ein Unikat. Sie können denselben Schlüssel nicht innerhalb einer Karte duplizieren. Um zu verstehen, wie das funktioniert, könnten wir sie als fast identisch mit Objekten sowohl Objekten als auch Nickerchen betrachten. Lassen Sie uns Werte von Schlüsseln zuweisen. Wir können diese Schlüssel abrufen, sie löschen und ändern, was für diesen Tee gespeichert ist. jedoch einige wichtige Unterschiede zwischen dem regulären JavaScript-Objekt und der Kartendatenstruktur , die s sechs für uns bereitstellt. Und diese Unterschiede machen die Karte tatsächlich zu einer viel besseren Sammlung von Daten. Da Objekte einen Prototyp haben, existieren bestimmte Standardschlüssel, die mit Schlüsseln kollidieren würden, die wir wollen, wenn wir nicht vorsichtig sind. jedoch In der ES sechs Karte können wirjedoch jeden Fernseher ohne Sorge nutzen. Außerdem sind die Schlüssel eines Objekts in erster Linie Schrumpfungen, während bei einer Karte alles von Primitiven, Objekten und sogar Funktionen sein könnte . Schließlich können wir die Größe einer Matte sehr leicht erhalten, indem wir die Größeneigenschaft gut aufrufen, wir müssen dies den langen Weg manuell mit einem normalen JavaScript-Objekt herausfinden. Okay, lassen Sie uns in die Datenstruktur der Karte es sechs eintauchen und einige nützliche Beispiele mit Code betrachten. 10. Eine Karte schreiben: Lassen Sie uns unsere erste Instanz der ES sechs Karte erstellen, ähnlich dem Set, das wir sofort tan. Sie aß die Karte mit dem neuen Schlüsselwort. Erstellen Sie eine Variable A und weisen Sie sie auf, dass ein Gleichberechtigter wusste, dass groß. Um den Karten, ähm, Paarungen von Schlüsseln und Werten zu geben ähm, , verwenden wir die map dot set Methode. Die Karte. Diese Set-Methode für Karten verwendet zwei Parameter einen Schlüssel und einen Wert. Ganz einfach, lassen Sie uns einen Schlüssel für diese Karte definieren, und dieser wird ein Schrumpfen wie T eins gleich Shrinky sein. Dann nennen wir die Set-Methode dieser eine Karte. Und lassen Sie uns im ersten Parameter argumentieren, dem Schlüssel, den wir gerade für den zweiten Parameter erstellt haben, nur eine Zeichenfolge, die den Rückgabewert für einen Dehnungsschlüssel sagt. Also noch einmal, ein Punkt gesetzt Schlüssel, einer für den ersten Parameter der Kunst eine Karte und dann Rückgabewert für die Ausgabe Schlüssel. Das ist konstant. Loggen Sie ein und checken Sie es aus. Hier sehen wir, wir haben jetzt eine schrumpfende Zuordnung zu unserem Rückgabewert für diesen schrumpfenden. Ehrfürchtig. Lassen Sie uns zusätzliche Schlüssel hinzufügen. Diesmal. Wir werden einen Schlüssel haben, um uns Schlüssel zu einem Objekt zu entsprechen, e dieser wird einen Schlüssel sagen , der nur einige Dummy-Daten ist, aber wir werden voran gehen und den Wert des Schlüssels setzen, um Wert für auf Objektschlüssel zurückzugeben. Aber mit Bata-Boom haben wir einen Schlüsselrückgabewert für ein Objekt. Er Also hier stellen wir fest, dass wir Objekte als eigentlichen Schlüssel innerhalb unserer E Essex Kartendatenstruktur haben. Sehr cool kennt Sie einen anderen, und wir können Funktionen als Tasten als auch haben. Es ist wie T drei gleiche Funktion, und wir werden nur eine leere Funktion haben, die nichts zurückgibt. Aber die wichtigste Unterscheidung ist, dass wir Schlüssel 32 einen Rückgabewert für eine Funktionstaste zustimmen. Und wie wir speichern, sehen wir eine gültige Funktion als Schlüssel für E sechs Datenstruktur, die Rückgabewert für eine Funktionstaste zurückgibt , so dass wir schrumpfen Leichtigkeit haben könnten. Objekt. Er ist Funktionstasten, alles, was wir in unserer Karte mögen, um ein Schlüssel- und Wert-Paar abzubilden. Lassen Sie uns nun darüber nachdenken, wie man Karten durchläuft, um Schlüssel und Werte zu drucken, genau wie ein Satz, der ein Array von Elementen aufnehmen und konvertiert kann. In ähnlicher Weise kann eine Karte ein Array von Länge zu Arrays annehmen. Konvertieren Sie das in eine Karte. Lassen Sie uns auf diese Weise eine schnelle Karte erstellen. Deklarieren Sie also zuerst ein neues Schlüsselwertpaar für Numb sind, das ein reguläres Array sein wird. Sein erstes Element wird ein Array sein, das eins und dann eins hat. Wir haben ein weiteres zwei Array von zwei bis dann, endlich, endlich, ein weiteres zwei-Längen-Array von drei und drei. Jetzt können wir diese leicht in eine E-6-Karte umwandeln. Genau wie so, lassen Sie Val Karte gleich neue Karte, dann werden wir in ihnen übergeben sind in den Mattenkonstruktor. Lasst uns Kultur retten. Loggen Sie die Val-Karte nicht auf. Und wie Sie sehen können, haben wir neue Karte mit einem Mapping 212 Zuordnung zu zwei und drei Mapping zu drei, wie erwartet durch die Umwandlung der ursprünglichen Numb sind genial. Nun, um diese Werte eins nach dem anderen anstatt in einem Zug zu setzen, müssen wir irgendwie durch als das generieren. Die Kartenstrukturierung Essex hat die Werte-Hilfsmethode, genau wie die Set-Struktur. Aber diese Onley gibt diese zweiten Elemente zurück, die die Werte für unsere Schlüssel zu drucken sind. Ebenso, wenn wir eine parallele Schlüssel-Methode verwenden, würden wir nur die Schlüssel für unsere Karte finden und sagte Wir wollen eine Hilfsmethode für Karten namens Einträge verwenden Wieder wird die erweiterte für Luke oder die vier von Loop verwenden, da es auch aufgerufen, um jedes Paar von Schlüsseln und Werten nacheinander zuzuordnen und zu drucken. Nehmen Sie also das Konsolenprotokoll für Let He Value Now heraus, es würde ein Array von Val Map-Punkt-Einträgen verknüpfen . Lassen Sie uns Consul, protokollieren Sie keine Vorlagenzeichenfolge, die besagt, dass wir einen Schlüssel haben, der beim Speichern auf unseren Wert verweist. In Ordnung, ein Punkt jemand zwei Punkte zwei und drei Punkte von drei. Großartig. In Ordnung. Lassen Sie uns nun Ihre sechs Karten noch tiefer erkunden. Mit dem relevanten Problem werden wir das Zählen von Buchstaben in einem zufälligen Schrumpfen wiederholen, den wir in der Diskussion über ES sechs Sätze eingeführt haben . Dieses Mal haben wir eine zusätzliche Fähigkeit innerhalb dieser Schlüssel und Wertepaare. Jetzt könnten wir Karten verwenden, um wieder sicherzustellen, dass unsere Briefeinträge eindeutig sind und nicht mehr als einmal eingehen , weil diese Karte verhindert, dass wir Schlüssel duplizieren. Aber dieses Mal, wenn wir uns einem Brief nähern, haben wir bereits zu der Struktur hinzugefügt, die wir nicht mehr einfach überspringen werden. Diesmal haben wir einen Zähler für jeden Buchstaben, und am Ende wissen wir genau, wie oft jeder Charakter in unserem Psychiater auftauchte. erneut Beginnen Sieerneutmit einem sauberen Schiefer, deklarieren Sie einen neuen Shrink und greifen Sie dann die Tastatur an. Es ist jeder Oh, und wer weiß, was Sprachen ist, aber wir werden die Buchstaben zählen, und vielleicht gibt uns das einen Hinweis. Zuerst deklarieren Sie einen neuen Buchstaben wichtig, aber Buchstaben gleich neue Karte. Und dann implementieren wir eine Vier-Schleife, die über die Zeichenfolge ein Zeichen nach dem anderen für Let I Equals Null generiert . Augen hörten Schrumpfpunktlänge, fünf plus, und dann senden wir eine Buchstabenvariable an den aktuellen Charakter nach unserem Leben. Wert für das Ich habe Zeichen in der Verkleinerung lassen Buchstaben gleich schrumpfen. Und hier beginnt der Spaß für die Implementierung der eigentlichen Zähllogik. An dieser Stelle müssen wir über zwei mögliche Fälle nachdenken, die passieren können, wenn wir auf einen Brief stoßen, der entweder den Brief noch nicht hat oder ihn bereits hat. So hat die Karte nicht. Der Buchstabe setzt den Buchstabenwert bis eins in der Karte, um diesen Buchstaben zu zählen. Andernfalls hat es den Buchstaben und wir können seinen Wert aktualisieren und einen hinzufügen. Zu Beginn wird alles bedeuten, wenn Aussage, die von dem überprüft, den Brief noch nicht hat . Nehmen wir an, wenn Buchstaben mit Buchstaben es gleich fällt. Tun Sie jetzt etwas. Wir können diesen Zustand tatsächlich verkürzen, um zu sagen, ob Bang Buchstaben Punkt Buchstaben hat. Was das Gleiche sagt. Nein, die Verwendung dieses Knalls wie bereits erwähnt oder Ausrufezeichen All dies tut, ist einen Booing-Wert auf sein Gegenteil zu wechseln . Also hätten wir überprüfen können, ob Buchstaben mit Buchstaben gleich fällt. Aber Sie sehen Pony überall in JavaScript, um Anweisungen und Ausdrücke genau wie diese zu verkürzen . Also, wenn die Karte keinen Brief hat, denken Sie daran, dass wir seinen Wert an eins geschickt haben, um das erste Auftreten dieses Buchstabens zu erkennen. Also sagen wir Buchstaben Punkt setzen Buchstabe eins, sonst wird im else Block den Wert des Buchstabens aktualisieren. Da wir wissen, dass die Buchstaben-Karte bereits unsere Buchstaben-Punkt-Set-Buchstaben hat, erhalten wir den aktuellen Wert vom Buchstaben und dann fügen wir eine süße hinzu. Mit diesem Code füllt es unsere Karte mit einer Reihe von Buchstabenzahlen. Alles, was noch zu tun ist, ist, sich diesen vollständigen Abgeordneten anzusehen. Lasst uns Rat am Ende keine Briefe protokollieren. Wir gehen weiter und sparen. Und ich hatte nur einen kleinen Tippfehler. Wir sagen Buchstaben Punkt gesetzt und boom. Da gehen wir. Ich tippte ein fünfmal 04 mal etwas Interessantes, dass ich viel gesprochen. Wir haben auch ein P viermal so cool, dass wir ein tolles Schlüsselwertpaar bekommen haben, wie oft ein Zeichen in unserer Zeichenfolge erschien, ein sehr nützlicher Fall für die Kartendatenstruktur in E. A sechs. Fantastisch. Wir haben gerade Essex-Karten durchlaufen, die bessere Schlüsselwertpaarsammlungen sind als Objekte. Aber Sie werden immer noch Objekte überall in Essex-Code sehen. Ersetzen Sie also nicht einfach jedes Objekt jetzt durch eine Karte, auf der Karten wirklich nützlich sind. Sind Sammlungen, in denen wir Schlüssel brauchen, die über nur Strings oder den Schlüsselwert hinausgehen? Paare werden oft hinzugefügt, entfernt oder aktualisiert. Ausgezeichnete Arbeit, und lassen Sie uns weiter lernen 11. Verschließungen präsentieren: untersucht nun ein bedeutendes Konzept innerhalb von JavaScript und E S sechs Schließungen. Closers beziehen sich auf Funktionen, die sich an die Umgebung erinnern, in der sie erstellt wurden, und könnten weiter auf die unabhängigen Variablen innerhalb dieser Umgebung verweisen. Auf diese Weise kombiniert die Schließung eine Funktion in der Umgebung, in der wir erklären, dass Funktionsschließer es uns ermöglichen, komplizierte Denkweisen wie die Schaffung von Funktionsfabriken zu tun. Mit anderen Worten, wir können Funktionen erstellen, die andere Funktionen zurückgeben, um anpassungsfähigere Methoden für die mehr Schließen ermöglichen es uns, Methoden in einer Weise zu deklarieren, die private Daten in JavaScript verwaltet Wir können dies nicht automatisch tun, wie in Sprachen wie Java. . Aber wir können diese Art von Verhalten privater Variablen nicht emulieren, die in so vielen anderen Sprachen zu sehen sind. Verwenden Sie Gehäuse in Ordnung, lassen Sie hoffen, die grundlegende Frage zu beantworten, was keine Verschlüsse sind und wie sie funktionieren, während wir sie in den kommenden Beispielen untersuchen 12. Schließungen und Scoping: Lassen Sie uns dieses Konzept der Schließungen genauer untersuchen. Denken Sie daran, dass mit Schließungen Funktionen erstellen, die auf die Variablen innerhalb ihrer Umgebung verweisen können und den Überblick über die Umgebung ihrer Erstellung behalten. Zunächst einmal, lassen Sie uns eine neue Funktion namens Call definieren. Lassen Sie Call gleich eine Pfeilfunktion mit einem leeren Körper. Und in dieser Funktion geben wir ihm einige geheime lokale Daten. Lassen Sie uns geheimen gleich es sechs Felsen, obwohl das nicht viel von einem Geheimnis ist. Nun, wenn wir versuchen, auf die geheime Variable außerhalb des Bereichs der Aufruffunktion zuzugreifen, würden wir eine Luft finden, so dass Rat nicht geheim protokolliert und gesehen hat, dass Geheimnis nicht im globalen Bereich definiert ist . jedoch Wir könnenjedochZugriff auf diese Daten erhalten, wenn ihre Funktionsschließung eine Methode hat, die die Daten offenbart . Lassen Sie uns diese Methode hinzufügen, lassen Sie nun gleich eine andere Pfeilfunktion offenbaren. Nun, einfach, Konsul, melden Sie sich nicht geheim. Jetzt werden wir offenbaren innerhalb ihrer tatsächlichen Schließung nennen. Und dann nennen wir die Schließung mit einem kommentierten und boom, wir sehen EEA sechs Felsen, obwohl unsere geheime Variable auf Lee ist, im Rahmen dieses Aufrufs, Schließung immer noch Zugriff auf sie irgendwie im globalen Bereich genial. Wir haben unsere erste Schließung in Aktion gesehen. Sie werden dieses Konzept der Inter-Funktionen, die auf die Werte in übergeordneten Bereichen zugreifen, häufig als lexikalisch, bereichsübergreifend, lexikalisch hören Bereichen zugreifen, häufig als lexikalisch, bereichsübergreifend, . Scoping bezieht sich einfach auf die Idee, dass JavaScript und unser Programm den Speicherort einer Variablen verfolgt , um zu verstehen, wo darauf zugegriffen werden kann. Lassen Sie uns dieses Schließungsbeispiel finden und näher lexikalische Skube untersuchen, anstatt Anrufüberprüfung innerhalb unserer Schließung. Lassen Sie uns die Offenbarungsfunktion jetzt vollständig zurückgeben. Diese Return-Anweisung ermöglicht es uns, eine Variable zu definieren und sie dem Ergebnis unserer Schließung zuzuordnen . Anstatt anzurufen, rufen Sie an, lassen Sie den gleichen Ruf enthüllen und dann gehen wir voran und rufen enthüllen. Und wenn wir das tun, sehen wir, dass unsere Schließung immer noch Zugriff auf diese innere geheime Variable hat. Nun, für diejenigen von Ihnen, die Erfahrung in anderen Programmierungen haben, könnten Sprachen dies ein wenig kontraintuitiv finden. Schließlich halten lokale Variablen innerhalb einer Funktion normalerweise nur dort die Ausführung der Funktion. Daher kann es so aussehen, als ob wir nicht auf die geheime Variable zugreifen können, sobald unsere Funktion abgeschlossen ist . Sollte die geheime Variable nicht undefiniert sein, wenn wir versuchen, unveil aufzurufen? Nun, das deutet auf die Macht von Schließungen innerhalb von JavaScript hin. Seine diese Idee des lexikalischen Bereichs der Schließung behält einen Verweis auf die lexikalische Umgebung , in der sie erstellt wurde, und ermöglicht es uns, Daten innerhalb von Bereichen von Funktionen auch nach Abschluss der Funktion zuzugreifen . Daher erhält unsere Annville-Variable den Wert dessen, was sie Closure zurückgeben, zugewiesen. So haben wir Zugriff auf das Geheimnis innerhalb der Schließung, auch nachdem es beendet ist. In Ordnung, mach dir keine Sorgen. Wenn Schließungen noch ein wenig abstrakt erscheinen, werden wir das Konzept weiter mit praktischen Beispielen vertiefen, um zu zeigen, wie Sie bereits Verschlüsse nutzen können , um Ihre E A sechs Programme zu verbessern. 13. Function: in Java-Skript in Essex. Closures ermöglichen es uns, Funktionsfabriken zu erstellen, Funktionsfabriken zu funktionieren, ein oder mehrere Argumente zu nehmen und neue Funktionen basierend auf diesen Argumenten zurückzugeben Lassen Sie uns unsere erste Funktionsfabrik mit einer Funktion erstellen, die ein Thema zu einer Stärke hinzufügt. Es wird einen Parameter nehmen die Themen, die wir gehofft haben, so Const fügen einige Picks gleich X, was unsere eventuellen Themen sein wird. Lassen Sie uns etwas innerhalb dieses Körperbereichs innerhalb des Bereichs von add some fix zurückgeben. Lassen Sie uns eine Inter-Funktion namens Cat hinzufügen, die ein eigenes Argument hat und ein Ergebnis der Addition der Anzeige Suffolk Argument und ein eigenes Verkettungsargument zurückgibt . Also konnte Const nicht gleich katzen. Warum das Rückgabeergebnis des Hinzufügens von Warum plus X Weil X's Celtics sind. Also wollten wir was folgen? Schließlich diese Ad Suffix Funktion nun die Inter-Schließung zurück. Also bei einer Anweisung, die zurückgibt, können ausgezeichnet katzen, haben wir eine Funktionsfabrik erstellt. Die erste nimmt ein Argument, definiert eine Schließung und gibt es mit variierender Fähigkeit zurück. Je nach anfänglichem Argument, lassen Sie uns untersuchen, wie das mit ein paar Anrufen funktioniert. Fügen Sie einige Plektren hinzu. Zuerst oben. Angenommen, ich wollte eine Funktion, die jedem Wort, das wir argumentieren, eine Suffix hinzufügt. Also lassen Sie nous gleich das Ergebnis des Aufrufs hinzufügen einige Bilder streiten Wir gehen voran und Rat protokollieren nicht Adn s, um zu sehen, wie das aussieht So wie Sie sehen können, ist das Ergebnis eine Funktion zurückgibt Warum und warum plus x Also lasst uns gehen und diese Funktion jetzt aufrufen mit einem Präfix adn s r Präfix wird glücklich sein Und lassen Sie uns sicherstellen, dass dies auf eine Variable gesetzt Let h gleich adn s glücklich Lassen Sie uns voran und confidante log h zusammen mit Schlecht und Boom Wir bekommen Glück als Ergebnis So sehen wir das Ergebnis unserer Funktion Fabrik zuerst Wir argumentierten Durcheinander zu den Anzeigen Suffolk Funktion, dass es außer Parameter auf die con cat Funktion auf der Innenseite schaut, die keine Schließung ist, die sich an eine lexikalische Umgebung von ad Suffolk erinnert und ihr eigenes Argument zurückgibt warum plus X Und dann schließlich ist es würde diesen Lochverschluss zurückgeben um einige Bilder hinzuzufügen. Wir haben jetzt diese ganze Funktion in einer Fabrik für Werbung erstellt und dann können wir hinzufügen Chaos verwenden und sind Sie glücklich? Und da gehen wir hin. Wir sind Konsul Dot Logging Glück. Als Ergebnis zeigen wir dies ein anderes Mal mit einem anderen Suffix. Lassen Sie hinzufügen voll gleich. Fügen Sie einige Plektren hinzu. Telefon. Lasst f gleich. Advil wird Früchte streiten. Nun gehen wir voran und vertraute log f und wir werden fruchtbar als Ergebnis. Wie cool. Ordnung, lassen Sie uns dieses Konzept der Funktionsfabriken nach Hause mit einem zweiten Beispiel versuchen. Dieses Mal beschäftigen wir uns mit einer mathematischen orientierten Funktionsfabrik. Lassen Sie uns unsere zweite Funktion Factory definieren, die eine Funktion dreht, die zwei Variablen multipliziert. Es wird eine ähnliche Struktur wie unsere Anzeige Suffolk Funktion und Schließung folgen, um eine Funktion Produkt zu finden , die einen Parameter nimmt. Letztendlich wird dies unsere Funktionsfabrik werden, die eine Inter-Funktion zurückgibt, die unseren ursprünglichen Parameter des Produkts mit Inter Functions Parameter multipliziert . Lassen Sie uns diese inter-Funktion jetzt hinzufügen, außer dieses Mal lassen Sie uns die Schließung verkürzen und die Funktion sofort zurückgeben, so dass wir einfach zurückgeben können warum und im Gegenzug. Warum Times X wie gewohnt. Großartig. Lassen Sie uns diese Produktfunktion Factory nennen und einige Funktionen erstellen, die das Ergebnis der Multiplikation von benutzerdefinierten Zahlen gedreht haben. Also lassen Sie Multi fünf gleich einer Funktion Factory Rückgabefunktion des Produkts und fünf hier erstellen wir eine neue Funktion mit unserer Funktionsfabrik namens Multi Five, die eine Funktion mit einem Parameter für eine Variable macht und diese Variable multipliziert mit Fünf. Wie wir ursprünglich argumentieren, ist das vertraute. Loggen Sie einen Anruf von Multi fünf und Schimmel 53 Hier finden wir 15 wie erwartet. Sehr cool. Nein, machen wir es nochmal mit einem doppelten Anruf Cool Produkt zu seinem Rat. Melden Sie sich nicht des Ergebnisses der Verdoppelung von neun, während Sie sparen. Wir finden jetzt 18 im Rat und große wir Nazi Funktion Fabriken arbeiten voll mit seinen Ex-Verschlüssen, was uns große benutzerdefinierte Funktionalität gibt. Nun, bevor wir weitermachen, können wir noch einmal ein paar Schritte nutzen, um diese Funktion Fabrik zu reduzieren. Erinnern Sie sich mit Pfeilfunktionen, dass wir das Rückgabe-Schlüsselwort entfernen und den Ausdruck auf der rechten Seite automatisch zurückgeben können. Lassen Sie uns also die Inter-Funktion verkürzen. Nimm die Zahnspangen, Semikolon, das Schlüsselwort zurück und dann haben wir eine Rückkehr bekommen. Warum Pfeil y Times X jetzt bemerken, dass alles so funktioniert, wie ich speichere. Wir sind noch in 18, aber Sie werden feststellen, dass wir das noch einmal verkürzen können. Wir werden diese geschweifte Klammer herausnehmen, dieses Rückgabe-Schlüsselwort ist auch diese geschweifte Klammer, und als Ergebnis haben wir eine sehr prägnante Anweisung, die eine völlig gültige Funktionsfabrik ist. Wie wir speichern und neu laden. Boom, wir haben noch 18 tolle. Sie werden sehen, reduzierte Methoden wie diese zeigen sich auf nur einer Linie mehr als oft India sechs Mantel. Aber die Funktion Factory früher in der erweiterten Syntax der früheren Version, kann verständlicher sein. Es liegt an Ihnen zu implementieren, wie Sie möchten, solange Sie intern konsistent sind, wenn Sie Ihre E six Programme erstellen. In Ordnung, lassen Sie uns weiter die Schließungen in Essex erkunden. 14. Private Methoden: viele Sprachen wie Java unterstützen die Fähigkeit, private Methoden zu erstellen, um die Datenkapselung zu ermöglichen. Diese privaten Methoden haben den Zugriff auf nur andere Methoden innerhalb derselben Klasse eingeschränkt. In JavaScript können wir diesbeispielsweise nicht nativ mit der Essex-Klasse tun, beispielsweise nicht nativ mit der Essex-Klasse tun, aber wir können das Verhalten privater Methoden emulieren, indem wir Closures verwenden. Lassen Sie uns dieses Konzept der Erstellung von Methoden mit Schließungen untersuchen, ein Beispiel für eine Funktion, die ein Budget mit privaten Daten verfolgt. Zuerst deklariert eine neue Funktion namens Budget und weisen Sie sie auf eine ominöse Pfeilfunktion. Nachteile. Budget entspricht R Pfeilfunktion mit einem Körperbereich. Als nächstes geben wir diesem Budget einige private Daten. Zuerst eine Balance-Variable. Das Band ist gleich Null Zahl. Erstellen Sie eine private Methode namens Change Bow. Lassen Sie sich etwa gleich eine Funktion mit einem Parameter ändern , der gerade zum Saldorückzahlungssaldo plus gleich dem zurückgekehrt ist, und dies wird voran gehen. Aktualisieren Sie Balance, um hinzuzufügen, was wir in der Änderung über jetzt streiten, lassen Sie uns einige Schließungen zu dieser Budgetfunktion hinzufügen, um dem Benutzer Möglichkeiten zu geben und diese private Saldodaten zu manipulieren . Diese Schließungen in der Funktion verwenden dann die Funktionsumgebung und geben uns Möglichkeiten, ihren lexikalischen Umfang für unsere erste zugängliche Methode oder Schließung zu manipulieren. Lassen Sie uns eine Einzahlung 20 Methode erstellen, die eine Änderung über private Methode verwendet und es uns ermöglicht das Gleichgewicht zu aktualisieren, indem Sie 20 zu unserem Budget hinzufügen. Also nennen Sie es Kaution. 20 entspricht einer Pfeilfunktion, die nur die dreht sich um den Wechselbogen von 20. Dort gehen wir jetzt, um dem Benutzer Zugriff auf diese Einzahlung zu geben. 20. Methode. Lassen Sie uns ein Objekt zurückgeben, das eine Einzahlung hält. 20 Schlüssel Mapping zu unserer Einzahlung. 20. Methode Wir werden gehen und sofort 10. Sie aß eine Brieftasche jetzt gleich Budget und lassen Sie uns Rat Dot Log Was? Obwohl es tatsächlich aussieht wie beim Speichern, sehen wir ein Objekt mit nur einer Funktion. Eine Einzahlung, 20 Funktion. Gehen wir weiter und rufen Kaution 20 an. Lassen Sie uns sparen und boom Einzahlung 20. Scheint, als hätte es funktioniert, aber wir können nicht wirklich sagen, was tatsächlich passiert ist. Also, um unser Guthaben zu überprüfen, werden wir jetzt eine Check-Funktion Schließung zum Budget hinzufügen. Also CONST-Prüfung gleich zurück, was das Guthaben derzeit ist. Und jetzt lassen Sie uns hinzufügen, dass zu unserer Liste der Funktionen, so überprüfen Karten, um zu überprüfen würde speichern, und nach der Einzahlung 20 wir nicht bilden log einen Scheck der Brieftasche und Boom, Sie wieder Geldstrafe 20. Kehren Sie zu unserem Konsul zurück , der nach Null aktualisiert wird. Großartig. Die Frage ist also, warum können wir nicht einfach überprüfen, ob der Geldbörse abspringt? Versuchen wir das Portemonnaie Punktbalance. Lassen Sie uns schüchtern Konsul Dot es direkt nach dem Scheck protokollieren. Lassen Sie uns sparen und wir haben undefiniert. Das liegt daran, dass wir nicht das Gleichgewicht innerhalb unserer Rendite zurückgeben. Objekt für das tatsächliche Budget waren nur Rückgabemethoden, die Zugriff auf das Budget haben, aber nicht den tatsächlichen Budgetsaldo selbst. Dies ist keine private Variable in Bezug auf die Verwendung von Schließungen und die Funktion ziemlich cool. Das ist also genial. Wir müssen Schließungen in unserer Budgetfunktion. Jetzt fügen wir 1/3 1 jetzt zur lexikalischen Umgebung hinzu. Zurückziehen 20. Das wird das Gleichgewicht um negative 20 ändern. Also Const zurückziehen 20 gleich Pfeilfunktion, die nur den Bogen durch negative 20 ändert, die 20 vom Gesamtbudget subtrahieren wird, die eine Rücknahme hinzufügen wird. 20 Call Result 20 und alles über Objekte ist, dass, wenn Schlüssel und Werte genau gleich sind , Indien sechs. Wir müssen nicht einmal die Doppelpunktsyntax angeben. Wir können einfach ein Schlüsselwort sofort angeben und die entsprechenden Methoden zurückgeben. Netter kleiner Essex Kurzschriften-Syntax-Trick, der die Dinge wirklich schön aussehen lässt. Also jetzt ziehen wir 20 vor unserem Budget-Check Draw. 20. Was gibt es noch ein paar Anrufe zu hinterlegen? 20. Nehmen Sie diesen zusätzlichen Flaum heraus. Lassen Sie uns gehen und überprüfen Sie das Guthaben nach dieser ersten Einzahlung, 20 ist plus 20. Zurückziehen 20. Gehen Sie zurück auf Null und ein paar weitere Einzahlung Zwanziger. Wir sollten 40 bekommen, wie wir sparen. Was sehen wir? 40 Dollar für unsere Portemonnaie Suppe. Endlos. Wir verwenden nur Schließungen, um öffentlich zugängliche Methoden zu definieren, die auf private Methoden innerhalb unserer Gesamtbudgetvariablen zugreifen . Die Verwendung von Verschlüssen, um diesen Effekt zu erzielen, wird als Modulmuster in JavaScript und E Essex bezeichnet . Insgesamt Schließungen, in Kombination mit privaten Methoden, haben große Vorteile. Private Methoden beschränken nicht nur den Zugriff, sondern auch deutlich verbesserte Programme und machen Schulden besser überschaubar, indem wesentliche Funktionen von den Funktionen getrennt bleiben, insbesondere auf einen bestimmten lokalen Namensraum. Infolgedessen sieht der globale Namensraum für unser gesamtes Programm Pierre und sauber aus. Ausgezeichnet. Lasst uns weitermachen 15. Generatoren präsentieren: Lassen Sie uns ein Feature besprechen, das viel Aufregung gebracht hat. E ein sechs Generatoren können sie sich seltsam fühlen, mit auf den ersten zu arbeiten, aber mit einigen Beispielen. Und nachdem Sie in den Code eintauchen, werden Sie sehen, warum sich Generatoren in E A Sechs als so nützlich erweisen . Zunächst einmal brechen Generatoren die typischen Läufe ein Vervollständigungsmodell für normale Funktionen, was bedeutet, wann immer wir laufen, eine Funktion, die wir erwartet haben, zu beenden, bevor wir im Programm weitergehen. Daher können andere Ausdrücke und Anweisungen nur auftreten, wenn eine Funktion beendet ist. Generatoren als eine andere Art von Funktion können in der Mitte oder zu mehreren Malen pausieren und später wieder einzahlen Funktion in einem Generator, verwenden wir eine spezielle Schlüsselwort-Ausbeute, und um die Funktion wieder aufzunehmen, machen wir einen Anruf auf die spezielle Punkt-nächst-Methode. Generatoren erlauben dann sehr praktische Dinge zu konstruieren, wie Funktionen mit kontrolliertem Fluss und vereinfachte Versionen von Generatoren. Alles klar, lasst uns diese Codiergetriebe drehen und anfangen, mit Generatoren zu arbeiten 16. Einen Generator definieren: Lasst uns springen. Es erschafft unseren ersten Generator. Diese Syntax für einen Generator verwendet das Schlüsselwort der Funktion gefolgt von einem Sternchen. Unser erster Generator wird nur Briefe Maker genannt. Lassen Sie uns es jetzt definieren, so Funktion Sternchen Brief Maker. Es ist eine Funktion, also wird es einen Körper haben, der durch geschweifte Klammern bezeichnet wird. Alles klar, erinnerte sich an die Idee eines Generators, den der Generator einführt. gesteuerte Fluss in die Funktionen läuft auf. Anstatt den Durchläufen bis zum Fertigstellungsmodell zu folgen, können wir Funktionen mit Pause und Wiederaufnahme Fähigkeit erstellen. Also noch einmal, wie machen wir eine Funktion, die pausiert? Er gibt seinen aktuellen Wert zurück, wenn er angehalten wird. Nun, wir verwenden ein U von Schlüsselwort bei drei Erträgen an den Briefmacher, und wir werden nur eine Liste von Zeichen nacheinander liefern. Zuerst wird das Zeichen A ergeben, dann wird das Zeichen ergeben. Be dann wird den Charakter ergeben. Siehe Okay, jetzt, da wir einen sehr grundlegenden Generator haben, lassen Sie uns eine Instanz dieses Generators erstellen und herausfinden, wie man auf seine Pfoten Werte einen Ertrag nach dem anderen zugreift. Zuerst deklariert eine neue Instanz dieses Briefmachers und wir nennen es Brief. Jen ließ den Buchstaben Jen Equal Letter Maker bemerken, dass wir das neue Schlüsselwort nicht verwenden, wenn Instanzen von Generatoren zu definieren. Großartig. Jetzt können wir endlich aufdecken, wie man auf den erhaltenen Zustand bei jeder Ausbeute innerhalb unseres Generators zugreifen kann, um auf die Ausbeute oder Pause innerhalb der Generatorfunktion zuzugreifen. Wir verwenden die Punkt nächste Methode als nächstes, nimmt einen Schritt innerhalb unseres Generators und gibt den aktuellen Zustand dieses Generators zurück. Und dann können wir mit dem Wert auf diesen Rückgabezustand zugreifen. Ordnung, also rufen wir Sadat log einen Aufruf des Buchstabens James dot next Methodenbuchstaben Jane dot Next an, und dann gehen wir weiter und greifen auf den Rückgabewert zu. Aber sparen und boom. Wir bekommen ein Auftauchen in unserem Konsul Awesome auf ein paar identischere Konsul Protokolle, und wir werden jede Ausbeute finden. So gut. Kopieren und fügen Sie das ein paar Mal ein und wir sollten ABC bekommen. Da gehen wir, ABC. Mal sehen, was passiert, wenn wir versuchen, auf den nächsten Wert nach ABC zuzugreifen. Wir werden undefiniert, weil wir keine Rendite definiert haben und wir die Grenze unseres Generators erreicht haben . Okay, lassen Sie uns mit einem praktischeren Beispiel arbeiten, einem Generator, der nacheinander einen Zähler liefert, zum Beispiel, Stellen Sie sich vor, dieser Generator verfolgt Kunden in Ihrem Tech-Shop. Jedes Mal, wenn jemand in die Tür geht, der Generator den nächsten Wert zurück. Das Schöne an diesem Generator im Vergleich zu anderen Methoden wird sein, dass es egal ist , wie oft Sie es nennen, wie oft Sie es nennen oder zu welcher Zeit Sie es nennen. Es wird immer den nächsten Wert zurückgeben, so definiert der Generator als Anzahl, Hersteller, Funktion, Sternchen, Zählmacher, Körper von geschweiften Klammern und innerhalb der Zählmaschine wird Konto-Variable definieren. Lassen Sie zählen gleich Null in. Die Idee mit diesem Generator wird sein, drei Zählungen zu erbringen. Wir haben ein Store-Limit von drei, und sobald das Konto über drei ist, der Generator keinen Wert mehr zurück. Um dies zu tun, fügen wir eine Bedingung zur Zählung wertvoll hinzu und solange sie niedriger als drei ist, wird unsere Zählvariable ergeben , die eine zu sich selbst hinzufügt. Also, während die Zählung immer noch kleiner als drei ist, ergibt die Zählung plus gleich eins. Wie wir sparen. Lassen Sie uns eine neue Instanz dieses Zählgenerators erstellen. Also lassen Count Gen Equal Count maker. Lassen Sie uns voran und Rat protokollieren Sie keine Reihe von Aufrufen an den count n dot Next, Zugriff auf die Wertmethode. So 123 und vier, wie wir sparen, bekommen wir 123 und undefiniert wie erwartet. Großartig. Jetzt können wir voran gehen und liefern vier, wenn Sie nach drei wollen, indem Sie nur das Limit zu zählen weniger als vier erhöhen und wir bekommen eine Gegenspitze. 1234 Ehrfürchtig. Wir haben einige grundlegende Implementierungen des neuen ES Six Generators gesehen, und es sind praktische Anwendungsfälle. Zum Beispiel, was wir gerade mit dem Count Maker Generator gesehen haben, kann auch auf ein System erweitert werden, um I DS zu machen . Mit anderen Worten, der Generator wird immer wieder neue Ideen für die Benutzer generieren, um sicherzustellen, dass sie immer einzigartig sind. Aber in einem sehr kontrollierten und Zwischenformat spielt es keine Rolle, wenn sich ein neuer Benutzer anmeldet, wo die zwei Minuten nach dem letzten Benutzer, zwei Stunden oder sogar zwei Wochen, dieser Generator das nächste i d für den neuen Benutzer und eine richtige Nummer zurückgibt. Nun, da wir diesen Anwendungsfall gesehen haben, lassen Sie uns fortfahren und in einige oder beteiligte Anwendungen des Generators in E s sechs eintauchen 17. Strömen mit Generatoren steuern: wird nun mit MAWR beteiligten Generatoren arbeiten. Fahren Sie fort, das Konzept der kontrollierten Herde zu erkunden. Lassen Sie uns herausfinden, wie wir unseren Generatoren eine neue Funktion hinzufügen können. Zuerst erstellen wir einen neuen Generator, der die geraden Zahlen auflistet, beginnend mit zwei, um einen neuen Generator zu finden und es evens Funktion aufzurufen. Asterisk gleicht den Körper der Funktion als Zahnspangen aus. Wie immer. Lassen Sie uns Accounting Variable jetzt initialisieren und setzen Sie es auf Null zählen gleich Null. Und jetzt lasst uns etwas tun, das nahe Blasphemie betrachtet wird. Im Bereich der Programmierung wird eine Schleife hinzufügen, die nie aufhören kann, während wahr, was immer wahr sein wird. Count plus entspricht zwei. Dann gehen wir voran und liefern jetzt Zählung, die while-Schleife Unwahr kann nie in einem Durchlauf ein Vervollständigungsmodell brechen. Dies würde nie beenden und eine Endlosschleife verursachen. Dies ist eigentlich ein berüchtigtes Stück Code. Ein Informatik-Lehrer könnte Ihnen sagen, nie in einem Ihrer Einführungskurse zu schreiben , aber mit Generatoren leben wir gerne am Rande. Wir ignorieren diese Beratung und nutzt gefährliche Schleife zu unserem Vorteil. Also lassen Sie uns es in Aktion sehen, indem Sie eine neue Instanz von Kunst evens Generator erstellen lassen Sequenz gleich eben Lassen Sie uns voran und rufen Sie das Punktprotokoll einen ersten Aufruf des ergebenden Zustands, so Sequenzpunkt nächsten Zugriff auf den Wert. Lassen Sie uns das noch ein paar Mal kopieren. Lassen Sie uns sparen und wir kommen zu 46 wie erwartet. Und diese while-Schleife ist nicht unser Programm jetzt brechen, Sie fragen sich vielleicht, wie genau wieder setzen Konto-Variable scheint nicht so, als ob wir viel in hier tun können . Gut daran erinnert, dass Punkt nächste spezielle Methode für Generatoren, die genau hier verwendet wurden. Nun, es hat einen optionalen Parameter, dass wir den früheren Zustand zu unserem Generator verwenden können. Was auch immer wir als Parameter an die nächste Funktion übergeben, kann den internen Zustand und das Verhalten unseres Generators ändern . Aktualisieren Sie also den Generator so, setzen Sie die Ausbeute auf eine Reset-Variable. Hier sieht der Reset von dem, was an den Generator übergeben wird, aus und prüft es in einer Yield-Anweisung . Alles klar, und dann, wenn Reset wahr ist, das wahr. Aber wir können einfach sagen, ob ein Reset selbst wahr ist, das geht voran und setzt die Zählung zurück auf Null. Wie gesehen, die yield Anweisung nicht nur den aktuellen Zustand zurück, sondern überprüft auch den Zustand, der an den Generator selbst übergeben wird. Dann haben wir eine einfache if-Anweisung, die das Konto auf Null zurücksetzt, wenn diese Yield-Anweisung jemals die Wahrheit bewertet. Alles klar, lassen Sie uns das in Aktion sehen. Lassen Sie uns diese Protokolle der Sequenz starten nächsten Stop-Wert. Aber dann später, lassen Sie uns Adult Log-Sequenz Punkt nächsten wahren Punktwert zählen und dann werden wir Rat nicht einen weiteren Aufruf an Sequenz Punkt nächsten Punktwert protokollieren und lassen Sie uns die hier zurückgegebenen Werte überprüfen, wie wir Boom speichern, wir bekommen 246 Aber dann passieren wir. Getreu der Funktion evens wird Serie gesetzt wahr. Sie werden wieder auf Null gesetzt und ergibt ein Plus auf Rechnung. Ehrfürchtig. +246 bis 4. Wir haben jetzt entdeckt, wie wir unsere Generatoren zurücksetzen können. Ich habe mich nie erholt. Zurücksetzen. Gehen wir weiter zu noch mehr Möglichkeiten, wie wir die Vorteile von E S sechs Generatoren nutzen können 18. Generatoren: Lassen Sie uns Generatoren im Vergleich zu Generatoren in JavaScript und ES sechs diskutieren und Generator in jeder Programmiersprache wird auf Elemente aus einer Sammlung oder einem Array einzeln zugreifen, und es verfolgt seine Position, wie es in JavaScript tut. Genau wie der Generator können wir unseren eigenen Integrator mit der nächsten Methode definieren, die den nächsten Wert einer Vergangenheit für richtig zurückgibt . Lassen Sie uns jetzt unseren eigenen Generator erstellen , der kein Generator sein wird, sondern unser eigener, handgefertigter Generator von Grund auf neu. Definieren Sie ein Konzept namens Array-Generator, das eine Pfeilfunktion mit einem Parameter-Array sein wird. CONST. Bewertet. Belüfter ist gleich Array. Hier ist unsere Pfeilfunktion und großartig. Nun, innerhalb dieses Generators, müssen wir den Startpunkt definieren. Eine neue Variable von Index 20 mit dem Array-Interrater-Bereich zugewiesen. Lassen Sie den Index gleich Null. Als nächstes wird ein Objekt für diesen Generator mit dem nächsten Schlüsselwort zurückgegeben, das einer Funktion zugeordnet ist. Kehren Sie als Nächstes zurück und wir werden eine Pfeilfunktion haben. Großartig. Jetzt ist alles, was wir noch haben, die Anzeige der tatsächlichen Logik innerhalb. Weiter, um das nächste Element im Array zurückzugeben und den Index jedes Mal um eins zu erhöhen. Zuerst wollen wir überprüfen, ob der Index weniger Sache ist, das Geländeleben. Auf diese Weise weiß unser Generator zu stoppen, sobald der Index die Array-Grenzen überschreitet, und dann speichern wir vorübergehend den aktuellen Wert innerhalb des Arrays. Index wird dann den Index um eins erhöhen und schließlich diese temporäre Variable zurückgegeben. Also lassen Sie uns es hinzufügen, Logik direkt innerhalb des nächsten Körperbereichs. Wenn der Index also kleiner als die Array-Punktlänge ist, stellen Sie sicher, dass alles korrekt formatiert ist. Lassen Sie als nächstes gleich dem aktuellen Array-Index. Wird das Index um eins erhöhen, und sie werden Kopf und Ertrag gehen und eher die nächste Variable zurückgeben. Lassen Sie uns nun mit unserer eigenen benutzerdefinierten iterierten Funktion arbeiten, indem Sie eine Instanz erstellen und es Array von 123 übergeben , also sagen wir, ich t ist gleich Array es Belüfter, der in 123 übergeben wird, was nur ein Array ist , das für jetzt und dann zu verwenden ist, werden wir voran gehen und Rat Dot Log einige nächsten Anrufen. Also lasst uns einloggen. Ich habe mich als Nächstes angeschaut und es dir an. Lassen Sie uns sparen und boom in unserem Konsulat, wir bekommen einen, der der erste Wert ist, den wir in unserem iterierten er übergeben haben. Lass uns gehen und es tun. Noch ein paar Mal sollten wir 123 bekommen Lassen Sie uns es noch einmal tun und wir sehen, dass es schließlich undefiniert zurückgibt, sobald es über das Array-Punkt-Leben geht. Sehr cool. Jetzt arbeitet dieser Generator, um durch das Array ein Element nach dem anderen zu gehen, aber mit Generatoren haben wir eine leistungsstarke Alternative, die den Generatorcode herauskommt. Nur ein haben es als Referenz. Es ist ein guter Schrägstrich. Als nächstes werden wir jetzt auf ES sechs Generator erstellen. So Funktion, Sternchen eine Rate und röter, die jetzt ein Generator innerhalb des Generators ist. Wir haben besonderen Zugriff auf ein Schlüsselwort namens Arguments, dem sucht, was wir passieren, wenn wir unseren Array-Integrator aufrufen. In Ordnung, also ist es an der Ausbeute der tatsächlichen Argumente. Schlüsselwort. Sie werden eine Instanz von R bewerteten Belüfter machen und es in Werten von 123 Bisher entspricht I t R Nennbelüfter. 123 Lassen Sie uns zuversichtlich gehen einen Anruf von i t dot Weiter, finden Sie den aktuellen Wert, den Sie speichern. Wir erhalten ein Array von 1 bis 3. In Ordnung. Ziemlich cool, außer wir wollen diese Werte nacheinander und nicht wie im Reifenfeld erbringen. So wird das Verhalten unseres ursprünglichen Generators emulieren, aber das Hinzufügen von verbesserten vier Schleifen, die jedes Argument einzeln durchläuft und diese ergibt also anstelle Ihrer Argumente verbessern vier Schleife für Lassen Sie unsere Argumente dann bei jedem Instanz wird Argh selbst ergeben. Lass uns gehen und den Boom retten! Wir erhalten den aktuellen Wert von nur einem. Fügen wir noch ein paar hinzu und wir sollten 123 Awesome bekommen. Wissen Sie, dass wir im Wesentlichen dreimal in dieser Schleife ein Yield-Schlüsselwort verwendet haben. Nun, es ist sechs bietet eine Abkürzung für uns. Immer wenn wir Ertrag mehr als einmal in Folge verwenden, können wir einfach ein Ertragsstern, Syntax verwenden und die vier Schleife in eine Zeile mit Ertrag Sternchen Argumenten, Argumenten reformieren Wie wir speichern, erhalten wir eine Anzug drei. Genau wie zuvor. Großartig. Wir haben jetzt einen sehr reduzierten Generator, der den Brauch vollständig nachahmt oder er wiederholen, die ursprünglich genial neu erstellt. Dieses abgedeckte, um, oder erweiterte Thema in JavaScript und E s sechs im Allgemeinen. Und wenn Sie planen, in Sprachen in mehr als nur Js zu programmieren und er s sechs, dann werden es Belüfter überall mit e sechs erscheinen, obwohl Generatoren Ihnen erlauben, MAWR Advance-Programme zu nähern und effektiver es Belüfter zu schaffen . Denken Sie daran, Generatoren haben diese Startpause und Reset-Funktionalität mit der praktischen Ausbeute, Schlüsselwort und der nächsten Methode. In Ordnung, lasst uns weiter S sechs lernen. 19. Asynchronous und Versprechen präsentieren: Lassen Sie uns in das Konzept einer synchronen Programmierung in JavaScript und E. Ein sechs First Off wird asynchrone Programmierung definieren, aber zuerst Klärung der Unterschiede zwischen synchronen Programmen und einem synchronen Programm. Wenn wir uns auf synchrone Programme beziehen, beziehen wir uns auf diejenigen, die in der Reihenfolge von oben nach unten ausgeführt werden. Diese Programme können blockierende Vorgänge ausgesetzt sein, die sich auf ihre Laufzeit auswirken. Auf der anderen Seite beziehen sich asynchrone Programme auf diejenigen, die auf einer Loop-Engine ausgeführt werden. Dies bedeutet, wenn ein blockierender Vorgang stattfindet, z. B. eine Netzwerkanforderung an einen Server, die möglicherweise eine Weile dauern. Das A Geheimnis ist Code Die. Burt ist die Operation zu einem anderen Handler. Daher hält dies ein Programm läuft, ohne dass ein Block jemals passiert. Also lasst uns zu der wichtigen Frage kommen. Warum musst du etwas über ein Geheimnis wissen? Es ist Programmierung, und warum spielt es eine Rolle? Erstens sind Off-Benutzeroberflächen und Browser von Natur aus asynchron. Schließlich die U. N. verarbeitet die U.N. Browser Ereignisse wie Schaltflächenklicks, Massenbewegungen und Übermittlungen von Daten synchron. Denken Sie darüber nach, dass diese Ereignisse in unvorhersehbaren Momenten in der Zeit passieren. Daher würde dies bei einem synchronen Modell eine konstante Blockierung für den Benutzer verursachen, wenn die Engine jede neue Anforderung verarbeiten und warten müsste, bis sie mit einer synchronen Programmierungbeendet , bis sie mit einer synchronen Programmierung , Dieses Problem ist gesaugt. Wenn der Benutzer eine neue Funktionsanforderung sendet , wird diese Funktion an einen Handler umgeleitet. Nun, der Benutzer sieht eine Antwort, und die Antwort wird im Hintergrund verarbeitet. Auf diese Weise ist die Programmierung ermöglicht es uns, mit Datenbanken, Servern und öffentlichen AP Augen zu interagieren , da Operationen mit diesen Technologien einige Zeit dauern könnten, um Indien zu vervollständigen. Sechs. Wir können ein Modell eines Geheimnisses folgen ist die Programmierung und Handhabung von Funktionen, die Zeit brauchen, um mit Versprechungen zu vervollständigen. Versprechen erlauben es uns, asynchrone Prozesse zu handhaben, indem wir Werte darstellen, die irgendwann in der Zukunft zurückkehren werden . Versprechen können in einem der folgenden drei Zustände anhängig, erfüllt und abgelehnt bestehen , die jeweils auf den aktuellen Status der Versprechungen bei der Erfüllung der Funktion hinweisen. Letztendlich haben Versprechungen eine großartige Möglichkeit eingeführt, asynchrone Programmierung in Essex zu handhaben und werden definitiv in allen Programmen und Essex-Projekten erscheinen, die Sie in Zukunft codieren. Lassen Sie uns also anfangen, Versprechungen und asynchrone Programmierung zu erkunden 20. Versprechen: Beginnen wir mit der grundlegenden Syntax für ein Versprechen in ES sechs. zunächst Deklarieren Siezunächsteine neue Variable und ein Zeichen, dass das Ergebnis des Aufrufs eines neuen Versprechenkonstruktors innerhalb des Konstruktors eine schmale Funktion hat. Mit zwei Parametern wird der 1. 1 aufgelöst und der nächste wird zurückgewiesen. Sowohl auflösen als auch ablehnen repräsentieren Handler in der Verheißung, die eine Funktion geben, um den Status des Versprechens zu aktualisieren . Lösen Sie behandelte, erfolgreiche Versprechen Anrufe lehnen Pedale ab, Versprechungen, die nicht über den Wert bestimmen können. Lassen Sie uns zuerst dieses Versprechen erkunden, indem wir einen zukünftigen Wert auflösen. zunächst Lassen Sie unszunächsteine Zeichenfolge auflösen, die nur das Versprechen aufgelöst hat. Daten mich. Jetzt brauchen wir eine Möglichkeit zu bestimmen, wie auf diese Versprechensdaten zugegriffen werden kann. Oft hört man das Konzept des Zugriffs auf Versprechensdaten als verbraucht den Prozess. Um das zu tun. Wiederverwendung von Versprechungen Punkt dann Methode, die eine Funktion akzeptiert, die einen Rückgabewert verspricht, sobald sie erfüllt ist. In diesem Fall rufen wir diese Funktion auf, die die eventuelle Rückgabeversprechen Wert-Antwort erhält. Also bei einem Aufruf von p dot dann werden wir eine Antwort mit einer Pfeilfunktion haben. Und lassen Sie uns einfach Dot protokollieren, dass Antwort. Lassen Sie uns voran gehen und speichern und die Antwort ist gelöst. Versprechen Sie Daten. Sehr cool. In Ordnung, wie wäre es mit einem Versprechen, das Daten nicht erfolgreich zurückgibt, sondern stattdessen ablehnt? Wie können wir diese Art von Versprechen schaffen und damit umgehen? Darüber hinaus ändern wir das Versprechen, um einen Standardwert für das Versprechen abzulehnen, anstatt einen aufgelösten Wert zurückzugeben . also anstelle von aufgelöst die Ablehnungsfunktion, Verwenden wiralso anstelle von aufgelöst die Ablehnungsfunktion,um abgelehnte Versprechensdaten abzulehnen. Beachten Sie, dass wir jetzt in der Luft mit unserem Konsul sehen, dass wir versprochene Daten aus unserer damaligen Erklärung nicht erfasst haben . Dies gibt uns einen Hinweis darauf, welche Handler-Funktion genau aufgerufen werden soll, um die abgelehnten Daten zu sehen . So neben dann können wir eine dot catch-Anweisung hinzufügen, um diesen Wert zu fangen. So Dot Catch und dieser nimmt auch eine innere Pfeilfunktion. Also machen wir Luft und Rat protokollieren diese spezifische Luft nicht, wenn wir sparen. Wir haben bemerkt, dass wir versprochene Daten jetzt in unserem Konsul so große Mitteilung abgelehnt haben, dass wir jetzt eine Kette von Funktionen haben, die erste, dann Aussage prüft auf gelöste Daten in der Verheißung und wenn es keine findet, übergibt den Fluss der Kontrolle an unser catch-Statement. Dies hat den Effekt, das Versprechen zu finden, Luft und Verbrauch sind versprochene Daten. Lassen Sie uns noch eine wichtige Unterscheidung mit Versprechen machen. Denken Sie daran, dass die Versprechungen stehen in Werten für Daten, aber Versprechen können oft Zeit dauern, um zu verarbeiten. Dazu gehören die Funktionen, die sich mit Servern AP Augen oder Netzwerke beschäftigen, die möglicherweise Zeit benötigen um die Daten zu verarbeiten, bevor sie zurückgegeben werden. Lassen Sie uns also die Auswirkungen eines Geheimnisses untersuchen. Ändert das Programmieren mit einem Versprechen, das sich nicht unbedingt sofort löst das Versprechen? Dieses Mal verwenden wir eine festgelegte Timeout-Funktion, und wir lösen einige Versprechensdaten. Also bei einem Anruf aufgelöste versprochene Daten aufzulösen. Und dann stellen wir sicher, dass dies nicht zurückkehrt, bis 3000 Millisekunden oder drei Sekunden vergangen sind. Lass uns sparen, aber nach drei Sekunden zu sein. Aber, äh, Boom löste versprochene Daten. Cool. Jetzt lassen Sie uns eine Unterscheidung machen. Was ist, wenn er Konsul Dot Log nach dem Versprechen Verbrauch nach der tatsächlichen dann Anweisung hinzugefügt hat? Was erwarten Sie zuerst, der After-Versprechen Konsum oder unser Versprechen? Nun, wie wir speichern, sehen wir nach der Verheißung Empfängnis und dann drei Sekunden später bekommen wir aufgelöste Promise-Daten. Nun, dieses Verhalten imitiert, was wir von Versprechungen erwarten könnten, die mit AP Augen für Netzwerke interagieren . Das Versprechen kann Zeit dauern, bis es abgeschlossen ist, aber wir können immer noch den Mantel außerhalb der Versprechenfunktion laufen, da es im Hintergrund ausgeführt werden. Letztendlich verspricht, erlaubt und ordentlich handhaben asynchrone Prozesse im Hintergrund, wie wir andere Mantel laufen. Großartig. Wir haben gerade die Grundlagen der Verheißungsschaffung in Essex behandelt. Lassen Sie uns weiter Versprechen mit einem praktischeren und tiefgreifenden Beispiel erforschen, um ihre wahre Nützlichkeit und Kraft zu veranschaulichen. 21. HTTP und Fetch: und Sie sechs. Wir haben die Anfänge eines neuen A P Ich namens Fetch, die uns erlaubt, mit Internet Resource zu interagieren ist durch Js-Programme, um eine solide Grundlage für diese Art der Programmierung zu legen . Lassen Sie uns ein weiteres Grundkonzept in der Webentwicklung und im World Wide Web abdecken. Im Allgemeinen http. Oder Hypertext-Übertragungsprotokoll definiert eine Grundlage für die Kommunikation von Daten über das Internet. beispielsweise, Beachten Siebeispielsweise,dass Sie in einem Browser am Anfang eines u. L. L. immer die Buchstaben Http sehen. Nun, dieses Http spezifiziert ein Schema für die Website für eine bestimmte Anforderungsnachricht, die an einen Server gesendet werden soll. Der Server stellt dann Ressource basiert auf der HTTP-Anfrage, wie HTML-Dateien und andere Inhalte wie Bilder für den Browser Sirte basiert. Wir können verschiedene Arten von HTTP-Anforderungsmethoden verwenden, um genau anzugeben, welche Aktionen dann ausgeführt werden sollen. Zunächst einmal die gebräuchlichste die get-Methode http-Anfrage dar, die nur Daten abruft und keine sekundäre Wirkung hat . Normalerweise ist die get-Methode. Wir werden HTML als Ressource oder andere Daten wie ein JavaScript Jason Objekt drehen. Infolgedessen nein, nein, dass Jason ein alternatives Dateiformat für JavaScript ist, das im Wesentlichen große Job-Skriptobjekte als eine große Datei hosten . Als nächstes sendet die Post-Methode tatsächlich Daten an einen Server, damit sie eine Ressource hinzufügen oder vorhandene aktualisieren können. Dies reicht von allem, was bedeutet, eine E-Mail innerhalb einer Liste zu zerstören oder Kommentare in einem Message Board zu aktualisieren oder neue Werte zu Datenbanken hinzuzufügen. Weitere Beispiele für HTTP-Methoden sind der Kopf , der von Metainformationen wie dem Titel einer Ressource, die löschende Methode, die eine angegebene Ressource entfernt. Und die Patch-Methode, die nur teilweise die Ressource ändert, die Sie am häufigsten sehen, erhalten und posten in Aktion. jedoch Wenn wirjedochmit unseren eigenen Datenbanken und Servern umgehen, sowie bei der Interaktion mit einem P s. Okay, machen wir uns bereit, mit AP-Augen zu rummeln und zu codieren und zu holen 22. APIs und ES6-Fetch: in JavaScript. Wir haben eine neue Technologie namens Fetch, die Zugriff auf die Verwendung von http-Anforderungsmethoden bietet, um fetch zu verwenden. Wir haben die fetch-Methode, den Pfad der Ressource, übergeben . Wir wollen Daten aus, einschließlich aller Spezifikationen. Dann sind diese Funktion zurückgibt Versprechen, die die Ergebnisse dieses Aufrufs enthält. Dies ist Mittel können entweder eine abgelehnte Luft oder ein Ergebnis Erfolg zurückgeben, wie zuvor in der Exploration von Versprechen gesehen . Das Verbrauchsversprechen enthält dann alle relevanten Daten, die wir von der Ressource wollen. Kurz gesagt, der Fetch a p I wird derzeit noch auf experimentelle Technologie betrachtet und unterstützt nicht alle Browser-Versionen. Doch wenn Sie neuere Versionen von Chrome, Firefox oder Safari verwenden , sollten Sie in Ordnung sein. Okay. Um einen Abruf durchzuführen, benötigen Sie eine Ressource der ersten Grab-Daten von Had zu Jason Platzhalter Punkt geben Sie einen Code dot com Genau hier. Hier haben wir ein Tool, das ein A P I für Test- und Prototyping-Zwecke simuliert. Es ist voll funktionsfähig und ermöglicht es uns, Resource ist zu besuchen und Pseudo-Daten als eine Möglichkeit zu lernen. Dies wird perfekt die Fähigkeit der fetch-Methode veranschaulichen, weil Sie keine Authentifizierungs-Tees dafür kaufen müssen , a p I oder sogar als Benutzer registrieren, um mit ihm zu interagieren. Es ist jetzt völlig kostenlos. Sobald Sie hören, scrollen Sie ein wenig nach unten und Sie finden eine Liste der verfügbaren Ressourcen und Routen. Klicken Sie auf die Straße, die Post Schrägstrich eins sagt. Dies führt Sie zu einer Seite, wo Sie einige Rückkehr Jason Daten finden, die nicht konsequente Dinge wie ein Benutzer i d. einen Titel und eine Körperkomponente enthalten konsequente Dinge wie ein Benutzer i d. . Um für uns zu gehen, wird es sein, ein fetch a p zu verwenden, um dieses Jason-Objekt in unserem Programm zu sehen. Alles klar, also Schritt eins, lassen Sie uns die U. R L in ein Zeichen der konstanten Route innerhalb unserer Funktion kopieren . Setzen Sie auf, dass Sie so sind Jason Platzhalter Punkt tepco Punkt com Schrägstrich Beiträge Schrägstrich eins. So const root gleich, dass du l in einer Stärke warst. Lassen Sie uns nun die fetch-Methode verwenden. Es nimmt unsere Route für den ersten Parameter, und dann können wir alle Spezifikationen mit einem Objekt als seinen zweiten Parameter angeben. Und unsere Spezifikationen speziell für diese wird eine Methode sein, die die HTTP-Get-Methode in allen Kappen ist . In Ordnung jetzt, genau wie eine Funktion. Wir verbrauchen das Ergebnis mit einer dann Aussage, weil es ein Versprechen ist. Also Punkt dann Antwort. Und lassen Sie uns einfach weitermachen und der Rat protokolliert diese Antwort vorerst nicht. Ich werde gehen und mich schleichen. Lasst uns retten. Zurück zu unserer Bewerbung und Boom! Wir erhalten eine Antwort, deren Status letztendlich 200 ist. Okay, schauen wir uns den Pro-Doe-Schlüssel hier an. Beachten Sie, dass wir eine Reihe nützlicher Methoden innerhalb des Objektprototyps für die Antwort . Die, die vor allem interessiert waren, ist die Jason-Methode. Die Jason-Funktion wiederum kehrt zurück. Ein weiteres Versprechen, das zurückkehren wird, sind reine Jason Data. Nun, wenn wir zurückkehren, wird dies das Konzept der Verkettungsversprechen einführen, jede Rückantwort, die Jason wir bewältigen könnten. Die Rückkehr Jason von diesem Versprechen mit einem anderen als Aussage. Also modifizieren und genau wie so, anstelle von Council Dot Logging, wird die Antwort Antwort Punkt Jason zurückgeben und jetzt innerhalb einer anderen damaligen Erklärung mit diesem Kettenversprechen können wir den Jason behandeln, den wir finden und einfach Rat. Loggen Sie das nicht, wenn wir Boom speichern, wir finden das ganze Objekt, das wir früher online gesehen haben. Wir haben den Körper des I D den Titel und den Benutzer I d Sehr cool. So fetch ermöglicht es uns, Resource ist online direkt innerhalb unseres Programms zu verwenden. Stellen Sie sich vor, wir verwenden eine andere A p I, die Wetterdaten oder Stadtberichte veröffentlicht. Zum Beispiel. Wir könnten diese wirklich komplexen AP-Augen verwenden, um wirklich komplizierte Anwendungen zu erstellen, und wir können mit ihnen sehr einfach mit dem Fetch A P I und Versprechen arbeiten. Lassen Sie uns eine dynamischere AP verwenden ich jetzt und fortzusetzen mit einem anderen Beispiel holen Wir verwenden einen anderen seltenen freien AP Ich tatsächlich von Google gehostet Jason Daten über Bücher zurückzugeben. Jetzt tragen Sie mit mir, wie wir dieses u R l tippen Aber es wird es wert sein. Vertrau mir. Also die Ihre URL ist http als welche Tage für sichere w w dot google 80 IES dot com Wir werden die Bücher Ressource finden. Wir schauen uns die Version eins des FBI, so v man finden Bände. Wir beginnen die Abfrage mit einem Fragezeichen. Wir sagen, Q entspricht spn. Und dann bekommen wir endlich eine Reihe von Zahlen, um unser Eis darzustellen. BNC 0747532699 Alles klar, das ist also die ganze Saite. Sie können das Video pausieren und sich einen Moment Zeit nehmen, um es anzusehen, um sicherzustellen, dass Sie alles eingegeben haben . Aber ich werde voran gehen und sparen, und wenn wir das tun, finden wir neue Jason-Daten in unserem Konsul. Großartig. Also können wir uns Gegenstände ansehen, das Objekt darin finden, wir haben Volumeninformationen beschränkt und eine Reihe von Informationen über dieses Buch sehen , das Harry Potter und der Stein des Zauberers ist. Sehr cool. Also haben wir HTTP-Anfragen untersucht, die JavaScript ein p I holen und Versprechungen in Aktion alle zusammen verketten , mit einem P Augen arbeiten und sie mit Versprechen behandeln wird uns die Macht geben, wirklich sinnvolle es sechs Projekte zu bauen . In Ordnung, gehen wir zu weiteren Themen in E S. Sechs Sechs 23. ES7 und mehr auf EcmaScript: Willkommen bei Acma Script 2016. Die nächste Version des Atma-Skripts nach es sechs. Diese Version wird als E s sieben bezeichnet. Obwohl sehr kleines Update auf die Sprache, ist es immer noch notwendig, über die neuen Funktionen zu gehen, die das Update enthält auch einige sehr gut entwickeln Vorschläge für Funktionen in Javascript, die eine große Chance haben erscheinen und essen. S Acht. Zunächst hat er sieben einen neuen Operator für exponentiell ation den mathematischen Gedanken Pau Helper ersetzen . Dieser Erklärungsoperator macht es viel einfacher, mit dem Anheben von Zahlen durch eine Macht umzugehen. Als nächstes gibt es sieben Release-Unterstützung für eine neue Methode innerhalb eines Rennens. Diese Methode Punkt enthält macht es viel einfacher zu überprüfen, ob ein Element bereits in einer Struktur vorhanden ist , nachdem die neuen sieben Features untersucht wurden. Lassen Sie uns über einige neue Möglichkeiten gehen, die Sie Ihre Wetten auf ein E S A und die Veröffentlichung von Atma Script 2017 eine sehr hohe Etappe s. Ein Vorschlag enthält eine bessere Unterstützung für den Zugriff auf die Elemente von Objekten. Hash-Maps und Job-Skript enthalten Methoden für den Zugriff auf die Werte, Schlüssel und Eingabe. Insbesondere jedoch habe ich derzeit jedochnur Unterstützung für die Objektpunktschlüssel-Methode. Also lasst uns hoffen, dass es ein erregt. Es macht Objekt-Manipulation mit einem Punkt-Werte und Punkt-Einträge Methode. Als nächstes kommt ein riesiger Vorschlag, der fast seinen Weg in E s sechs bzw. S sieben gemacht hat. Eine Senke funktioniert eine Senke Funktionen weiter, unterstützen asynchrone Programmierung in Javascript. Sie behandeln und geben Versprechungen gut zurück, lassen Code im Hintergrund ausführen, ohne jemals mit dem Programm zu blockieren. Wie Sie sehen, eine Spüle Funktionen eingeführt. Noch besser Steuerungsfluss über Versprechen hinaus, wenn es um asynchrone Programmierung geht. Also die Erkundung der vorgeschlagenen ein Waschbecken und warten Schlüsselwort wird Spaß und wertvoll sein. Alles klar, lasst uns alles über uns sieben und darüber hinaus lernen. 24. ES7: Neue Funktionen: Um mit der Erkundung von S sieben beginnen zu können, müssen wir einige Änderungen an unserer Build-Konfiguration vornehmen. Es ist nichts zu drastisches. Nur ein NPM in Salz und eine weitere Saite in unserem Paket Dot Jason Fox. Also in Ihrem Terminal, finden Sie Ihr Projekt und führen Sie NPM installieren babble Preset ist 2016. Retten Sie den Tod. Sobald ich fertig war, gehen Sie zurück, um Dot Jason in Ihrem Projekt zu packen. Lassen Sie uns Paket Punkt Jason finden und stellen Sie sicher, dass 2016 als eine der Voreinstellungen angegeben ist Ordnung , , mit dem Projekt und gemustert. Lassen Sie uns die neuen Features von S sieben oder acht als 2016 erkunden. Zuerst drauf. Um mit Exponenten zu arbeiten, rufen wir traditionell die Mathematik-Bibliothek an und verwenden so eine Power-Funktion. Lassen Sie ein gleichberechtigtes Meth hoch. Wie 25 Und wie wir Log A abgesagt sehen wir 32, die zwei bis zur fünften Macht ist. Doch in seinen sieben, haben wir eine viel einfachere Zeit, dieses Verhalten mit der X Women sie asiatischen Operator zu erreichen. Inspiriert von anderen Sprachen wie Ruby, die Exponenten haben einen neuen Operator würde nur wie zu multiplizieren aussehen. Zeichen unterbrechen, also ändern Sie sich in diesem Gedanken, Kumpel. Rufen Sie mal fünf, als wir vertrauten log A. Wir bemerken, dass wir immer noch 32. Lassen Sie uns die nächste neue ES-Sieben-Funktion erkunden, die Sie vielleicht kennen. Der DOT enthält Methode, die von Schrumpfungen in JavaScript unterstützt wird, erstellt genau wie so lassen Sie gleich schrumpfen. Wonderful dot beinhaltet Wunder, wie wir konstant log sein, sollten wir einen wahren Wert sehen. Also werden wir wahr. Lassen Sie uns testen, ob es Butter enthält, also sparen Sie. Nein, Butter ist nicht enthalten. In Ordnung, also enthält die Zeichenfolge Methode einfach überprüft. Wenn das, was wir mit ihm argumentieren, in den eigentlichen Schrumpfen aufgenommen wird. Ja, sieben erweitert diese Art von Funktionalität auf ein Rennen unterstützt durch seinen eigenen Punkt Includes Methodenänderung . Seien Sie zu einem Array und Rat protokollieren Sie nicht, ob einen bestimmten Wert enthält. Also lasst uns das auch tun. 345 und sechs. Lassen Sie uns überprüfen, ob diese Rate für beinhaltet, wie wir sparen. Ja, unser Array umfasst vier. Wie wär's mit sieben? Also retten wir Stürze? No Are Ray enthält keine sieben. In Ordnung. Nach dem Abdecken des Exponents Operator, jeder Array-Punkt enthält Methode. Wir haben die Erkundung aller neuen Funktionen abgeschlossen. Indien Sieben. Jetzt braucht es viel, um eine neue Funktion in ein Update auf JavaScript aufzunehmen. Und nur weil ja sieben eine relativ kleine war, heißt das nicht, dass es nicht viele Ideen gibt , wie man die Sprache verbessern kann. In der Tat gab es viele Vorschläge für die Sprache für S sieben. Allerdings gibt es immer noch nicht vollständig entwickelt und gibt es in bestimmten Phasen des Experimentierens und Implementierung. Viele von ihnen jedoch nahe, geben es jedoch nahe,Teil einer Veröffentlichung zu werden und könnten es sehr gut in die nächste schaffen . Es braucht nur Zeit. Nun, lassen Sie uns jedocheinige der spätesten Vorschläge untersuchen jedoch und diese Funktionen anschauen. Auf diese Weise bereiten wir uns auf S A und die Zukunft von JavaScript vor. 25. ES8-Vorschlag: Mehr Objektmanipulation: Unsere ersten s. Ein Vorschlag macht eine Manipulation von Objekten viel einfacher. Um mit diesen neuen Funktionen arbeiten zu können, jedoch müssen wir jedocheine weitere Voreinstellung beleidigen, die diesen neuen Mantel verarbeiten kann. Gehen Sie zurück zum Terminal und führen Sie NPM aus. Installieren babble voreingestellt ja, 2017 Tod retten. Und dann müssen wir die notwendige Änderung am Paket Punkt Jason vornehmen, aber das Hinzufügen der ES 27-Voreinstellung zu unserer Liste der Presets, also stellen Sie sicher, dass in Paketen aus Jason, Sie haben es genau so. Ja, 2017 in Ihrer Liste der Voreinstellungen. Großartig. damit Lassen Sie unsdamiteine Funktion übergehen, die bereits weit verbreitete Unterstützung innerhalb des Objekts hat. Prototyp-Punkt-Tasten, die alle Schlüssel für eine Methode drehen, um ein Objekt namens OBS zu finden und ihm einige schnelle Daten geben , nur um einige Schlüssel und Werte zu haben. Laß AJ gleich ein, das eins sein ist, das zu und sehen ist, was drei sein wird. Dann lassen Sie uns eine Variable namens Schlüssel definieren und sie dem Ergebnis des Aufrufs der Objektprototypen zuweisen . Keys funktionieren auf unserem Objektobjekt wie er gleich Objekt Punkt Tasten nach oben ist, und wie Sie Gesetzlosen Tasten Presto beraten haben, haben wir eine Reihe von allen unseren Tasten, ABC Fantastic. Nun, vor diesem vorgeschlagenen Update für Essay, hatten wir nur Zugriff auf diese Punktschlüssel-Methode für den Objektprototyp. jedoch Dies scheintjedochein bisschen unvollständig zu sein. Was ist, wenn ich nur auf die Werte gut aussehen wollen, Zum Glück, diese vorgeschlagen er s eine Funktion bietet für uns eine Punkt-Werte-Methode, die nur verkauft, ändern Sie den Code wie folgt. Lassen Sie Werte gleich Objekt Werte auf OBS und dann werden wir vertrauensvoll unsere Werte protokollieren. Und voila! Wir haben eine Reihe von unseren Werten 12 und drei. Schließlich zusammen mit der Schlüssel- und Wertefunktion haben wir zusammen mit der Schlüssel- und Wertefunktioneine andere Methode namens Einträge, die uns Paare von Schlüsseln und Werten gibt. In Honore. Lassen Sie uns es untersuchen. Lassen Sie Einträge gleich Objekteinträge, Besitzer bis und Rat Punkt Log-Verletzungen, wie wir Boom Array zu jedem speichern ist ein Paar von unserem Wert und Schlüssel. Also hier ist ein Wert und Schlüssel Schlüssel und Wert. Großartig. Jetzt fragen Sie sich vielleicht, warum ist das nützlich? Schließlich haben wir die Schlüssel und Werte Methoden, die uns viel mehr begrenzte Arrays auf die spezifischen Teile des Objekts, das wir wollen, gibt. Wir werden erwägen, durch das Array zu iterieren, um Schlüssel und Werte zu drucken. Diese Einträge erfüllt, die es direkter macht und dies mit der DOT-Tasten oder Punkt-Werte-Methode tun. Lassen Sie uns eine einfache Schleife hinzufügen, um die Schleifen in Einträgen zu erhöhen, um auszudrucken. Unser Objekt wird in diesem Fall for-Schleife verwenden und verbessern, so dass für die Eingabe von Einträgen, dann werden wir einfach Sadat aufrufen. Protokollieren Sie den Temperaturring, was unser Schlüssel ist, ist der aktuelle Eintrag. Wir greifen auf das erste Element mit einem Eintrag zu. Dann speichern wir den Wert ist das zweite Element mit einem Eintrag, so dass wir speichern und boom ta Wert. Ein Schlüssel sein Wert in Schlüssel sehen Wert drei US dank dieser ES acht Vorschlag wird eine einfachere Zeit haben , Objekte in JavaScript in der Zukunft mit den DOT-Werten und, uh, Einträge Methode jenseits nur Punkt-Tasten zu manipulieren uh, . Jetzt gibt es eine große Chance, dass diese Methoden in der nächsten Version von Atma-Skript erscheinen, so dass es schön ist, über sie noch vor ihren offiziellen Funktionen zu wissen. Lassen Sie uns ein anderes s einen Vorschlag als nächstes erkunden 26. ES8-Proposal Async: weiter, werden wir einen riesigen Vorschlag für Essay etwas durchlaufen, das tatsächlich fast seinen Weg in ES sechs und sieben gemacht hat und eine riesige Möglichkeit hat, in der nächsten Version des ECMO-Skripts zu erscheinen. Dies wird tatsächlich unsere Diskussion über Versprechen und asynchrone Programmierung sowie Explore gegenüberliegenden Funktionen in diesem s einen Vorschlag fortsetzen . Eine Senke Funktionen haben einen zugrunde liegenden Zweck, eine Zirkusprogrammierung für den Job, Skript-Entwickler und Programmierer weiter zu vereinfachen den Job, . Zunächst einmal können Sie sich an diese Spannung zwischen einer synchronen oder gleichzeitigen Programmierung und synchroner oder sequentieller Programmierung erinnern. In einem Fall, dem ersteren, haben wir die Möglichkeit, mehrere Prozesse gleichzeitig auszuführen, um die Beschichtung in sequentieller Programmierung zu beschleunigen . jedoch Wir habenjedochein Modell von oben nach unten. Der muss jeden Methodenschritt ignorant ausführen, auch wenn das bedeutet, dass bestimmte Funktionen wirklich lange dauern werden. Dies bedeutet, dass Operationen, die eine kurze Zeit für den Benutzer in Anspruch nehmen könnten, am Ende immer die späten Warten auf das Geheimnis, dieses Programm zu beenden daher ein Geheimnis. Es sind Programme lösen dieses Problem, indem sie diese Verzögerungsfunktion in den Hintergrund senden und den Rest der Anweisungen beenden. Ein neuer C-Vorschlag implementiert diese Art der Programmierung mit neuen Funktionen, die ein neues Spezialwort verwenden . Eine Spüle, die kurz ist für Sie erraten, dass es synchron. In Ordnung. mit dieser Diskussion Lassen Sie unsmit dieser Diskussionunsere erste grundlegende Funktion erstellen, die eine Senke genannt wird, die einfach eine Zeichenfolge zurückgibt. Was so eine Spüle Funktion? Ein Waschbecken eins. Welche kehrt zurück? Was jetzt? Genau wie ein Versprechen. Wir verbrauchen die Rückgabedaten von dieser Facing Funktion mit einer then Anweisung, also gehen Sie und schreiben Sie eine Senke. Eins. Rufen Sie die Funktion Punkt an, dann finden wir die Antwort und Konsul Schulden. Protokollieren Sie diese Antwort und boom! Wir erhalten eine in unserer Konsul Rückkehr von der asynchronen Funktion. Großartig. Lassen Sie uns nicht untersuchen, Facing Funktion, die Daten dieses Mal zurückweist definieren und eine Senke , auf die nur einen Fehler auslöst. Es ist eine Spüle Funktion, ein Waschbecken wird ein neues Luftobjekt werfen, das Problem mit einer Spüle sagt. Oh, nein. Und genau wie zuvor mit Versprechen fangen wir Fehler mit einer catch-Anweisung, einer Senke, um die Funktion aufzurufen. Wir werden voran gehen und alle Fehler zu fangen und beraten. Protokollieren Sie, wie die Luft aussieht, wie wir retten, wen wir Luftproblem mit einer Spüle bekommen, und wir bekommen eine schöne Stack-Trace, um zu sehen, wo es tatsächlich passiert ist von Great. Lassen Sie uns den letzten Zustand einer Zusage untersuchen, die neben, aufgelöst und abgelehnt ist, und untersuchen, wie derzeit verarbeitende Funktionen mit dem await-Schlüsselwort behandelt werden. Lasst uns zuerst modifizieren. Lösen Sie tatsächlich einige Daten auf, um zu funktionieren? Gehen wir einfach voran und kehren zu jetzt zurück. Was wäre, wenn er unsere A Waschbecken eins kombinieren wollte und zwei Funktionen gegenübersteht? Nun, wir könnten dies mit einer anderen Sink-Funktion tun, die auf den Wert beider wartet Mit dem await Schlüsselwort setzt das await Schlüsselwort eine Pause in der Rennfunktion. Es erlaubt nicht, dass es fortgesetzt wird, bis das Versprechen einige Rückgabedaten hat. Es ist sehr nützlich, um den kontrollierten Fluss wieder in die Funktion einzuführen, besonders wenn Sie nicht möchten, dass Code ausgeführt wird, bis Sie das Ergebnis Ihres Versprechens haben. Lassen Sie uns diese neue Wachfunktion in einer Funktion, die als Senke drei bezeichnet wird, erkunden. Es wird diesen Anruf zu entfernen und sagen, eine Senke Funktion ein Waschbecken drei. Zuerst deklarieren wir eine erste Konstante von einer, die besagt, dass Schlüsselwort auf den Aufruf einer Senke warten soll, die vertraute ist . Protokollieren, wie man aussieht, und für const, werden wir das gleiche tun, aber für den Aufruf einer Senke zu warten, und dann werden wir voran und Rat Dot Log zu gehen. Und schließlich, lassen Sie uns einen Aufruf ihrer asynchronen Funktion ein Sink drei hinzufügen, wie wir speichern. Und ich hatte nur einen kleinen Rechtschreibfehler. Also geh und repariere das. Wenn du denselben Fehler gemacht hast, obwohl du wahrscheinlich gesehen hast, wie ich das gemacht habe und wie Oh, nein, richtig, denken sie, dass es Nick ist. Also gehen wir hin. Wir haben eins in unserem Konsul. Beachten Sie also die beiden Verwendungen des await-Schlüsselworts. In der ersten Instanz wird die eine Variable auf das Ergebnis der Ergebnisversprechung gesetzt und wartet auf ihren Wert. Egal, wie lange dieses Versprechen dauern kann, um zu lösen, dasselbe gilt für unsere zu konstant. Es wartet darauf, dass das Rennen funktioniert, auch wenn das bedeutet, eine Weile zu nehmen, um dies zu tun. Es ist fast so, als würde man innerhalb unseres asynchronen Programms ein Gateway erstellen. Es stellt sicher, dass anderer Code, der über das erwartete Versprechen hinausgeht, nicht in die versprochenen Wertrückgaben eindringt. Auf diese Weise können wir tatsächlich Code schreiben, der vom Ergebnis des Versprechens abhängt. Schließlich haben wir das await-Schlüsselwort, um sicherzustellen, dass unsere Variablen auf ein Versprechen gesetzt werden, das nicht undefiniert ist. Nun, diese Logik umfangreiche Funktionen, die mit einem A p i oder Server interagieren. Oft wollen wir nicht, dass die Logik fortgesetzt wird, bis wir relevante Daten in unseren Funktionen gefunden haben. Daher das U A-Schlüsselwort sicher, dass wir keine Daten manipulieren, die tatsächlich nicht gültig sind, stellt das U A-Schlüsselwort sicher, dass wir keine Daten manipulieren, die tatsächlich nicht gültig sind, was für AP-Augen sehr nützlich ist, die Daten erst nach einiger Zeit zurückgeben können . Dennoch führt die Verwendung mehrerer await-Schlüsselwörter auf diese Weise zu einem synchronen und sequentiellen Fluss der Logik Zurück zu unseren A-Senk-Funktionen. Was ist der Zweck des Ass im Schlüsselwort? Dann? Wenn dies keine Beschleunigungen mit all diesen gegenüberliegenden Anrufen einführt und die Ursache abwartet und daher die Chance auf Parallelität negiert, ist das eine großartige Frage. Und die Antwort ist, es ist wichtig, Sie Wait Schlüsselwort nach Ihrem Ermessen zu verwenden, fügen Sie nicht zu viele hinzu, weil es wirklich die Größe der asynchronen Programmierung in erster Linie herausnimmt. Um Zeit nehmen Funktionen in den Hintergrund zu setzen, warten Sie noch. Insgesamt ist sehr nützlich, wenn wir Code schreiben wollen, der wiederum vom Ergebnis eines Versprechens abhängt . Lassen Sie uns ein letztes Feature in diesem grundlegenden Vorschlag erkunden. Die Basisfunktion wird auch mit einer Versprechen Punkt all Funktion geliefert, die mehrere Aufrufe von asynchronen Funktionen parallel verarbeitet. Lassen Sie uns erklären unsere vierte und letzte eine geheime Dysfunktion ein Waschbecken Funktion ein Waschbecken für. Wir verwenden die Strukturierung Zuweisung, um sowohl festgenommene als auch Verhaftung auf eine Variable auf einmal zu setzen . Wir werden es gleich der Erwartung auf Promised setzen, die wir verwenden können, um ein Array von asynchronen Funktionen zu übergeben, die versprechen, dass alle gleichzeitig zivilen Anruf zuerst einen kranken aufrufen und dann eine Senke auf und dann schließlich erhöhen eins und rot zu innerhalb eines Vertrauten. Ich liebe es, die Konstanten zu überprüfen. Und dann endlich, lasst uns ein Waschbecken. Vier. Rufen Sie am Ende unseres Programms an und schauen Sie es aus und boom! Wir bekommen eine zu Ihnen wie erwartet, weil versprechen, dass alle beide gleichzeitig ausgeführt werden. Ehrfürchtig. Dieser Feature-Vorschlag einer Spüle und einem Gewicht gibt es schon eine Weile, und es hat fast seinen Weg in Essex, aber die Ingenieure hinter einer Spüle wollten es perfekt machen, so dass es einfach nicht ganz seinen Platz in einem Release gefunden noch. Sie definitiv Seymour der A sinken und warten auf Funktionalitäten in der Zukunft von JavaScript , obwohl Sie glücklicherweise bereit sind, diese Funktionen zu verwenden und beginnen, sie zu nutzen, um Ihre Job einfacher mit asynchronen Methoden als Entwickler und JavaScript-Programmierer. Zum Glück werden Sie auf dem neuesten Stand sein und alles über eine Spüle und ein Gewicht wissen, noch bevor es offiziell veröffentlicht wird. 27. Vorschau der React: Willkommen bei Book Explorer. Wir werden diese Anwendung zu schnell zusammen erstellen, einführen, reagieren und viele der Konzepte, die wir übergegangen sind, und Essex zusammenbringen, um zu sehen, wie es im Maßstab einer Unternehmensanwendung funktionieren könnte . Es funktioniert genau so. Rufen Sie das Suchfeld auf und suchen Sie einen Buchtitel für alles, was Sie wollen. zum Beispiel Lassen Sie unszum BeispielHarry Potter suchen. Als nächstes kommt eine Galerie von Buchtiteln mit ihrem Bild ist relevant für die Abfrage, die wir mit Awesome gesucht. Jeder Titel, der eine klickbare Komponente hat, die uns zu seiner Homepage navigiert, wo wir weitere Informationen finden können, so dass wir gehen. Wir finden seine Homepage bei Google, die wir dynamisch von der Anwendung erhalten haben. Während der Erstellung dieser Anwendung erfahren wir alles über JSX und Mawr Essential Reagieren Ideen in diesem Abschnitt und werden mit den Google Books arbeiten , ein P I, um unsere Daten zu erfassen. Hoffentlich haben Sie viel Spaß beim Lernen reagieren und viele der sechs ES-Sechs-Konzepte zusammenbringen, die wir in diesem Kurs gelernt haben. Lassen Sie uns Beschichtung bekommen 28. Einrichtung und JSX: Lasst uns anfangen Buch zu erforschen, um loszulegen. Wir müssen einige neue NPM-Pakete innerhalb unseres Projekts beleidigen. Gehen Sie zurück zu Ihrem Terminal und Projektordner und führen Sie NPM Install aus, die voreingestellt reagieren, reagieren, stumm reagieren, reagieren, Bootstrap reagieren und dann einen Rettung Tod tun. In Ordnung. Dadurch werden die Voreinstellungen installiert, die unserer Webpack-Konfigurationsdatei mitteilen, dass sie durchlaufen soll. Reagieren Sie Fox. Es wird beleidigen, sich selbst zu reagieren und die Reaktion, Um, die Rendering-Reaktionskomponenten auf die Browser-Benutzeroberfläche behandelt. Und es wird uns auch das React Bush-Paket geben, das den Verkauf in React-Projekten erleichtert. Zunächst einmal stellen wir sicher, dass unser Pakistan Jason vollständig korrekt eingerichtet ist. Gehen Sie zurück zum Paket Punkt Jason und stellen Sie sicher, dass Sie reagieren in Ihre Voreinstellungen einbeziehen. Genau wie so Jetzt gehen Sie zurück, um solche es zu indizieren und fangen wir an, mit reagieren zu arbeiten. Zuerst importieren, reagieren Sie aus der React-Bibliothek, und dann werden wir die Reaktion stumm aus reagieren Dump importieren und feststellen, dass dies Standardmodule Me sind . Jetzt lassen Sie uns schnell etwas Rendering auf dem Bildschirm mit React bekommen. Zuerst müssen wir jedochden jedoch Punkt html indexieren und eine sehr kleine Änderung vornehmen, also gehen Sie zum Erstellen des Indexpunkts html Wir brauchen bei einem neuen div direkt über dem Skript, das einfach sagt, dass die I d Route ist. Jetzt werden wir diese Idee auf Route setzen, und dieser Tag wird tatsächlich von React verwendet werden, um unsere gesamte Komponente und Anwendung zu rendern . Großartig. Jetzt können wir tatsächlich dieses Tag verwenden, um reagierende Komponenten zu rendern und reagierende Komponenten zu rendern wir von React Down-Paket in Index Duchy s verwenden. Lassen Sie uns ein schnelles div rendern, das nur sagt, Anwendung reagieren. Wir werden eine React Arms Rendermethode verwenden, die zwei Parameter die rote Komponente, die wir rendern wollen , und wo es auf dem HTML rendern. Also werden wir sagen, reagieren Sie stumm, machen Sie nicht gut additiv, das nur sagt, Anwendung reagieren Und dann für den zweiten Parameter, geben wir an, wo wir bekommen werden, dass i d so Dokument Punkt get Element, Aber ich d werde auf die einer der Wurzel sehr leicht. Jetzt bemerken Sie auch, dass es scheint, als würden wir HTML in unserem JavaScript-Fop verwenden. jedoch Dies istjedochnicht wirklich HTML. Es heißt J s ex JSX in Essex bei XML wie oder html wie Syntax-Markup zu JavaScript um Mary-Komponenten eines Bildschirms zu verwenden. JSX ist eine Struktur, die wir verwenden innerhalb reagieren, um unsere Komponenten zu erstellen, wie wir bemerken, dass unsere Reakt-Anwendung def auf dem Zoom in den tatsächlichen Index R. J s klicken Sie hier und boom, Da gehen wir. Reagieren Sie die Anwendung. Alles klar, Nächster oben. Lassen Sie uns diese Logik in ein anderes Modul exportieren, wird reagieren, um von außerhalb dieser Indexpunkt-Js-Datei von einer externen Komponente zu erscheinen . 29. Eine globale Komponente erstellen: Lassen Sie uns eine externe Komponente erstellen Der Host von JSX für die Anwendung zuerst, erstellen Sie einen neuen Komponentenordner und innerhalb dieser, erstellen Sie eine Datei namens Global Daja. Ja, also erstellen Sie innerhalb der App einen neuen Ordner, Komponenten und dann innerhalb von Komponenten wird eine neue Datei namens global dot Js erstellen. Jetzt wird innerhalb von Global Duchy s eine Reaktionskomponente erstellen. Komponenten und reagieren auf wiederverwendbare unabhängige Codestücke, die entweder eine bestimmte Funktion erreicht oder einen Teil der Benutzeroberfläche darstellen. In diesem Fall wird unsere globale Komponente als Komponente für unsere gesamte React-Anwendung dienen. Also innerhalb von Global Duchy s ganz oben Adaline, dass Importe reagieren, wie er Komponenten-Feature von reagieren groß jetzt würde eine Klasse einrichten und sie in eine reagierende Komponente verwandeln. Also class global erweitert Komponente und unseren Block von geschweiften Klammern. Bevor wir vergessen,stellen wir sicher, dass diese globale Komponente als Standardkomponente für dieses Modul exportiert wird , damitandere Dateien problemlos damit arbeiten können. Bevor wir vergessen, stellen wir sicher, dass diese globale Komponente als Standardkomponente für dieses Modul exportiert wird , damit Exportieren Sie also Standard, global genial. Erweiterung dieser Klasse als React-Komponente gibt uns jetzt eine Reihe von nützlichen Methoden, die reagieren bietet, um Rendering-Komponenten auf der Schnittstelle zu behandeln. Unsere erste spezielle Funktion von React wird die Rendermethode sein, die einige Js x zurückgab. Unser JSX wird ein getan zurückgeben, das die APP-Komponente vorerst sagt. Fügen Sie also eine Rendermethode hinzu, die einige JSX zurückgegeben hat. Ein häufiger Fehler besteht darin, das Rückgabe-Schlüsselwort wegzulassen und nur das JSX innerhalb der Rendermethode zu haben. Stellen Sie also sicher, dass Sie diesen Rücklauf und Additiv haben, der die globale App-Komponente sagt. Großartig. Also das ist es für die Einrichtung unserer globalen Punkt-Js-Komponente Jetzt mit einem Indexpunkt Ja, lassen Sie uns diese globale Komponente importieren, die wir gerade erstellen. Gehen Sie also global aus dem aktuellen Verzeichnis importieren, finden Sie Komponenten und finden Sie dann global. Jetzt müssen wir eine stehende JSX durch unsere globale Komponente ersetzen und dann wird es ein selbstumschließendes Tag sein , weil es keine Kinder hat, noch Attribute gehen und speichern und boom. Wir finden die globale App-Komponente Great. Jetzt, da wir die globale App-Komponente unter dem Bildschirm sehen, könnten wir diese globale Anwendungskomponente weiterentwickeln und die Funktionen von book exploreaufbauen book explore 30. Ein Eingangs-Komponente erstellen: zu beginnen, sich auf diese globale Komponente zu erweitern, wird ein Eingabefeld für diese Anwendung erstellen , das uns erlaubt, Bücher zu suchen, um unser Suchfeld zu rendern, wird die Vorteile der React Boo Wellen nehmen . Wirklich schöne Eingabefelder ganz oben in der Datei. Lassen Sie uns ein paar hilfreiche Komponenten von React importieren. Bootstrap. Also unter wichtigen reaktiven Komponente von React und Import. Die Formulargruppe für Control Input Group und Glib Pecan Komponenten von React. Bootstrap. Großartig. Lassen Sie uns nun das Renderfeld aktualisieren. Lassen Sie uns unseren Stehtext loswerden und geben Sie ihm einen Typ. Wir werden das Alter nutzen, um Header zu Element Tag und den Titel. Sei einfach Buch, Ei erkunden. Sagen wir das und knallen, wir haben jetzt einen großen Titel. Buchen Sie zu erkunden. Lassen Sie mich die Menge an seiner normalen Größe sehen und gehen Sie nie. Unser Header zu sieht wirklich schön aus. Jetzt werden wir weitermachen und unsere Eingabekomponente einrichten. Unterstützt durch Reagieren. Bootstrap ganz oben wird eine Formulargruppe erstellen, aber Shells Bootstrapped Stil. Dieser Abschnitt als Formular wird dann innerhalb der vier Gruppe eine Eingabegruppe hinzufügen, die eine Inline-Styling zwischen einem In-Form-Steuerelement, das die Benutzereingabe behandelt und eine Eingabegruppe Add on, die einen Klick auf eine Schaltfläche macht die Einreichung des Formulars. Also lassen Sie uns einen Formulargruppen-Boom innerhalb des Formulars hinzufügen Gruppe wird eine Eingabegruppe Eingabe-Route haben, und dann werden wir unsere Formular-Steuerkomponente haben. Wir haben das eigentliche Formular, in dem der Benutzer seine Informationen aus dem Feld eingeben kann, so dass dieser Typ Text sein wird. Und dann könnten wir ihm einen Platzhalter geben, damit wir, der Benutzer, wissen, was zu tippen ist. Suchen Sie nach einem Buch. Und jetzt wird dieses Formular-Steuerelement tatsächlich keine Kinder haben, also könnten wir es zu einem Selbst im schließenden Tag machen, indem wir nur Schrägstrich und das schließende Tag machen. Und dann innerhalb dieser Eingabegruppe, lassen Sie uns hinzufügen und hinzufügen in für Gruppenpunkt. Fügen Sie hinzu und dies wird unser kleiner Knopf sein , der eine Panne, Pecan oder Klippe Symbol sein wird, dessen gute Attribute die Suche sein wird. Alles klar, gehen wir und speichern all das neue JSX. Und dann bekommen wir eine schöne neue Eingabefeld-Komponente, die besagt, Suche nach einem Buch, damit wir Harry Potter tun können. Und wenn wir den Knopf kochen, passiert noch nichts. Obwohl das wirklich schön aussieht, müssen wir dieser Eingabe einige Funktionen hinzufügen. Wir werden neue Hilfsmethode innerhalb einer Reakt-Klasse namens Search erstellen sagte Do it direkt vor der Render-Methode. Lassen Sie uns eine Suche hinzufügen. Lass es uns sein. Platzieren Sie es oben rechts hier und dann in der Suche. Lassen Sie uns nur konstante Log-Suche für jetzt. Als nächstes fügen wir auf Klick-Handler zum Eingabegruppe Punkt Add on hinzu, und dann nimmt der Handler eine anonyme Funktion, die auf die Hilfsmethode verweist, die wir aufrufen möchten, die Suche sein wird. Also auf einem Klick der Eingabegruppe, lassen Sie uns eine Luftfunktion haben, die auf diese Punktsuche verweist. Nein, wenn wir sparen, stellen Sie sicher, dass es so gesagt ist. Add on. Und wenn wir speichern, lasst uns ein paar Mal auf die Suche klicken und boom, wir werden durchsucht, in unserem Konsul jetzt auftauchen. Diese Suchmethode, obwohl sie funktioniert, braucht ein wenig mehr, um es wäre ordentlich, wenn Sie sagen könnten, was desto einfacher in das Eingabefeld eingegeben wird. , müssen wir natürlich Um dies zu tun dynamischere Daten für unsere Reaktionskomponente haben, die darstellt, was der Benutzer in den vier eingibt, um eine Lösung zu finden und wartet. Fügen Sie dynamische Daten hinzu. Lassen Sie uns zum Thema Zustand innerhalb der React-Anwendungen übergehen 31. Zustand einführen: Lassen Sie uns zu dieser Komponente führen, damit unsere Suchfunktion mit den Benutzertypen in der Formularsteuerungskomponente bestätigen kann. Denken Sie daran, Staat bezieht sich einfach auf diese Idee. Diese Daten beziehen sich insbesondere auf eine reagierende Komponente. Wenn der Benutzer mit Ihrer Komponente interagiert, wird der Status aktualisiert und relevante Komponentenänderungen basierend auf diesem Aktualisierungszustand und den eingehenden Daten angezeigt . Alles klar, es ist auf Seetour Komponente. Wir müssen diesen Klassenkonstruktor innerhalb des Konstruktors verwenden. Wir übergeben Requisiten, Schlüsselwort und rufen Super-Requisiten an, um alle eingehenden Daten für diese Komponente zu bestätigen . Dann, nach dem Aufruf von Super Props Week initialisieren Zustand mit diesem Schlüsselwort der Klasse und erstellen Sie ein Zustandsobjekt, sagte der ganz oben, nennen wir Konstruktor, wir werden Requisiten namens Super Props übergeben. Dann sagte ich, wir könnten ein Zustandsobjekt auf diesem innerhalb des Zustandsobjekts initialisieren. Lassen Sie uns einen Schlüssel für jetzt, die Bottiche des Wertes eines Blinklicks Stärke, so dass es einfach ein Abfrageschlüssel sein wird, die Karten passen zu einem Blinzeln Stärke genial. Jetzt unter Formular-Steuerfeld, können wir eine Logik hinzufügen, die diesen Zustand zu aktualisieren, was auch immer die Benutzertypen so hinzufügen auf Change Handler zur Formular-Steuerkomponente, die ein Ereignis nimmt, das auf eine bestimmte Funktion zeigt, spezifisch sind. Funktion wird diese Punkt-Set-Zustandsmethode reagieren, um unseren Zustand auf den relevanten Wert zu aktualisieren , den wir von der Ereignisvariablen erhalten. Also lassen Sie uns diesen Gedanken nennen. Geben Sie gut an, übergeben Sie ein neues Objekt. Schauen wir uns unsere ursprüngliche Abfrage an, und dann werden wir das auf den Ereignispunkt-Zielwert zuordnen, der eine Zeichenfolge darstellt, die den Benutzer innerhalb der Formular-Steuerkomponente eingibt. Lasst uns sparen, wie wir es tun. Also lasst uns gehen einige neue Daten eingeben. Also Harry Potter und es scheint, als würde es funktionieren. Wir haben nur keine Möglichkeit zu überprüfen, ob es vorerst tatsächlich funktioniert hat. Also lassen Sie uns das Council Dot Log in der Suche toe aktualisieren. auch Protokollieren Sieauch nicht diese Punktstatus-Punktabfrage. Sparen wir, weil wir das tun, müssen wir Harry Potter in den Ruhestand gehen. Aber sobald wir es tun und wieder klicken Suche Boom, wir bekommen Suche. Harry Potter in unserem Konsul großartig aktualisieren Zustandsfunktion arbeitete mit diesem Punkt-Set-Status und einer unveränderten Handler-informierten Steuerung. Alles klar, bevor wir weitermachen, fügen wir dem Eingabefeld einen weiteren Ereignishandler hinzu. Das erleichtert es dem Benutzer, mit der Anwendung zu interagieren, indem er einfach das Eingabetastenwort drückt . Dieser Handler wird auf Tastendruck aufgerufen und dann registriert der eigentliche Tastendruck eine Ereignispunkt-Taste und alles, was wir tun müssen, ist die Überprüfung des Ereignisses. Daki ist gleich Zehe eingeben. Also lesen Sie nach dem Wechsel. Lassen Sie uns auf T drücken Sie nochmals. Wir schauen uns das Ereignis an, aber dieses Mal lassen Sie uns überprüfen. Wenn Ereignis Punkt Schlüssel gleich eingeben ist, und dann, wenn ja, wir gehen voran und rufen Sie diese Punktsuche. Lasst uns noch einmal sparen. Wie würde es diesmal? Lasst uns den Herrn der Ringe durchsuchen und bemerken. Ich werde nicht auf den Suchknopf klicken, aber drücken Sie die Eingabetaste und boom! Wir haben eine Suche nach dem Herrn der Ringe. Alles klar, jetzt funktioniert das. Wird zu etwas Styling übergehen und die Suchfunktionen tatsächlich intelligenter machen, indem Sie ein A p I verbinden und einige Daten für diese gesamte Anwendung abrufen 32. Styling mit CSS: Lassen Sie uns diese Anwendung gut aussehen, also fügen wir dem yep einige CSS-Styling hinzu, gehen Sie zurück zum Index Punkt HTM. Oh, und zuerst werden wir Boot-Shop hinzufügen, eine sehr beliebte CSS-Bibliothek für jeden zu verwenden, die von Anfang an eine Reihe von stilistischen Verbesserungen geben wird. Wir benötigen einen Link des Stylesheet-Typs, der auf das Online-CSS verweist, das für Bootstrap eingereicht wurde. So navigieren Sie zu Ihnen, die ersten Schritte auf Bootstrap dot com. So bekommen Bush f dot com solche ersten Schritte und Sie finden einen Link zu den Online-neuesten in Männern zusammengestellt. Wenn ich CSS fop gut, kopieren Sie diesen Link und geben Sie ihn einfach in den Kopf Ihrer Indexpunkt-HTML-Komponente ein. Also nehmen Sie diesen Kommentar heraus. Stellen Sie sicher, dass es sich um eine Zeile handelt. Dann, wie wir speichern, sollten Sie sehen, dass Ihre Segeln in der Anwendung aktualisiert werden. Geben Sie uns diesen alternativen Fonds , der sehr nett für uns ist. Cool. Mit diesem Bootstrap-Link wird unsere Benutzeroberfläche wegen der Bootstrap-Stylings, die wir immer noch bei ihren eigenen benutzerdefinierten Stylings wollen, viel sauberer aussehen lassen. darüber hinaus Erstellen Siedarüber hinauseine andere Lösung, Klink und verwies auf eine Indexpunkt-CSS-Datei im aktuellen Verzeichnis. Plötzliche neue Verbindung Wer ist Rela Stil? Sie in der h ref wird im aktuellen Verzeichnis finden Index Punkt CSS sein. Jetzt müssen wir die Indexpunkt-CSS-Datei machen Sie den Index Punkt CSS innerhalb unseres Build-Ordners im ersten Stil wird insgesamt sein, Globalstar sagen Punkt global gut ausgerichtet alles in der Mitte für den Text. Wir geben ihm auch etwas Polsterung. Auf diese Weise berührt es nicht die Kanten. Jetzt innerhalb der globalen Herzogin, müssen wir eine Klausel Namen hinzufügen, die insgesamt div und setzen Sie es auf Global. Also gehen Sie zurück zu globalen dodgy s Das wird unserem Gesamtdiv den Klassennamen gleich global geben . Und da wir den Boom als Nachladen speichern, beachten Sie, dass die Dinge die Kanten nicht mehr berühren. Und unser Titel ist jetzt in der Mitte bemerken, dass wir nicht ein Klassenschlüsselwort wie alle HTML-Dateien verwenden , weil Klassen bereits Schlüsselwort in JavaScript reserviert. So reagieren ermöglicht es uns, Klassen ohne Interferenz mit dem Klassenschlüsselwort von Javascript zu spezifizieren , indem die Klassen- und Namensattribute verwendet werden. Alles klar, lassen Sie uns weiter diese Anwendung anschließen, indem Sie die Google-Bücher ein P I zu unserer Suchmethode hinzufügen und tatsächlich einige Daten abrufen 33. Bücher filzen: für Buch Explorer wird die Vorteile von Googles kostenloses Buch A P I, das war eine riesige Sammlung von Büchern und Buchinformationen, die wir mit einfachen Suchanfragen zugreifen können . Hier ist die A P I, die wir verwenden werden, und seine Dokumentation war an dieser Funktion interessiert , die es uns ermöglicht, Volltextsuche durchzuführen und Buchinformationen abzurufen. Als nächstes, Hier ist ein Beispiel für den tatsächlichen Endpunkt, den wir treffen werden. Es gibt ein großes Jason-Format mit der Art von Buch, das die Elemente recherchiert, die in einer Reihe von Beschreibungen basierend auf jedem einzelnen Buch wurden. Schön. In Ordnung. Jetzt kommen wir tatsächlich zum Code-Kopf zurück zur Forschungshelferfunktion. Und zuerst werden wir eine neue Konstante klären, die unsere Basis sein wird. Du warst draußen. Sagen Sie, const Basis Sie sind l gleich einer leeren Zeichenfolge. Für jetzt, fangen wir an, den Link fertig zu stellen. Also zuerst ist es eine HTTP-Ressource, Http, in einer sicheren. So s Golin Schrägstrich Wir werden die eigentliche Website zu bekommen, die Google ap Augen ist. Wir finden die Buch-Ressource. Wir verwenden die erste Versionsnummer. Wir schauen uns Bände an. Fragezeichen beginnt eine Abfrage und Q equals ermöglicht es uns, eine Abfrage zu spezifizieren. Also noch einmal ist es https. Google FBI Punkt com Schrägstrich Bücher Schrägstrich b ein Schrägstrich Bände Alles klar, jetzt müssen wir die Daten von einer bestimmten Suche auf dieser Basis holen. Du warst draußen und hast bemerkt, dass ich das Wort „Fetch“ benutze. Sie vermuten, es wurde verwendet A holen ein p, den ich auf dem Temperaturring holen werde, der Luftwaffenbasis hier kombiniert . L und die Abfrage, die der Benutzer gibt einen Abruf auf der Template-Zeichenfolge mit unserer Basis hinzufügen, Sie Earl fügen diesen aktuellen Status der Abfrage Jetzt müssen wir einfach angeben, dass dies eine get-http-Methode sein wird . Also werden wir sagen, seine Methode ist genial zu werden. Denken Sie daran, wir verbrauchen das Versprechen mit einer damaligen Aussage. Also, dann Antwort. Wir werden die Antwort zurückgeben, dass Jason, weil wir an der Antwort interessiert sind, dass Jason und dann werden wir dieses Versprechen mit einem anderen verbrauchen . Also dann, Jason und vorerst, aber einfach vertraute protokollieren, wie Jason aussieht. Lassen Sie uns fortfahren und unsere Anwendungsaktualisierungen speichern. Lassen Sie uns eine Suche nach Harry Potter geben und sehen, ob wir Jason und Awesome bekommen Wir haben ein riesiges Objekt. Und genau das sah unser derzeitiges Beispiel, das wir früher gesehen haben, wie dieses riesige Objekt. Wir haben es jetzt in unserem Konsul. Fantastisch. Nun lassen Sie uns diese Buchelemente verwenden, die wir in unserem Programm bekommen, um unsere Benutzeroberfläche tatsächlich zu aktualisieren . 34. Eine Gallery hinzufügen und Requisite einfügen: Um unsere Liste der Buchelemente darzustellen, lassen Sie uns eine Galerie-Komponente erstellen, die alle geholten Buchelemente hostet. Zunächst einmal, genau wie der Benutzer einen Status der Abfrage mit der Eingabe aktualisiert. Lassen Sie uns etwas aktualisieren, um neue Daten innerhalb unserer Anwendung am Schlüssel eines Elements zum Zustandsobjekt zu reflektieren und es auf ein leeres Array zu setzen . Nun, sagen Artikel, ist ein leeres Array, das als nächstes innerhalb des Jason Handlers geteilt wird. Lassen Sie uns die Elemente Schlüssel aus diesem Jason und Zuweisungen sogar Elemente Variable greifen. Beachten Sie, dass wir die Strukturierungszuweisung für Objekte verwenden, um die Elementvariable direkt dem Elementschlüssel in Jason zuzuweisen . Dann verwenden wir die Strukturierungszuweisung erneut, um den Status ihres Items Arrays auf dieses Element zu setzen . Variabel. Lassen Sie uns einen Codeblock erstellen. Nun, lassen Sie die Elemente innerhalb der Strukturierungsaufträge Jason gleich. Dann verwenden wir eine Kurzschrift Strukturierung Zuordnung auf Objekte in der Steuer zu setzen Elemente, Zehe Elemente innerhalb unseres Staates. , da Nun, dawir uns um die Aktualisierung des Status auf unsere abgerufenen Elemente gekümmert haben, lassen Sie uns eine Galerie-Komponente zu unserer Anwendung hinzufügen, die das Rendern dieser Elemente verarbeitet erstellt eine neue Datei im Komponenten-Ordner namens Galeriepunkt Ja, seine Komponenten neue Dateigalerie dot jess jetzt innerhalb Gallery Duchy s wird es als eine reagierende Komponente einrichten . Also Import React-Komponente von React, die in dieser Klassengalerie angegeben ist, erweitert die Komponente um all das Zeug von React für das Rendern zu holen, das einen grundlegenden Unterschied rendert und zurückgibt . Nun, das sagt einfach Galerie-Komponente. Also Galerie-Komponente. Vergessen Sie nicht, standardmäßig zu exportieren. Die Galerie Groß. Jetzt ist es eine wichtige Galerie innerhalb unserer globalen Komponente und damit sie direkt neben unserem Suchfeld angezeigt wird . Importieren Sie also Galerie aus der Galerie in Global Dodges, wobei Sie feststellen, dass dies Gallery Dodge sein sollte, so lassen Sie uns einfach voran gehen und den Namen lesen, den die Galerie berührt. Wahrscheinlich habt ihr diesen Fehler erwischt. Ich werde das hier reinziehen, um die Mappe zu holen. In Ordnung, jetzt, wo du dich darum gekümmert hast, scheint es, als würden die Galerien funktionieren. Wir gehen jetzt in die Galerie-Komponente neben unserem Suchfeld. Also direkt nach der Suche bei einem einfachen Anruf in der Galerie nie gehen. Wir sehen vorerst eine grundlegende Galeriekomponente. In Ordnung. Nun muss unsere Galerie-Komponente über diese Abrufbuchelemente wissen. Wir möchten jedoch nicht unsere Suchfunktion auch zur Galerie hinzufügen. Also, wie bekommen wir diese untergeordnete Komponente unserer globalen, um ihren Zustand zu erkennen und Gegenstände zu halten? Nun, hier kommt Requisiten ins Spiel. In reagieren. Requisiten ist dem Zustand sehr ähnlich, bezieht sich aber auf den Elternzustand und nicht auf den lokalen Zustand der Anwendung Komponenten erhalten Requisiten von Paarkomponenten, übergeben sie durch Attribute, so dass wir angeben können, dass die Requisite eines Artikels an unsere -Galerie-Komponente mit dem Wert dieses Punkt-Zustands-Punkt-Elemente. Also in der Galerie, sagen wir, es hat keine Elemente Attribute, die diesem entsprechen, dass ST-Punkt-Elemente Jetzt innerhalb der Galerie können wir erkennen, dass ich eine Rate war und eine Rendering-Logik einrichten, um das Aussehen neuer Bücher zu behandeln , da wir sie durch unsere Requisiten kriegen. Gehen Sie also zurück zur Renderfunktion. Lassen Sie uns einige Logik hinzufügen, die Mapping über unter Ray behandelt, so dass wir einfach die relevante Anzahl von JSX-Komponenten erstellen können . Egal, wie viele wir erhalten, wird über jedes Element Karte. Innerhalb dieses Stopps Requisiten Elemente ein Element nach dem anderen. Es ist genau hier. Lassen Sie uns einen neuen Stand hinzufügen, einen kleinen Block Code. Lassen Sie uns es auf diese Zeilen bringen, um es schön zu formatieren. Dann werden wir sagen, dass diese Punkt Requisiten, die Artikel dot net ein Element nach dem anderen. Sie bemerken, dass bei einem Suchaufruf jedes Buchobjekt innerhalb der Elemente ein Volumen in Foky haben wird. Die Volumeninfo enthält eine Reihe von nützlichen Daten, aber wir wollen insbesondere den Titel. Für den Moment verwenden wir die Strukturierung Zuweisung, um den Titel aus Band Info zu holen. Also lassen Sie Titel gleich Punkt Punkt Volumen Info, und dies wird unseren Titel greifen. Dann werden wir es zurückgeben, wenn das nur den Titel jedes dieser Bücher anzeigt. Also lassen Sie uns ein div zurückgeben, das Titel sagt, und stellen Sie sicher, dass Rückgabe Schlüsselwort nicht zu vergessen. Es ist ein Fehler, dies zu vergessen, was Fehler in ihrer Anwendung einführen wird. Wenn wir es weggelassen haben Großartig. Lassen Sie uns voran gehen und speichern und eine neue Suche durchführen. Es ist also wie ein Paar. du Potter könntest nachsehen, was du willst Aberdu Potter könntest nachsehen, was du willst, und boom, da geht's. Wir erhalten eine Liste von Gegenständen. Werfen Sie nun einen Blick auf unsere Konsul Warnung, dass jeder Artikel in unserer Rate eine deutliche Keep Eigenschaft in Reaktion benötigt . Dies ist, um Geschwisterkomponenten voneinander zu unterscheiden. Glücklicherweise kommt die Map-Funktion mit einem optionalen zweiten Parameter, der den Index jedes untergeordneten Elements innerhalb der Map-Funktion verfolgt . Also reformieren Sie sie diese Funktion, um diesen zweiten Parameter einzuschließen, und wir nennen ihn Index und geben an, dass jeder dieser Dips den Titel hat eine Schlüsselattribute , die auf diesen Index gesetzt sind. Also wieder, bei einem zweiten Parameter des Indexes, wird der Schlüssel für dieses Div Index sein. Wenn wir sparen, müssen wir eine weitere Suche durchführen. Wie wär's mit dem Herrn der Ringe und dem Boom? Sind Warnung verschwindet jetzt, dass jeder eine Schlüsselindexeigenschaft hat. In Ordnung, wir haben eine wirklich coole Liste, aber lassen Sie uns es viel besser und interaktiv aussehen, indem Sie Mawr der Daten in Volumeninformationen nutzen , um noch detailliertere Galerieobjekte zu erstellen. 35. Gallery: Lassen Sie uns unsere Galerie-Komponente besser aussehen, indem Sie mehr Daten aus der Eigenschaft volume info verwenden. Zuerst nutzen wir die Bild-Links, die die Volumeninformationen für uns zur Verfügung stellen, und später überführen wir diesen Sprung in eine klickbare Komponente, die uns zur Startseite für jedes Buch sendet . Lassen Sie uns Bild-Links und Info-Links zu Punkt Punkt Volume Info zusammen mit Titel, so dass wir greifen oder Bild Links und unsere Info-Link von Artikel Punkt Punkt Volume Info. In Ordnung. Nun ändern wir unser Dip so, dass es das Miniaturbild für jedes Buch enthält, und die Miniaturansicht ist ein Schlüssel innerhalb von Bild-Links innerhalb des DIV. Fügen Sie ein Bild von rechts über dem Text und wird angeben, dass Quelle Bild Links Punkt Thumbnail über dem Titel an einem Bild mit einem Selbst in schließenden Tag, dessen Quelle Bild Links Punkt aus Gefängnis sein wird . Dann lassen Sie uns alle Eigenschaften geben, die alle Bilder benötigen, und wir werden nur Buchbild sagen. Jetzt müssen wir einen kleinen Scheck und Bild-Links machen Einige Bücher auf der Google Books AP. Ich habe noch keine Bilder oder Miniaturansichten, daher werden Bildlinks als undefiniert zurückgegeben. Wir müssen darauf überprüfen, denn wenn wir versuchen, ein undefiniertes Bild zu rendern, unsere Anwendung das Elements-Array nicht festlegen und unsere Suche aktualisieren. Was wir jedoch tun können , ist, jedes undefinierte Bild wie das Ault zu umgehen. So zeigt es nur ein Buch. Also lassen Sie uns ewig Ausdruck hinzufügen , der im Grunde eine verkürzte if else Aussage ist, um sicherzustellen, dass wir etwas für Bild wie so sagen wir, sein Bild Links undefiniert. Und lasst uns dies zuerst richtig formatieren, so dass sein Bild nicht gleich undefined ist. Und wenn es nicht definiert ist, werden wir die Miniaturansicht rendern. Aber wenn es nicht definiert ist, wird eine leere Stärke machen. Also zuerst überprüft es nach dieser Bedingung. Wenn es auf True ausgewertet wird, gehen wir zur ersten Bedingung. Wenn nicht, gehen wir zu der zweiten Bedingung, die nach dem Doppelpunkt angegeben ist. Jetzt, wenn wir sparen, gehen wir weiter und schauen uns das an. Gehen wir weiter und suchen Herr der Ringe und in der Tat, wir bekommen eine Reihe von Bildern. Sie sind einfach nicht Format und schön noch, so lassen Sie uns von Game of Thrones aussehen, weil ich weiß, dass eines der Bücher für sie sicherlich noch kein Bild hat und gesehen hat, dass wir Buchbild bekommen, wenn Bild unr eingegeben wird. nun Anstelle dieser Buchbildeigenschaft können wirnunein alternatives Bild angeben. Gehen Sie und suchen Sie ein Foto fehlt Foto oder Symbol, das Sie möchten. Dann erhalten wir in einem Rendermethoden der Variablen angeben. Das besagt, dass Alternate gleich dem Bild ist, das Sie online gehostet haben. Wir werden die Alternative anstelle einer leeren Zeichenfolge angeben. Auf diese Weise zeigen wir immer ein Foto, unabhängig vom aktuellen Zustand der Google Books, ein P I für dieses Bild. Also noch einmal, wenn ich jetzt Game of Thrones mache, Boom, bekommen wir ein riesiges alternatives Foto. In Ordnung. Nun, wenn wir eine Suche machen, bekommen wir sicherlich Bilder. Aber wir wollen definitiv etwas Styling hinzufügen, um dies schön aussehen zu lassen. zunächst Lassen Sie unszunächsteinen Klassennamen zum Überrelativen, dem Bild und dem Titel hinzufügen . Dave Komponenten. Also nennen wir die gesamte Div Buch Klasse Name ist Buch. Die Titelkomponente wird ein div sein, das jetzt Buchtext sagt. Es ist ein Klassenname ist Buchtext und dann wird unser Bild einen Klassennamen des Buchbildes haben. Der Klassenname ist Book Dash. Ich bin G und genial. Jetzt müssen wir in die Stylings für diese Komponenten eintauchen, und es gibt einiges von ihnen. Mit CSS. Es könnte mehr als ein paar Änderungen dauern, um Ihre Schnittstelle genau richtig aussehen zu lassen. Aber es ist alles wert, am Ende, bei einer neuen Galerie-Stil-Komponente, um uns zu sagen, dass wir ändern, die Galerie verkauft. Lassen Sie uns das Buch verkaufen, Buch, Bild und Buchtitel, so Köpfe Index Punkt CSS. Wir geben an, dass wir einige Galerie-Stile ändern werden, nur so dass unser CSS gut getrennt ist . Zuerst für unser Buch, fügen wir eine Anzeige hinzu, um es in Linienblock zu machen, aber um sie nebeneinander zu machen, aber nicht übereinander. Wir geben ihm eine mit 220 Pixeln, die groß genug ist, um gesehen zu werden, aber nicht klein genug, wo es nicht zu sehen ist. Ich würde ihm einen Rand von 10 Pixeln geben, so dass sie sich nicht berühren. Wir geben ihm eine Textillinie von links. Wir machen den Cursor Zeiger. also darüber schweben, sieht es so Wenn Siealso darüber schweben, sieht es soaus, als wäre es anklickbar. Position wird dann relativ zu den anderen Büchern direkt daneben sein. Jetzt im Buchbild sieht es ähnlich aus. Wir haben eine mit 220 Pixeln sowie eine Höhe von 220 Pixeln. Wir geben ihm jetzt eine Grenze von vier Pixeln solid 000, die schwarz sein wird, ein Rahmenradius von vier Pixeln, um die Kanten und die Ecken Objekt passen der Abdeckung zu runden. Stellen Sie sicher, dass die Bilder als Hintergrundbilder gut aussehen. Wir geben ihm eine absolute Position, so dass es direkt auf unserer Buchkomponente rendert. Alles klar, letzter Buchtext. Nun, das sieht ziemlich cool aus. Wir geben ihm eine Hintergrundfarbe von Schwarz, was ihm ein Overlay-Feld geben würde. Wir geben ihm eine Farbe von weiß F F F F. Es ist die Deckkraft 7,5, so dass es ein wenig verblasst über dem Bild, mit dem es ist, wird 214 Pixel sein, und gleich danach geben wir ihm einen Rand links von drei Pixeln. So geht es nicht über die Grenze. Wir geben den Text online der Mitte, direkt in die Mitte des Bildes. Seine Position wird auch absolut sein, wir werden sicherstellen, dass Textillinie korrekt geschrieben ist. Nichts über Editoren ist, dass, wenn Sie einen Fehler mit Tippfehlern machen, es sagt Ihnen in der Regel sofort der Boden Null Schritt Weg geht den ganzen Weg bis zum Ende unserer Bildkomponente. Seine Polsterung beträgt 10 Pixel. In Ordnung, also laden Sie wieder. Lassen Sie uns versuchen, die Änderungen zu überprüfen. Suchen Sie Harry Potter oder was Sie wollen und boom, wir bekommen sehr nette Dave. Der Punkt wird noch nicht angezeigt, weil ich eigentlich Pointer sagen muss. Also lassen Sie uns erneut laden. Wieder Suche nach Harry Potter. Bumm! Wir bekommen einen schönen Cursorzeiger, und im Moment klickt er noch nichts. Also, jetzt, da wir all diese schön aussehen, lassen Sie uns das letzte bisschen Funktionalität hinzufügen, die uns auf die Homepage für jedes dieser Bücher führt . Gehen Sie also zurück zu Gallery dot Js wird das allgemeine div in ein Anker-Tag ändern, um dies in ein zu ändern , also was wir jetzt tun können, ist mit diesem Anker-Tag, eine Entwurfs-Eigenschaft einrichten, die auf den Info-Link gesetzt ist, dass wir ihm ein Ziel von leer geben könnten, so und navigiert zu einer neuen Seite, anstatt uns aus unserer Anwendung zu nehmen. Lass uns gehen und speichern, ist es neu laden? Durchsuche Harry Potter noch einmal. Was auch immer Sie zuletzt suchen und Boom, es wird uns auf Neue Seite bringen, die unsere Homepage für das eigentliche Buch sein wird. Ich habe nicht genial eine komplette Reakt-Anwendung neu erstellt und bekam einen Vorgeschmack auf Essex, in der Tat auf der Branchenebene. Ausgezeichnete Arbeit. Ich hoffe, er hatte Spaß beim Erstellen dieser Anwendung. Es gibt einen Challenge Teil in der Abschnittsübersicht für den Fall, dass Sie dies erweitern und weiter erkunden möchten . Reagieren. Außerdem ist es erwähnenswert, dass ich nicht den ganzen Kurs gewidmet habe, um zu reagieren. Ja, ebenso wie Redux. Wenn Sie dieses Framework zu Ihrem Skill Set hinzufügen und es tiefer verstehen möchten, ist es wirklich gefragt. Daher empfehle ich diesen Kurs sehr. Ich habe einen Rabatt-Link für jeden in diesem Kurs, und Sie können, dass in der Abschnittsübersicht mit, dass wieder gesagt, große Arbeit und lassen Sie uns Beschichtung