*UPDATED* JavaScript Complete Series 2023 – Teil 10: Arrays und Schleifen

1. Kurseinstieg – Arrays: Willkommensfähigkeit, sagen die Schüler zu einer anderen Klasse. Und diese Klasse ist super, super aufregend. Wenn Sie mir auf meinen anderen Vorlesungen und anderen Klassen folgen, großartig, wenn nicht weniger, Telefon. Diese Klausel ist fast eine eigenständige Klasse. Sie können es isoliert betrachten. Aber natürlich empfehle ich Ihnen immer, die gesamte Serie durchzugehen weil wir viel abgedeckt haben, wenn es um JavaScript geht. Jetzt ist das das Wichtigste, was Sie verstehen müssen. Wenn es um die Programmierung geht. Was ist das? Mit was arbeiten Sie als Programmierer? Es ist nur Tochter, wenn wir mit Punkten arbeiten und wir bekommen verschiedene Arten von Daten. Und das ist, warum eine der vorherigen Klassen, haben wir viel darüber gesprochen und wir entdeckten, dass bei der Programmierung in JavaScript, Tochter kann in zwei Typen unterteilt werden. Sie haben grundlegende Arten von Daten oder primitive. Und er hat komplexe Datentypen, aka Objekte, wenn es um JavaScript geht. Und Arrays passen in die komplexe Art der Tochterkategorie. Und wie Sie in der Vorlesung sehen werden, sind Arrays tatsächlich eine Art von Objekt in JavaScript. Also kollidieren, was sind Arrays und warum brauchen wir sie? Wir werden, wann immer Sie eine Sammlung von Tochter speichern möchten, verwenden Sie normalerweise Arrays. Denken Sie daran, dass wir bereits Variablen gesehen haben, aber Variablen können in der Regel nur einen Wert enthalten. Arrays können eine Sammlung von Werten enthalten. Und das ist sehr nützlich für uns beim Bau von Betten. Was sind einige Beispiele? Nun, wenn er hatte eine Shopping-Websites und Menschen fügen Elemente heute, gefangen alle diese Elemente, die auf den Code zu bearbeiten, wie installieren wir sie? Vote mit einem Array installiert. Was ist, wenn Sie das Backend für einen Admin-Benutzer erstellen? Ziehen Sie alle Mitglieder Ihrer Website können in einem Array gespeichert werden. Es gibt viele, viele Beispiele und ich bin sicher, dass Sie sehen können, und es ist sehr, sehr wichtig zu meistern. Und darum geht es in dieser Klasse, Arrays und Schleifen. Und wir sprechen nicht nur über Arrays, sondern betrachten auch Beispiele. Wir schauen uns an, welche Methoden JavaScript uns auf Arrays direkt aus der Box gibt. Methoden fehlen Push, Pop, Scheibe, cetera, et cetera, innerhalb des Gates. Ein wenig fortgeschrittener, diskutierten wir die verschiedenen Arten von Methoden würden auf Arrays bekommen. Black Mutator Methoden Push zum Beispiel, ist eine Mutator-Methode, Strahlen Accessor Methoden. Slice zum Beispiel ist eine Accessor-Methode. Und dann erhalten wir Iterator-Methoden. Und die Kartenfunktion ist ein Beispiel für eine iterative Methode und eine verstandene Kategorie. Diese iterativen Methoden, das ist extrem wichtig weil dies uns erlaubt, durch die Rasse Schleife. Und wie ich bin sicher, Sie sehen können, wenn wir eine Sammlung von Daten haben wird sehr wichtig für uns, durch diese Arrays Schleife. Was ist, wenn Sie auf einer Website sind und Sie nach Preis sortieren oder nach dem angegebenen Datum sortieren möchten. Sie können sagen, wie wichtig es für unseren Code ist, unsere gesamte Sammlung durchzusehen, die sie durchsucht hat. Dies ist übrigens nur ein Beispiel, aber Sie können sehen, wie wichtig es ist, Schleifen zu diskutieren. Und das ist auch, was wir in dieser tollen Klausel tun. Wir diskutierten Loops und wir diskutierten die traditionelle for-Schleife, die die meisten von uns bereits kennen. Aber mach dir keine Sorgen, wenn du die for-in-Schleife nicht besprechst. Und dann diskutieren wir meine Meinung viel Bieter Schleife. Und das ist die for-of-Schleife. Also wirklich diese Klasse ist voll von nützlichen Informationen. Ich kann wirklich nicht warten. Und bitte bleiben Sie bei mir. Grander-Kaffee. Gregory Bull, was auch immer dich anmacht. Und wir sehen uns in McCloskey, adios amigos. 2. Was ist ein Array?: Wir haben einen langen Weg zurückgelegt. Wir haben über Objekte gelernt und wie werden wir anfangen, mehr und mehr fortgeschritten zu werden? Sie werden Arrays verstehen müssen, wenn Sie zur Programmierung kommen. Und ich denke gerne an ein Array ist eine Variable, die mehrere Werte in speichert. Ich möchte das Wort mehrere Werte betonen. Wir werden in Kürze sehen, was ich mit mehreren Werten meine. Aber bevor wir es tun, wie identifizieren wir ein Array? Ein Objekt kann immer durch die geschweiften Klammern identifiziert werden, Arrays, die eng mit ihm verwandt sind. Und Sie können ein Array mit eckigen Klammern identifizieren. Und einen Schritt zurück. Denken Sie daran, als wir Datentypen in JavaScript diskutierten, die beiden Tochtertypen, diese primitiven, die nur ein schickes Wort für einfache Dinge wie Strings, Zahlen, boolesche Werte, null, undefiniert und sogar zusammenstellen. Dies sind alle einfachen Datentypen. Aber dann haben wir auch das Objekt, das komplexe Datentypen ist. Obwohl alles in JavaScript ziemlich in Objekten um uns willen ist, ist es immer schön, es zu brechen und zu gehen, okay, cool. Wir haben Objekte, die wir kennen. Wir haben auch Arrays und wir haben auch eine andere Funktion. Und das sind die zweite Art von Datentypen in JavaScript. Ok, so dass beiseite und Sie Art von wissen, löschen Sie Essen in eine Tochter Art von JavaScript. Aber sie sind nur eine besondere Art von Objekt. Und ich werde dir das beweisen. Schauen wir uns mal an. Ein Array ist nur ein Objekt. Und denken Sie daran, wie er sagte, um ein Array zu identifizieren oder ein Array zu erstellen, müssen Sie eckige Klammern haben. Objekte sind geschweifte Klammern. Liste finden Sie ein Array, lassen Sie eine gleiche offene und geschlossene eckige Klammern. Das war's. Wir haben Moräne erschaffen. Und um Ihnen zu zeigen, dass dieses Array tatsächlich ein Objekt ist, können wir einfach den Typ eines begierigen zu einem Objekt gehen. Und denken Sie daran, ein Array wie eine Variable zu speichern, die mehrere Werte speichern kann. Nun, wie arbeiten wir mit Datenblöcken? Nehmen wir zum Beispiel ein sehr einfaches Szenario. Nehmen wir an, wir haben die Nummern 1357. Wie halten wir das ab? Können wir es einfach als Schnur speichern? Nun, ich schätze, wir können es einfach ausschreiben. 1357. Das ist einfach peinlich. Was ist, wenn wir die Zahlen addieren wollten? Was ist, wenn wir nur die fünf extrahieren und die 137 verlassen wollen? Wir können das nicht wirklich mit Saiten machen, oder? Es ist peinlich. Halterungen, sehr schwierig. Bilder zeigen Ihnen jetzt ein kurzes Beispiel für die Arbeit mit Zahlen in einem Array. Wie speichern wir Zahlen auf die beste Art und Weise? Weil Saiten peinlich sind. Definieren wir also ein Array und nennen wir es Nummern. Aus Mangel an einem besseren Wort. Und unsere Zahlen sind 1357. Wie wir ein Array namens Zahlen erstellt haben. Lässt es, so einfach ist es. Und wenn wir Log-up-Nummern trösten und wir öffnen sie, und Sie können wirklich sehen, dass die Konsole uns an den vier Elementen in diesem Array sagt. Wir können es öffnen und sehen, das ist ein paar Dinge, die hier erwähnenswert sind. Eines davon ist, dass dieses Array eine magische Längeneigenschaft hat. Woher kommen sie? Wir werden es in Kürze sehen, keine Sorge. Zweitens, was erwähnenswert ist, dass die Schlüsselwertpaare hier, diese Schlüssel die Zahl 0, y gestartet haben. Ist das alles, was Sie über die Wortzahlen denken müssen, die wir als Referenz auf einen Speicherort erstellt haben . Und wenn wir Nummern 0 eingeben, verweisen alle Schulden, die versuchen zu tun, auf einen Speicherort im Speicher, der x Elemente vom Bezugspunkt entfernt ist. Ja, wir haben gesehen, dass der Bezugspunkt 0 ist. Es nimmt also die allerersten Elementsuche im Speicher. Auf diese Weise wird der Index, diese Zahlen 0123, diese werden als Offset verwendet. Und in unserem Beispiel das allererste Element im Array, die Nummer eins, mit einem Schlüssel von 0. Es ist x Elemente von seinem Bezugspunkt entfernt, weshalb, wenn wir Zahlen eingeben, es uns eine geben sollte, weil wir buchstäblich auf den gleichen Speicherort zeigen . Die Daten, die in gespeichert sind. Hoffe, es macht Flecken wird beginnen, viel mehr Beispiele dafür später zu sehen. Lass uns weitermachen. Also haben wir gerade gesehen, dass Arrays Datenstrukturen sind, die mehrere Werte angenommen haben. Arrays haben keine Schlüsselwertpaare. Sie haben einzelne Daten. Aber was cool ist, ist, dass Arrays Objekte sind. So können sie auch Objekte enthalten. Und wir haben gesehen, dass Arrays eine besondere Art von Objekt sind. Aber ein Unterschied besteht darin, dass Arrays eine magische Längeneigenschaft haben. Der erste Wert im Array wird unter dem Schlüssel 0 gespeichert. Und denken Sie daran, wenn wir uns das JavaScript-Objektmodell ansehen, in dem die ECMO-Skripts-Spezifikation ein Objekt definiert, ist nur eine Referenz, nur ein Wörterbuch, in dem Sie die Schlüssel haben und diese Schlüssel auf eine Eigenschaft Attribute verweisen. Nun, es ist das gleiche mit Arrays. Lassen Sie mich Ihnen ein Beispiel zeigen. Schauen wir uns das Array-Modell an. Wie behandelt die Engine ein Array? Woher kommt diese Längeneigenschaft? Nun, lassen Sie uns ein Array definieren, das nur einen Wert enthält, und dieser Wert ist der Buchstabe a also haben wir ein Array, die Strahlen genannt Liter. Es hat zwei Eigenschaften, eine Länge, und es hat einen Schlüssel, und der Schlüssel beginnt bei 0, und sie zeigen auf Eigenschaftenattribute. Die length -Eigenschaft hat den Wert eins, aber es ist unzählige und konfigurierbare Eigenschaften oder versucht, false, weil dies in JavaScript integriert ist. Wir dürfen den Surround nicht verpassen und ihn neu konfigurieren. Der Schlüssel von 0 Punkte auf den Wert a und dass alle die Standard-wahren Veranstaltungsorte Leads haben nehmen unser Array und lassen Sie uns b in es schieben. Was passiert in? Nun, jetzt wirst du einen zusätzlichen Schlüssel haben. Du wirst einen haben. Dieser zeigt auf einen Wert b. Und die Länge und den Schlüssel von 0, genau die gleichen Dinge wie zuvor. Ich hoffe, dass dies für Sie intuitiver wird. Mach dir keine Sorgen. Ich weiß, dass das ein bisschen theoretisch ist, weil das das, was die Engine ist und das ist, was die Arrays und Objekte im Hintergrund tun. Viele Leute verstehen das nicht, aber es wird Ihnen helfen. Also lasst uns weitermachen. Lassen Sie mich Ihnen einige weitere Beispiele zeigen. 3. Wie erstellen wir ein Array?: Und genau wie bei Objekten sind sie nicht nur eine Möglichkeit, ein Array zu erstellen, sondern im Allgemeinen haben wir uns nur zwei Möglichkeiten angesehen, ein Array zu erstellen. Wir betrachten ein Array-Literal, und das verwendet nur öffnende und schließende eckige Klammern. Und die zweite Möglichkeit besteht darin, einen Array-Konstruktor zu verwenden. Und ja, wir werden auch das neue Keyword Day verwenden. Werfen wir einen Blick auf ein paar Beispiele. Gibt es einen besseren Weg, um dann zu lernen? Beispiele? Lassen Sie uns also anfangen, die verschiedenen Möglichkeiten zu betrachten, Arrays zu erstellen. Lassen Sie uns zuerst das Array-Literal verwenden, und dies ist der einfachste Weg, um ein Array zu erstellen. Und das einfachste Array ist ein, ein für Array. Und wenn wir Protokoll AR 2 konsolen, können Sie sehen, dass wir ein Array haben. Wie einfach ist das? Wir können auch ein Array mit Werten erstellen. Also lassen Sie uns eine Variable namens Tiere definieren, und es ist verschiedene Werte definiert, Hund, Katze und eine Maus. Und wenn wir die Konsole protokollieren, dass auf dem Screenshot und Konsolenprotokoll in diesem Fall verwenden müssen, kann ich einfach Tiere eingeben und da gehen wir. Wir haben uns mit Hund, Katze und Maus beschäftigt. Und denken Sie daran, wie wir gesagt haben, dass ein Array ein Objekt ist. Und wir gingen weiter, indem wir sagen, dass Sie sogar Objekte innerhalb eines Arrays platzieren können. Lassen Sie uns ein Beispiel dafür zeigen. Also nennen wir unsere Leute hier. Und denken Sie daran, mit einem Array müssen Sie quadratische Klammer öffnen und schließen. Und jetzt wollen wir Objekte in dieses Array einfügen. Wie definieren wir ein Objekt? Stimmt das mit geschweiften Klammern? Und sagen wir einfach, Name ist gleich eins. Und lasst uns noch einen machen. Nennen wir das hier John. Und lasst uns noch einen machen und ihr Cindy nennen. Und wenn wir Leute trösten, gehen wir hin. Sie können sehen, dass es ein Array ist, weil es in eckigen Klammern eingeschlossen ist. Und es hat diese Objekte darin. Ok, das ist Array-Literal. Lassen Sie uns jetzt Array-Konstruktor sehen. Und mit dem Array-Konstruktor müssen Sie das eingebaute Array-Objekt von JavaScript verwenden und Sie müssen es mit dem neuen Schlüsselwort aufrufen. Lassen Sie mich Ihnen zeigen, was ich meine. Also lassen Sie das Haus definieren und den Konstruktor-Editor verwenden. Jetzt müssen Sie nur die Werte in diesem Konstruktor einfügen. Nennen Sie es drei Schlafzimmer, rot, und es hat drei Badezimmer. Wenn wir dies trösten, sollten wir ein Array mit der Meinung sehen, die eckige Klammern mit diesen Orten darin schließen. Er hat Tageshaus und braucht die öffnende, schließende eckige Klammern und dann die Werte darin, so wie wir es erwarten würden. Aber die Verwendung des Array-Konstruktors kann seltsame Ergebnisse verursachen. Lassen Sie mich Ihnen ein Beispiel zeigen. Wenn Sie ein Array von Zahlen machen wollten, ist es ziemlich einfach. Und die Array-Indizes haben Zahlen 510. Und wenn wir das abmelden, würde ich erwarten, ein Array mit den Werten 510 zu sehen. Du hast es. Und das sehen wir in diesem Fall. Aber wenn wir nur wollten, dass es ein Array mit einer Zahl hat, die seltsame Ergebnisse verursacht. Schauen Sie sich das an. Nehmen wir an, wir haben ein neues Array namens Zahlen, und wir wollen nur, dass das die Nummer sieben ist. Wenn wir das einloggen, was würden Sie erwarten? Lot erwartet, im Array mit nur der Zahl sieben zu sehen. Aber in diesem Fall wird es uns tatsächlich etwas anderes geben. Es wird uns ein leeres Array mit sieben leeren Stellen geben. Ich meine, Zahlen. Und der Kopf ist, hat uns nicht gegeben, was wir erwartet haben. Also für mich neige ich nur dazu, den Array-Literalansatz zu verwenden. Es ist sehr intuitiv, sehr einfach. Wie ich schon sagte, es gibt nie einen richtigen Weg, etwas in JavaScript zu tun. Es gibt so viele verschiedene Dinge, die du tun kannst. Und je nach Situation möchten Sie vielleicht das eine oder andere verwenden. 4. Array: Das Beste ist, mit diesen Dingen ist, einfach mit Beispielen fortzufahren , denn dann fühlst du dich intuitiver um ihn herum und du beginnst dich komfortabler um dieses Konzept von Arrays zu kümmern. Also lasst uns hineingehen. Lassen Sie mich Ihnen ein praktisches Beispiel geben. Nehmen wir an, wir haben eine Einkaufsliste und wir möchten hinzufügen, wir möchten Dinge aus dem Array löschen. Wir möchten auf eine verknüpfte Eigenschaften zugreifen. Wie würden wir all diese Dinge tun? Schauen wir uns mal an. Nun, das erste, was ist, lassen Sie uns eine ShoppingList erstellen. Und in kühlerem Wasser, was Sie wollen, nennen wir es einfach Einkaufsliste. Und lasst uns einfach Notwendigkeiten machen. Mlk gezüchtet über. Wenn wir Konsole melden Sie sich dies aus. Lass mich Walker starten. Sie haben unser Array ist die multivariate b-a. Was ist, wenn wir auf Eigenschaften im Array zugreifen wollten? Nun, wir können auf diese Eigenschaften mit eckigen Klammern zugreifen. Und zunächst sagen wir, wir wollten auf MLK zugreifen. Lassen Sie uns die Konsole ShoppingList protokollieren. Öffnen Sie, schließen Sie eckige Klammern. Und denken Sie daran, wir müssen Exzesse im Gedächtnis haben. Und es wird am Ausgangspunkt sein, der 0 ist. Und das gibt uns MLK. Wenn wir über zugreifen wollten, was würden wir tun? Das, stimmt's? Wir setzen zwei, die uns b-a geben. Und mit Arrays können wir auch Werte sehr einfach überschreiben. Führt über i-Werte. Das ist X ist unsere ShoppingList. Anstelle von MLK ist es von Kirk. Nun, wenn wir Logo-Array Konsole, das MLK Woodcock ersetzt. Und was ist mit dem Zugriff auf die Längeneigenschaft? Was ist, wenn wir Elemente in dieses Array hinzufügen wollten? Wenn wir uns plötzlich erinnern, hey, ich muss auch Toilettenpapier kaufen. Oder was ist, wenn wir kein Bier mehr kaufen wollen und das loswerden wollen. Wie würden wir das machen? Nun, lassen Sie mich Ihnen etwas Eigenkapital zeigen. Lassen Sie mich einfach die Konsole öffnen und schauen Sie sich dies in bestrahlen neu erstellen. Lassen Sie uns einfach das Zahlenarray erstellen. Okay, es kann ein leeres Array sein. Wenn wir das ausloggen und dieses kleine Ding hier öffnen, und wir verlassen den Prototyp. Du hast uns gesagt, du könntest sagen, dass wir Existenz haben. Wir haben Zugriff auf die Pop-Methode und die Push-Methode. Und lassen Sie mich Ihnen Beispiele dafür geben, was vor sich geht. Jetzt gehen wir zurück zu unserer IDE. Lassen Sie uns die Längeneigenschaft Achse. Wie machen wir das? Nun, Sie werden sehen, ob wir zurück zur Konsole gehen, Sie werden hier sehen, dass wir tatsächlich eine Längeneigenschaft haben würde medizinisch auf diesem Array, auf jedem Array, das wir erstellen. Wir haben das Eigentum direkt. Wenn wir also zu unserer IDE zurückkehren, können wir darauf zugreifen, Konsolenprotokoll, Einkaufsliste und deren Zugriff auf die verknüpften Produkte entlocken . Drei, wir haben drei Artikel in RA, Es macht Sinn. Milch, Brot und Bier. Monas Fall, Cola, Brot und Bier. Lassen Sie uns nun einen Artikel zu unserer ShoppingList hinzufügen. Wie würden wir das tun? Nun, Arrays haben eine eingebaute Methode namens Push in JavaScript, und es schiebt buchstäblich ein Element auf das Array. Let's xis sind eine Einkaufsliste. Es wird eine Push-Methode darauf haben. Und Sie können sehen, dass meine IDE mir bereits sagt, dass die Vorladung ein neues Element zum Array ist, und es gibt eine neue Länge des Arrays zurück. Also lasst uns Toilettenpapier auf unser Array schieben. Nun, wenn wir diese Kunst-Shopping-Liste trösten, und da haben Sie sie wieder. Aber jetzt sagen wir, wir haben einen Fehler gemacht und wir haben genug Toilettenpapier, wir wollen das Ding heute raus. Was machen wir jetzt? Lassen Sie uns wiegen Tasse kommt hinein. Lassen Sie uns ein Element aus dem Array entfernen. Wieder. Lassen Sie uns unsere ShoppingList verlassen. Jetzt wollen wir knallen. In dieser Pop-Methode verschwendet, entfernt das letzte Element des Arrays, das in unserem Fall ist das Toilettenpapier. Und jetzt, wenn wir unsere ShoppingList ausloggen, ist Toilettenpapier nirgends zu sehen. Toll, ich hoffe, du hast Spaß, dass dieser Mörser hier aneinandersetzt, lass uns reinkommen. 5. Einführung in den Mutator iterator: Denken Sie daran, wie, wenn wir ein Array erstellen, es automatisch mit einer ganzen Menge von Eigenschaften und Methoden geliefert wurde , die es automatisch angehängt wurden. Denken Sie daran, dass wir den Pop hatten und wir mussten schieben und wir hatten die Länge. Nun, lassen Sie mich einfach sagen, dass Array-Methoden in drei große Kategorien gruppiert werden können. Und es ist sehr wichtig für Sie, zwischen ihm zu unterscheiden. Andernfalls könnten Sie Ihren Code und Ihre Tochter vermasselt haben. So ändern die drei breiten Kategorien oder Mutator, Accessor und Iteratoren, Mutatormethoden oder solche, die mutieren, das ursprüngliche Array. Seien Sie also sehr vorsichtig, wenn Sie mit Mutatormethoden arbeiten, denn das, was Sie in diesem Array tun, wirkt sich auf das ursprüngliche Array aus. Sie haben Zugriff emittiert, und sie ändern das Array nicht, mutieren das ursprüngliche Array nicht an erstellt nur eine Kopie. Und dann können Sie mit dieser Kopie arbeiten und extrahieren und mit dieser Kopie tun, wie Sie wollen. Und dann haben Sie endlich Iteratoren. Also viel Zeit mit Punkt, eigentlich wollen Sie diesen Punkt durchlaufen, bestimmte Werte extrahieren und dem Benutzer anzeigen? Das ist, wo Iteratoren ins Bild kommen. Schauen wir uns Beispiele für alle drei dieser Arten von Methoden schnell an. 6. Mutator Iterator Beispiele: Wir haben drei große Kategorien von Methoden auf Arrays. Werfen wir einen Blick auf ein Beispiel für jeden von ihnen. Also, wie wir es gerade in der Vorlesung getan haben, schauen wir uns mutierte Methoden an. Und denken Sie daran, dass diese Methoden das ursprüngliche Array ändern. Also lassen Sie uns ein Array köstliche kalte Zahlen aus Mangel an einem besseren Wort erstellen. Und lasst uns 51015 in diesem Array haben. Und lassen Sie uns die Push-Methode verwenden. Die Push-Methode ist eine mutierende Methode und es hat die Nummer 20 auf uns geschoben. Es sind Konsolenlognummern, Push. Und es sagt, hier in meiner IDE gibt mir wirklich Schärfen, die die neue Länge des Arrays zurückgeben. Und es hat die Nummer 20 dahin geschoben. Jetzt wird das Array Länge vier haben. Also nicht Konsolenprotokoll ungerade Zahlen. Es wird vier Zahlen haben, jetzt hat es das eigentliche ursprüngliche Array beeinflusst. Viel. Ein weiteres Beispiel, lassen Sie uns mit Farben arbeiten. Nehmen wir an, Originalfarben von Blau und Grün. Aber sagen wir, jemand anderes kommt und will eine Minute Farben erstellen, aber sie wollen mit diesen Farben wie der Basispunkt beginnen. Sir, sagen wir, dass das kommt. Und sie wollen den ursprünglichen Ausgangspunkt nutzen, aber sie wollen eine andere Kolonie schieben, RED. Jetzt, wenn eine Konsole original protokolliert, unerwartete nur blau und grün sehen. Und ich bin sicher, wie Sie es erraten haben, wenn ein Lagerdots tatsächlich gelesen hat. Also mit dieser Mutation, mit dieser Push-Methode wirkt sich auf die ursprüngliche Rate. Seien Sie vorsichtig damit, denn Sie könnten Originaldaten vermissen , die Sie nicht beabsichtigt hatten. Eine andere Methode ist xy eingereicht. Schauen wir uns das jetzt an. Quickie, kopieren Sie einfach diesen Appell. Würde es nochmal austippen müssen. Und als faul und böswillige Anrufer, Accessor und Exits Emitter sind nett, weil es uns erlaubt, das ursprüngliche Array nicht zu manipulieren, die eine Kopie des ursprünglichen Arrays erstellen und dann dieses Knistern manipulieren. Also schauen Sie sich mal an. Ja, lassen Sie uns ein Array von Namen definieren. Und da steht John, ALI. Und Cindy. Jetzt ist X eine Methode, die uns als Slice bekannt ist. Und slice gibt nur einen bestimmten Teil des Arrays zurück. Ich zeige dir jetzt, was ich meine. Also sagen wir einfach kopieren gleich Namen. Das ist unser ursprüngliches Array. Wir möchten auf eine Slice-Methode zugreifen. Und Sie können sehen, wie meine IDs uns bereits sagen, was die beiden Argumente sind. Der Start ist der Anfang eines bestimmten Teils des Arrays und das Ende, das angibt, wann sie wieder sind, muss enden. Also komm zurück, sagen wir, wir wollen nur Wally und Cindy zurückkehren. Wir wollten John nicht in all das einbeziehen. Hier können wir also bei eins beginnen und bei drei enden. Wenn wir das ausloggen, haben wir Wally und Cindy. Wie man em anruft. Aber ich meine, wenn unsere Konsolennamen anmelden, die Namen ihre ursprüngliche Form beibehalten, drei Personen darin zu haben. Das ist eine Accessor-Methode. Welche untere Iterator-Methode? Iterator-Methode, wie wir sehen, durchläuft es nur ein Array und ermöglicht es Ihnen, Dinge mit einem bestimmten Wert jedes Mal zu tun , wenn es durch dieses Array iteriert. Das ist ein bisschen ein Bissen voll. Aber wieder ist es viel einfacher, mit einem Beispiel zu verstehen. Lassen Sie uns hier ein Beispiel für eine Iterator-Methode geben. Und eine sehr beliebte, die Sie alle verwenden werden und wahrscheinlich sogar einen ganzen Abschnitt darauf machen, wenn nicht ein ganzer Abschnitt anders, ein oder zwei vollständige Episoden ist die Kartenmethode. Jetzt gibt es eine Menge, über die wir mit den Männern reden können. Kartenmethoden werden es nicht tun. Ja, ich werde Ihnen nur sehr kurz zeigen, wie es funktioniert und was eine Iterator-Methode bedeutet. Und lassen Sie uns eine Reihe von Tieren erschaffen. Sagen wir einfach, wir haben einen Hund und eine Katze. Ich will es nicht zu lange schaffen. Und jetzt möchte ich nur einen Iterat erstellen, einen Tieriterator. Nennen wir es einfach Tier Iterator. Und wir greifen auf unser, unser ursprüngliches Array zu und wir werden diese Kartenmethode verwenden. Ok. Und wie Sie in meiner IDE sehen können, ruft diese ausgegebene Karte eine Callback-Funktion für jedes Element eines Arrays auf. Und nach Element eines Arrays sagen wir nur den Hund und die Katze in diesem Fall, diese werden Elemente genannt. So wird eine Funktion aufgerufen, einen Hund zurückzugeben und eine Katze, et cetera, et cetera, et cetera. Mach dir keine Sorgen über Callback-Funktionen, aber wir werden später auf diese Dinge eingehen. Das erste Argument in dieser Map-Methode ist also die Callback-Funktion. Sie können sogar die MID sehen, das sagt mir. Und lassen Sie uns eine Callback-Funktion definieren, die das Element nimmt, das in unserem Fall ein Tier ist. Es ist eine Art Tiertyp. Und dann lasst uns etwas mit diesem Tiertyp machen. Also, in unserem Fall, lassen Sie uns nur Konsolenlog-Anweisung, die Template-Literale verwendet wird. Und sagen wir, ich weiß nicht, wir haben es mit einem zu tun und dann kannst du das Tier buchstäblich nehmen und sehen, was gerade passiert ist. Sie können sehen, dass die Konsole sagt, wir haben es mit einem Hund zu tun, wir haben es mit einer Katze zu tun. Das ist also, was die Kartenmethode tut. Es dauert jedes Element Ihres Arrays. Also bei der ersten Iteration, der ersten Schleife, wird es Hund nehmen. Es wird den Hund in diese Callback-Funktion bringen. Und das wird es nennen. Es wird den Hund in eine Variable namens Tiertyp setzen. Und dann machen wir einfach, was wir wollen. In diesem Fall haben wir gerade eine einfache Konsolenprotokollnachricht dieses Tiertyps erstellt. Dies wirkt sich jedoch nicht auf das ursprüngliche Array aus. Wenn ich Tiere tippe, haben wir immer noch unseren Hund und unsere Katze und nichts zu ihm. Es ist nur eine Methode, die es uns ermöglicht, durch ein Array zu iterieren. Wir haben viel durchgemacht. Wir haben viel durchgemacht. Gut gemacht. Hoffnung fängt an, Szenen zu machen. Wir sehen uns bald. 7. Warum ist der looping: Arbeit mit Tochter ist äußerst wichtig, wenn es um die Programmierung geht. Und viele Dinge, die wir im Moment getan haben, waren wie das Speichern von Daten und wir würden sie in Objekte einfügen. Wir haben Variablen definiert, wir haben Arrays erstellt. Aber was ist mit dem Zugriff auf diese Batterien? In einem, Sie können denken, wenn Sie eine Anwendung mit Tausenden von Benutzern haben, sie geben Ihnen Tochter. Aber irgendwann möchten Sie diese Daten extrahieren und anzeigen, damit sie Berechnungen durchführen können. Und das ist, dass wir Schleifen wird lebenswichtig. Und hier sprechen wir über das Durchschleifen von Objekten, aber denken Sie daran, dass ein Array tatsächlich auch ein Objekt ist. Sie können Objekte durchlaufen und Arrays durchlaufen. Aber sobald Sie ein Array haben, ein Vanille-Array und Vanille kaufen, bedeutet nur, dass Sie eine ganze Reihe von Werten haben. Sobald Sie zu diesem Punkt gekommen sind, wird es sehr einfach, es zu durchlaufen. Deshalb möchte ich mit Objekten und komplizierteren Objekten beginnen , die Sie definiert haben. Wie schleifen wir das durch? Und Sie werden sich oft in einer Situation befinden , in der Sie durch Ihr Objekt schauen möchten. Und der einzige Weg, dies vor ESX zu tun, war mit einer for-in-Schleife. Und ich zeige Ihnen in Kürze ein Beispiel für eine for-in-Schleife. Aber lassen Sie mich einfach sagen, dass es einen besseren Weg gibt und dass bessere Möglichkeiten gibt, Ihr Objekt in ein Array zu konvertieren. Und dann können Sie einfach das Array durchlaufen, da das Schleifen über ein Array jetzt sehr einfach ist. Wie können wir also unser Objekt in ein Array konvertieren? Werden sie drei sehr beliebte Methoden, Objektpunkt-Tasten, Objektpunktwerte und Objektpunkteinträge. Objektpunktschlüssel erstellt ein Array, das nur die Eigenschaftsnamen enthält, aka die Schlüssel des Objekts. Objektpunktwerte, die Sie wahrscheinlich bereits erraten haben, die ein Array erstellen, das den Wert jeder Eigenschaft innerhalb des Objekts enthält. Und Objektpunkteinträge geben Ihnen nur ein Array. Aber jetzt haben Sie dieses Mal sowohl den Schlüssel als auch den Wert. Es erstellt immer ein Array von Arrays. Aber ich werde Ihnen zeigen, was das bedeutet. Okay, also machen wir einen Schritt zurück. Wir beginnen mit einem komplizierten Objekt innerhalb des konvertierten Objekts in ein Array. Und wir können eine dieser drei Methoden verwenden, die wir gerade besprochen haben. Tun Sie das. Und jetzt können wir durch dieses Array schleifen, als wäre es ein normales Vanille-Array. Und wir tun dies mit d für, der Schleife. Die for-Schleife ist genial und es ist eine viel einfachere Möglichkeit, Elemente eines Arrays zu durchlaufen. Lassen Sie mich ein Beispiel nennen. Ich werde Ihnen nur schnell zeigen, wie diese for-Schleife funktioniert. Nehmen wir an, wir definieren eine ganze Menge von Fruchtschlüsseln. Und es ist ein Array, das eine Banane und ein Manga ist. Einfach. Was macht eine for-of-Schleife? Das schleift sich durch jede Taste. Und was ich mit Schlüssel meine, wo Ihr Schlüssel in diesem Fall in diesem Array ist Banane. Auf der zweiten Iteration wird der Netzschlüssel Manga sein. Für den const-Schlüssel wird es den Schlüssel des Arrays nehmen. Aber jetzt, ohne dass wir etwas tun, Ehrfürchtigkeit für der Schleife, woher weiß es, das Fruchtschlüssel-Array zu verwenden? Warten wir, ein zweites Argument kommt rein. Sie müssen dieses Array sagen, hey, finden Sie jeden Schlüssel des Frucht-Schlüssel-Arrays. Dann öffnen Sie diese for-OF-Schleife mit den geschweiften Klammern. Und wir können tun, was wir wollen, mit diesem Schlüssel. Weil wir in jeder Schleife wissen, dass der Schlüssel in der ersten Instanz Banane und auf der zweiten Instanz Manga sein wird. In diesem Fall wird unser einfacher Konsolenprotokollschlüssel nur Konsolenprotokoll Phänomen die erste Iteration. Und dann bei der zweiten Iteration werden wir Manga trösten. Werfen wir einen Blick auf einige weitere Beispiele jetzt. 8. Looping ein Beispiel für ein Array: Durchschleifen Tochter, um es zu extrahieren. Es ist so wichtig, wenn es um die Programmierung geht. Und ich möchte wirklich, ich möchte betonen. Also werde ich Ihnen zwei Beispiele zeigen. Der, den ich gerade durch Arrays schleifen werde, zeigt Ihnen die verschiedenen Methoden. Und dann, wie wir in der Vorlesung diskutiert haben, möchte ich tatsächlich ein Objekt mit Eigenschaften, Name-Wert-Paaren erstellen , und ich möchte das durchlaufen. Also, ohne weitere Umschweife, lasst uns hineingehen. Ich werde anfangen, mit komplizierteren Funktionen und Aufrufen und Schleifen zu schneiden. Weil wir einen langen Weg zurückgelegt haben. Und ich denke, Sie werden wirklich mit den traditionellen einfachen Objekten, Arrays und all dem vertraut . Lassen Sie uns also eine Funktion erstellen. Nehmen wir an, wir haben eine ganze Liste von Mitgliedern auf unserer Seite. Und wir wollen jedes Mitglied durchlaufen und ihnen eine Willkommensnachricht geben. Wie machen wir das? Wir werden zuerst eine Funktion erstellen und wir werden in einem völlig neuen Abschnitt Funktionen bekommen . Sie sich also noch keine Sorgen über die Syntax. Verstehen Sie einfach das Konzept. Lassen Sie uns eine Funktion mit dem Namen Hoch definieren. Und es sagte, dass die Funktion den Namen der Person annimmt. All diese Funktion ist, dass es unsere Willkommensnachricht zurückgibt. Willkommen, und wir verwenden Vorlagenliterale, Yeah, und wir werden den Namen einfach absagen. Als Nächstes. Lasst uns unsere Mitglieder finden. Und sagen wir mit was, eine ganze Liste. Und wir fangen gerade erst an. Also haben wir nur zwei Mitglieder, Tom und Jerry. Aber dann nehmen wir an, wir bekommen neue Benutzer, neue Verwendungen. John und Wally. Also hauptsächlich Listen, die John gedrängt haben. Und was die traurige und Push-Wally betrifft, sollte eine Mitgliederliste jetzt vier Mitglieder enthalten. Und das tut es. Und wir wollen alle Mitglieder begrüßen. Wie würden wir das machen? Denk dran, wie ich diese nie einen richtigen Weg betone, etwas zu tun. Und es gibt viele Möglichkeiten, dieses Array zu durchlaufen. Schauen Sie sich zuerst die traditionellen altschulischen Wege an. Die traditionelle for-Schleife und etwas, das sich daran erinnern sollte, ist, dass jede for-Schleife am Ende geschweifte Klammern hat. Und es ist irgendwie wie das, was wir im Code machen wollen, geht zwischen diesen geschweiften Klammern. Was sich unterscheidet, ist, was in den Klammern hier ist. Also für die traditionellen, also lasst uns hier mit traditionellen beginnen. Old-Schule für Schleife. Wir müssen eine Variable definieren. Und diese Variable iteriert jedes Mal, wenn die Schleife abgeschlossen ist. Damit wir das alles nennen können. Aber traditionell mochten die Leute cool es. Ich, also sagen wir, lass i gleich 0, also werde ich bei 0 beginnen. Und dann sieht der zweite Parameter in dieser for-Schleife unter welcher Bedingung wird die Schleife weiter laufen? Denn irgendwann muss die Schleife aufhören. Sonst wird es eine Endlosschleife sein. Also lassen Sie uns hier sagen, wir wollen nur, dass dies wie oft iteriert wird? Lasst uns nur vier Mal schreiben, weil sie sich umgekehrt bilden, oder? Wir müssen also kleiner sein als der Link der Mitgliederliste. Und dann ist der dritte Parameter, was mit i nach der ersten Iteration passiert. Und wir wollen um eins erhöhen. Also, wenn wir IS starten, macht die erste Schleife, wenn sie fertig ist , wird dieses Auge um eins erhöht werden. Und dann wird dieser Zustand verkostet werden. Gewohnheit macht es. Und jetzt wollte ich eine Begrüßung finden, eine besondere Begrüßung für jedes Mitglied. Sagen wir LIT Gruß. Dies ist, wo wir hohe Funktion zurückgeben wollen. Und erinnern Sie sich an die Hi-Funktion, einer seiner Eingabeparameter war der Name des Individuums. Wie heißt dieses Individuum in der ersten Schleife? Wird es symbolistisch sein. Und denken Sie daran, Eigenschaften auf Array zugreifen, können wir eine eckige Klammern verwenden. Und hier bin ich. Bei der ersten Iteration RBF-Netzwerk drehen Sie den Namen Tom. Und in allem wollen wir einführen Konsolenprotokoll. Begrüßung. Heute haben Sie es. Wir heißen Tom willkommen. Willkommen Jerry. Willkommen Jon. Willkommen Molly, wie cool ist das? Ich hoffe, Sie verstehen, was wir getan haben, aber wieder, das ist eine alte Schule for-loop. Ich zeige Ihnen einen besseren Weg, es zu tun. Aber bevor ich Ihnen den besten Weg zeige, es zu tun, lassen Sie mich Ihnen eine andere alte Schule zeigen, wo es heißt, die for-in-Schleife ist auch Old School Weg. Die for-in-Schleife. Wieder haben wir die vier und dann setzen wir diese geschweiften Klammern. Und jetzt müssen wir nur vier const Namen in der Symbolist bekommen. Diese Syntax tut, ist auf jeder Schleife es wird jedes Element in unserem Array zu bekommen. Wir haben unseren Elementnamen genannt, weil wir ihre Namen kennen, Tom, Jerry, John Wiley. Also wird es diesen Namen in unserem Objektmitglied Ernest in unserem Array greifen. Und dann traditionell, was das tut, ist, dass dies tatsächlich auf alle Prototypen-Eigenschaften zugreift. Also kann ich sehr umständlich werden und manchmal greift es auf Dinge zu, die nicht sollten. Und aus diesem Grund fügen Sie oft eine if-Anweisung in diese for-Schleife ein. Und Sie müssen nur sagen, wenn Symbolist und ist eine eingebaute Eigenschaft namens sein Eigentum. Und alles, was wir sagen müssen, als ob ein bestimmtes Array seine eigene Eigenschaft hat und das außerhalb von Prototypen ist. Dann wollen wir diesen Code ausführen. Also, jetzt haben wir diese if-Anweisung angehalten. Wir beenden den Block. Was schreiben wir? Nun, das Gleiche. Wir wollen, dass unsere Begrüßung diese hohe Funktion erfüllt. Und wir werden im Namen des Spiegels vorbeikommen. Also ist es Mitgliederliste und ja, wir haben es nicht angerufen. Ich mag, dass wir über einem Netz Old-School for-loop gemacht haben. Ja, wir haben jede Iteration definiert. Wir werden den Namen haben, der Name genannt wird. Also geben wir im Namen. Jetzt haben wir unseren Gruß und alles, was wir tun wollen, ist Konsolenprotokoll. Diese Begrüßung. Und Bob ist dein Onkel. Sie, wir gehen, Willkommen Tom, willkommen Jerry, willkommen Jon. Willkommen Molly. Aber Sie können sehen, dass diese Methoden umkreisen umständlich. Yahoo. Du musst wirklich darüber nachdenken. Sie haben eine gute Menge an Tippen. Lassen Sie mich Ihnen die for of Schleife zeigen, die genial für Of-Schleife ist. Okay, also lasst uns eine for-of-Schleife machen. Meine IDE hilft mir wieder mit diesem const Iterator des Objekts. Also ja, wir haben Namen und ich werde widersprechen ist Mitgliederliste. Und Sie werden sehen, wie viel einfacher das ist. Dies wird durch jeden Namen, jedes Element unseres Arrays, unseres Objekts Schleife . Alles, was wir jetzt tun müssen, erhalten die Bäume Gruß, die die Hi-Funktion ausführt. Und wir haben schon unseren Namen. Und dann können wir Konsolenprotokoll. Unser Gruß. Kannst du sehen, wie viel einfacher und einfacher für of loop ist? Großartig. Aber ich möchte Ihnen jetzt noch ein Beispiel zeigen, weil wir es mit einem einfachen Array zu tun haben. Ich möchte mich jetzt mit kompliziertem Objekt beschäftigen. Also lassen Sie mich dieses Video stoppen, weil es lange wird. Und im nächsten Video werden wir es mit dem Objekt zu tun und dann werden wir durch Schuldenobjekt iterieren. Wir sehen uns bald. 9. Beispiel der looping Objekte: Jetzt werden wir gehen und ein Objekt erstellen. Und wir werden diese Methoden verwenden, um das Objekt in Array zu konvertieren , das wir zuvor gesehen haben. Es gibt drei verschiedene Methoden, und dann werden wir dieses Array mit der for-Schleife durchlaufen. Mal sehen, wie es sein kann. Der erste Schritt ist, lassen Sie uns ein Objekt erstellen. Und sagen wir einfach, unser Objekt ist eine Einkaufsliste von Obst. Lasst uns unsere Frucht ein Objekt sein. Und ich werde nur die Objektliteral Syntax der Einfachheit halber verwenden. Sagen wir, wir haben 12 Bananen zu Karotten und sieben Mangos. Wii-Konsole loggen unsere Früchte aus. Da ist unser Objekt mit Bananen, Karotten und Mangos. Wie würden wir anfangen, diese Daten zu iterieren und zu durchlaufen? Nun, der erste Weg ist die Verwendung von Objektpunkttasten. Methode eins. Objektpunkt-Tasten. Lassen Sie uns unsere Schlüssel definieren, LET Frucht Schlüssel gleich. Und jetzt setzen wir die Äxte. Javascript ist eingebaute Objektmethode, Objektschlüssel. Und der Parameter, den wir in Schlüssel übergeben, das Objekt Frucht. Und wenn wir trösten, loggen Sie uns aus. Wir haben jetzt buchstäblich eine Reihe von unseren Schlüsseln, Manana, Karotten und Mangos. Und es war so einfach zu machen und es ist großartig, damit zu arbeiten. Lassen Sie uns nun die zweite Methode sehen, und das ist Objekt add_values Methode Punktwert, späte Fruchtwerte Objekt. Das Objekt. Wir werden auf dieses eingebaute JavaScript-Objekt zugreifen und wie wir Werte bekommen. Und wir gehen wieder in das Obst-Objekt. Und wenn wir das ausloggen, erhalten wir die Werte. Yahoos bläst meinen Verstand, wie einfach das ist, Daten aus Objekten zu extrahieren. Und wie Sie sehen können, haben wir ein Array in beiden Instanzen erstellt, in Objektpunktschlüsseln und Wertobjekt. Wir haben unsere Objektfrüchte in Arrays umgewandelt, die die Daten enthalten, an denen wir interessiert sind. Aber jetzt sagen Sie, dass Sie sowohl die Schlüssel als auch die Werte wollten. Wie würden wir das tun? Lassen Sie uns wiegen Objekt Punkt Erhöhung kommt in das Bild. Schauen wir uns mal an. Methode3. Interessen des Objekts. Also lassen Sie uns jetzt Obstbäume definieren. Wir müssen wieder auf das JavaScript-Objekt zugreifen. Und wie wir zugenommen haben. Und wir gehen in das Objekt Frucht. Und wenn wir das lösen können, bekommen wir eine Reihe von Arrays. Denken Sie daran, wie ich sagte, dass der Punkt fast wie ein Array von Arrays zunimmt. Und Sie können sehen, warum jetzt, weil Ihr Gesamt-Array aus kleineren Arrays von Schlüssel-Wert-Paaren besteht. Okay, cool, aber jetzt, wie durchlaufen wir diese Fruchteinträge und extrahieren beide Fehler? Schauen wir uns mal an. Also, wenn Sie Object.create Einträge verwenden, Sie wahrscheinlich eine, um die Schlüsselwertpaare zu extrahieren. Und lasst uns eine for, of Schleife machen, weil für off Schleifen genial sind. Und wenn wir das nur tun, wenn wir nur Früchte von Fruchtinteressen machen, was denkst du, würde passieren? Wii-Konsole, log, Obst. Nun, das ist Anstieg, wenn Sie Daten Fall, es wird nur Konsolenprotokoll sie Array, weil es das erste Element davon insgesamt größer ein in Konsolenprotokoll nehmen wird , dass. Aber was ist, wenn wir extrahieren wollen? Was ist, wenn wir es verpassen wollen sagen, Sie müssen x Bananen kaufen, müssen Sie zwei Karat kaufen. Wie machen wir das? Okay, nun, was wirklich cool ist, ist für die Schleife diese Frucht, die Sie in eine Reihe von Frucht-Namen und Froude-Nummer aufteilen können . Ich meine, du kannst es nennen, wie immer du willst. Also ja, ich habe gerade Obst. Weißt du was? Lassen Sie mich es für Sie intuitiver machen. Frucht-Schlüssel, Namenssatz. Sagen wir, dass Fruchtschlüssel und das könnte Food Valley sein. Sie wissen also, dass diejenigen, die Schlüssel in den anderen haben irgendwelche Netze alle bearbeiten, in der Schule ist es einfach. Und jetzt sollten wir in der Lage sein, Protokoll zu konsolen. Lassen Sie uns Template-Literale verwenden und sagen, dass Sie Obst kaufen müssen. Frucht. - Schlüssel. Wie cool ist das? Eine Hilfskonsole protokolliert. Sie brauchen Terminologie, etwa zwei Karat in der Nähe, sieben Mangos, sie haben es. Dies war also ein wirklich eingehendes Beispiel für die eines Objekts d, das es mithilfe von Objektschlüsseln, Objektwerten strukturiert. Und wir verwenden sogar Objektinteressen, um sowohl die Schlüssel als auch die Werte aus diesem Objekt herauszuholen. Und wenn Sie dann ein Array von Werten haben, ist es so einfach, ein Array zu durchlaufen. Weil die for of Schleife, das ist einfach sehr intuitiv und es funktioniert erstaunlich gut mit Arrays. Lasst uns weitermachen. 10. Formen: Wir haben über Objekte gelernt, wir haben über Arrays gelernt. Die, diese Vorlesung, es wird episch sein. Aber lassen Sie mich damit beginnen, dass alle JavaScript-Engines die Konzepte, die in dieser Vorlesung diskutiert werden, als eine Möglichkeit verwenden , Code zu optimieren. Und wie Sie aus dem Schlagen sehen können, ist dies Formen, aber verschiedene Motoren nennen Formen verschiedene Dinge. Wenn Sie also anfangen, dies zu googeln, können Sie auf unterschiedliche Terminologie stoßen. Einige Leute bezeichnen diese als versteckte Klassen, aber das ist verwirrend, weil wir JavaScript-Klassen V8 haben, die Karten verursachen. Aber das ist auch verwirrend, weil wir diese Map-Iteration verwenden. Andere nennen sie Typen Javascript-Kern verursacht Strukturen. Aber Spinnenaffe nennt ihn Formen und vermeiden Sie nur Verwirrung mit anderen Terminologie nach der Seite nennen sie Formen als auch. Aber jedenfalls schweife ich ab. Wir wissen jetzt, wie Objekte in JavaScript definiert sind. Wir haben mit ihnen gearbeitet. Aber in diesem Vortrag möchte ich tiefer tauchen. Ich möchte diskutieren, wie JavaScript-Engines mit Objekten arbeiten. Wenn Sie sich ansehen, was wir bisher mit Objekten gemacht haben, haben Sie wahrscheinlich bereits erraten, dass der Zugriff auf Eigenschaften bei weitem die häufigste Aufgabe ist. Was meine ich, wenn wir ein Objekt haben, lassen Sie uns einfach ein Benutzerobjekt über den Vor- und Nachnamen definieren. Es wird sehr häufig für uns sein, diese Werte abzufragen. Beispiel: Vorname des Benutzers. Wir bitten die Engine zu gehen und holen uns den Vornamen dieses Benutzers. diesem Grund ist es für JavaScript entscheidend, diesen Prozess so schnell wie möglich zu machen. Ok? Okay, du verstehst es. Also, was ist die Form? Nun, lassen Sie mich das sagen. Das ist üblich, mehrere Objekte mit denselben Eigenschaftsnamen oder Schlüsseln zu haben. Lassen Sie uns zum Beispiel ein Dogen Schlangenobjekt erstellen. Nehmen wir zum Beispiel an, wir hatten ein Hundeobjekt, also zwei Schlüssel genannt, zwei Namen, Typ und Alter. Jetzt erstellen wir ein Schlangenobjekt, und es hat auch Typ und Alter. Es ist intuitiv, dass diese beiden die gleiche Form haben. Diese Objekte haben die gleichen Schlüssel. Und Italien bedeutet bogenförmig. Formen sind nur Objekte, die das gleiche Aussehen und Gefühl haben. Aber lassen Sie uns tiefer graben, um zu verstehen, was JavaScript mit Objekten macht. Lassen Sie uns also ein Objekt mit den Eigenschaften x und y erstellen, jedes mit einem Wert von 1020. Wenn wir diese Objekte erstellen, wissen wir, dass JavaScript-Objektmodell implementiert ist. Denken Sie daran, dass wir uns das JavaScript-Objektmodell angesehen haben und alles, was ich damit meine , ist , dass jedes Objekt die Wörterbuchdatenstruktur verwendet, die wir zuvor besprochen haben. Es enthält die Schlüssel als Strings. Die Schlüssel hier sind x und y, und diese Schlüssel verweisen auf die jeweiligen Eigenschaftenattribute. Nun, wenn wir auf die Eigenschaft X für dieses Objekt zugreifen, IE, geben wir tatsächlich in unseren Code OBJ 0.8x ein, oder im Fall unseres US-Objekts geben wir user.name ein. Was passieren wird. Werden die JavaScript-Engines im JS-Objekt nach dem Schlüssel suchen, der schmerzt. Und darin wird die entsprechenden Eigenschaftenattribute laden. Und schließlich, sobald es fertig ist, wird es den Wert zurückgeben. Sie sehen den Tag in eckigen Klammern. Es wird das Netz zurückgeben, im Falle des Austritts wird Zinn zurückgeben. Aber diese Eigenschaftsattribute. Wo werden sie im Speicher gespeichert? Lassen Sie mich Ihnen noch eine Frage stellen. Sollten wir diese Eigenschaftenattribute als Teil ihres JS-Objekts speichern? Bevor Sie das beantworten, lassen Sie mich einfach sagen, was, wenn wir am Ende Tausende von Objekten erstellen, die eine ähnliche Struktur haben, IE, die die gleiche Form haben. Out argumentierten wir wirklich verschwenderisch, das vollständige Wörterbuch zu speichern, das Eigenschaftsnamen und zugehörige Attribute auf jedem JS-Objekt y enthält weil dies zu einer ganzen Reihe von Duplizierung und unnötiger Speicherauslastung führen wird . Anrufe. Wir wissen, dass es nicht effizient wäre, diese Eigenschaftenattribute für jedes einzelne Objekt mit derselben Form zu duplizieren . Was macht dann die JavaScript-Engine? Nun, es speichert eine Form des Objekts und es tut dies separat für das eigentliche Objekt selbst. Und diese Form speichert alle Eigenschaftsnamen und Attribute mit Ausnahme der Werte. Anstatt die value-Eigenschaft zu speichern, muss die Form den Offsetwert, der auf das Verfolgungsobjekt verweist, aufhalten, damit die Engine weiß, wo der Wert zu finden ist. Und das bedeutet, dass jedes JavaScript-Objekt, das die gleiche Form hat , genau auf diese eine Instanz zeigt, eine Forminstanz, keine Duplizierung und keinen Speicherverlust ausführt . Und da jedes JavaScript-Objekt eindeutig ist, wird jedes Element unterschiedliche Werte haben. Bedeutet, dass dieses Objekt nur die eindeutigen Werte speichern muss. Lassen Sie mich Ihnen zeigen, was ich will. Lassen Sie uns unser Objekt mit x und y bekommen. Nun, anstatt dieses Objekt speichert die Schlüssel, es geht nur um Gewohnheiten Werte, weil diese Werte eindeutig sind, dass ein Agonist, alle Werte 1020. Und dieses Objekt wird auf eine Form zeigen. Und diese Form wird die Schlüssel und die damit verbundenen Offsets aufbewahren. Die x_max-Szenen. Also wissen wir, wenn Sie die Form betrachten, zeigt das X auf richtig Attribute mit einem Offset von Sarah. Und deshalb wird die JavaScript-Engine wissen, dass x einen Wert von zehn hat. Bist du schon verwirrt? Gut. Es ist Teil der Reise zu einem Teil der Reise. Vielleicht ist dieses Beispiel noch deutlicher, wenn Sie mehrere Objekte haben. Lassen Sie mich Ihnen zeigen, dass wir jetzt ein Objekt OBJ hatten, sie hatten nur x und y. Nun lassen Sie uns OB J1 und OB J2 erstellen. Also haben wir jetzt zwei Objekte, aber mit unterschiedlichen Werten. Und das wird wahrscheinlich Szenen Gina machen, denn jetzt haben wir zwei Objekte und sie verfügen über alle einzigartigen Werte. Aber beide zeigen auf die gleiche Form, weil sie beide die gleiche Form haben. Wie genial. Und Sie können jetzt wirklich sehen, dass statt diese Informationen in beiden Objekten als wahrscheinlich Attribute nur in einer Form gespeichert werden. Denken Sie daran, selbst wenn Sie verwirrt werden, denken Sie nicht nur daran. Egal wie viele Objekte sie sind, Hunderte, Tausende, Millionen oder Milliarden. Solange sie die gleiche Form haben, müssen wir die Form- und Eigenschaftsinformationen nur einmal aufhalten. Aber bisher haben wir nur Beispiele gesehen, wo wir ein Objekt und eine vordefinierte Struktur haben. Wir mussten noch nie Eigenschaften hinzufügen. natürlich die Frage, was passiert, wenn wir Eigenschaften zu einem Objekt hinzufügen, das bereits erstellt wurde? Was passiert mit der Form? Das sind wir Übergangsketten und Bäume kommen ins Bild. Lassen Sie uns das Benutzerobjekt erstellen. Und anfangs illustre sitzen, also ist es leer, es hat keine Eigenschaften. Was ist seine Form? Nun, seine Form ist auch leer. So zeigt das Benutzerobjekt zu diesem Zeitpunkt auf eine in T-Form. Einfach, richtig? Aber jetzt fügen wir eine Eigenschaft namens name zu diesem Objekt mit einem gültigen John hinzu. Sobald Sie dies tun, wird eine neue Form erstellt. Die JavaScript-Engine wechselt jetzt zu dieser neuen Form, die den Eigenschaftsnamen enthält. Das Benutzerobjekt hat den Wert John als ersten Offset. Zu diesem Zeitpunkt ist es eigentlich der einzige Offset. Aber lasst uns weitermachen. Fügen wir nun dem US-Objekt eine Eigenschaft namens Alter hinzu und geben ihm einen Wert von 38, Sie haben es erraten. Eine andere Form wird erstellt. Die JavaScript-Engine wechselt erneut zu dieser neuen Form, die jetzt sowohl Name als auch Alter enthält. Die Eigenschaftsattribute, die diesem Alter zugeordnet sind. Es sagt uns, dass der Wert für das Alter am Offset eine Position unseres Benutzerobjekts gefunden werden kann , was Sinn macht. Und als Nebenbemerkung, dass, wenn y i, die Reihenfolge, in der Eigenschaften zum Objekt hinzugefügt werden, die resultierende Form beeinflusst. Zum Beispiel haben wir Name und Dean Alter definiert, aber das wird zu einem anderen Farbton führen, als wenn wir zuerst 38 Jahre zugewiesen hätten. Und der Name John Impfstoffe wird nur um unsere Formen schlurfen. Eine andere Möglichkeit, dieses Bild darzustellen , das Sie gerade betrachten, ist die folgende. Wie Sie sehen können, müssen wir nicht die vollständige Tabelle mit Eigenschaftenattributen für jedes Shape aufhalten. Stattdessen, wenn er Form muss nur über die neue Eigenschaft wissen, die es einführt. In diesem Fall müssen wir beispielsweise nicht die Informationen über den Namen in der letzten Form speichern , da sie früher in der Kette gefunden werden können. Und um uns zum Arbeiten zu bringen, verbindet sich jede Form mit ihrer vorherigen Form. Und das ist der Grund, warum es eine Übergangskette genannt wird. Es ist wie eine Kette, wie eine große Kette mit vielen Gliedern. Und all diese Formen haben Verbindungen zueinander, die zurück gehen. Nun, in unserem Fall, was ist, wenn wir auf die Name-Eigenschaft auf unserem Benutzerobjekt zugreifen wollen, dem wir wissen, dass John ist. Wenn wir schreiben und user.name, wird die JavaScript-Engine nach dem Eigenschaftsnamen suchen , indem sie sich zuerst der Altersform nähert. Warum? Weil das am weitesten unten an der Kette ist. Es wird nicht finden, dass die, also wird der Motor weiterhin die Übergangskette hinauflaufen müssen, bis er die Form findet, die die Namenseigenschaft eingeführt hat. Das macht Sinn. Fukuoka, jetzt sind wir fast fertig, aber ich will etwas komplizierter werden. Was passiert, wenn Sie zwei Objekte haben, die zuerst leer sind und dann unterschiedliche Eigenschaften auf jedem von ihnen platzieren. Erinnern Sie sich an Holozän-Übergangsketten und Übergangsbäume. Hier kommen die Bäume hinein , denn in diesem Fall müssen wir uns verzweigen. Anstatt eine Übergangskette zu haben, können wir einen Übergangsbaum haben. Lassen Sie mich Ihnen zeigen, was ich meine. Lassen Sie uns einen Benutzer ein Objekt erstellen. Zuerst ist es NT, und dann ersetzen Sie den Eigenschaftsnamen darauf. Wir werden mit einem JS-Objekt namens User one enden , das einen einzelnen Wert enthält, in diesem Fall John. Und es wird auch zu Harmonieformen in zwei Formen führen, S, rechts, die EMT-Form und die Form mit nur einer Eigenschaft namens name. Okay, und lassen Sie uns Benutzer erstellen. Benutzer zwei wird auch mit einem leeren Objekt beginnen, aber dann fügen wir eine andere Eigenschaft namens Alter hinzu. Was ist das Ergebnis von Wallace? Nun, wir werden zwei Objekte haben, aber sie werden drei sein. Formen wird sein, um Ketten zu formen. Eine bezieht sich auf Benutzer eine und eine andere auf Benutzer zwei. Aber lass mich dich jetzt fragen, bedeutet das, dass es immer eine Indie-Form sein wird , die mit jedem Objekt verbunden ist? Nein, überhaupt nicht. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Sieh dir mal an. Nehmen wir an, wir erstellen Benutzer eins, beginnt als AMD und er hat den Namen John. Wir wissen, in diesem Fall werden wir ein JS-Objekt haben, wird Valley John, Das zeigt auf eine leere Form, die Dane übergeht zu einer neuen Form mit dem Eigenschaftsnamen der Benennung. Wir wissen das, aber sagen wir, wir erstellen einen zweiten Benutzer, aber dieses Mal erstellen wir sofort eine Eigenschaft namens name. In diesem Fall haben wir ein Objekt erstellt, das sofort über die name-Eigenschaft verfügt. Und das bedeutet, dass die JavaScript-Engine nicht von einem leeren Objekt beginnen und zu einem neuen übergehen musste . Es ist sofort nur zum Endergebnis gegangen. Und ich werde hier einen sehr guten Punkt machen. Das ist y. Objektliterale können sehr gut sein , weil diese Optimierung und wir gerade gesehen haben, die Übergangskette verkürzt und es effizienter macht , Objekte aus Literalen zu konstruieren. Nun, ich will nur ein bisschen komplizierter werden. Ertragen Sie einfach mit mir. Halten Sie sich fest, hören Sie nicht auf. Jetzt bist du fast fertig. Antworten, sehr vernünftige Informationen, sehr interessant. Lassen Sie uns jetzt ein Benutzerobjekt mit drei Eigenschaften erstellen, Name, Alter und fett, üppig achtziger Jahre, ball sie up. Wie wir bereits gelernt haben, erzeugt dies ein Objekt mit wie vielen Formen? Mit vier Formen im Speicher. Das ist richtig. Um nun auf den Eigenschaftsnamen dieses Objekts zuzugreifen, muss die JavaScript-Engine der verknüpften Liste folgen. Es wird mit der Form ganz unten beginnen müssen. Und dann wird es seinen Weg bis zu der Form arbeiten müssen, die Namen eingeführt, die ist, wo die Spitze. Und wie ich bin sicher, dass Sie bereits erraten haben, wird dies wird sein, wenn wir dies öfter tun, besonders wenn die Objekte viele Eigenschaften haben. Um die Suche nach Eigenschaften zu beschleunigen, die JavaScript-Engine, Ed ist eine Shape-Tabellen-Datenstruktur. Und die Shape-Tabelle ist ein Wörterbuch Zuordnung Eigenschaftsschlüsseln zu den jeweiligen Formen, die die angegebene Eigenschaft eingeführt. Hier ist die Formtabelle und wie es aussieht. In der Tat ist das eine andere Art von Wörterbuch, das diesen ganzen Prozess verkürzt. Zum Beispiel können Sie auf dem Bildschirm an der Schütteltabelle sehen, wird die JavaScript-Engine Weg, um diese Eigenschaftswerte in welcher Form zu finden, um diese Eigenschaftswerte zu finden. Also in der Forschung für den Namen, es beginnt immer noch in der Form, in der späteren Form. Aber später Shape Points Tisch schütteln. Und sie, die JavaScript-Engine weiß zu suchen, in welcher Form finden Sie diese Namenseigenschaft. Es macht Heiligen Router. Kann es nicht glauben, oder Sie ernst. Jetzt haben wir noch einen Formtisch. Dachte, der ganze Grund für Formen war frei oder Wörterbuchsuche. Jetzt haben wir noch einen. Allel sind keine Ghettos. Lager werden aufgeben. Nein, gib nicht auf und kenne die Antwort. Und der Grund ist, dass die Formtabelle und schöne Formen ein Mittel zum Zweck sind und das ist, Inline-Caches zu aktivieren. Inline-Caches oder das wahre Geheimnis hinter Javascript-Laufzeitumgebung machen Kiefer so schnell gerissen. Und ich möchte nicht zu viel Detail Inline-Caches eingehen , weil das ein ganzes Thema für sich ist. Aber ich hoffe, ich habe dir genug Geschmack und genug Wissen gegeben , damit du tiefer in dieses Thema eintauchen kannst, das dich interessiert. Aber wir sind nicht ganz fertig mit dieser Legion, weil ein, Ich möchte Ihnen zeigen, wie ein Shake-Tisch aussieht. In B. möchte ich nur noch mehr auf das Konzept eines Inline-Cache einführen und was es eigentlich bedeutet, dass es sehr, sehr hoch, Sir, nur gelben Kaffee. Wir haben nur noch eine oder zwei Minuten. Mex von dieser Vorlesung. Es hängt. Lass uns wieder reingehen. Und ich will nicht in Inland-Caches. Wir wissen, dass es ein weiteres ganzes Thema an sich ist, das auf einem sehr hohen Niveau ist, so denke ich es gerne. Angenommen, wir erstellen eine Funktion namens Geschmack, die ein Benutzerobjekt annimmt , und wir konsolen nur den Namen des Benutzers ausloggen. Wenn Sie die Funktion zum ersten Mal ausführen, würde der Inline-Cache den Eigenschaftsnamen nachschlagen und feststellen, dass dieser Wert bei Offset 0 gespeichert ist. Da wir den Benutzer kennen, hat ein Objekt den Namen John, in diesem Fall bei Offset 0. Wenn Sie diese Funktion ausführen, wird es diesen Offset finden. Und der Inline-Cache speichert die Form und den Offset, an dem ihr Eigentum bombardiert wurde. Wenn Sie also den j ist Funktionsgeschmack betrachten, wird es diesen Offset Zara in diesem Funktionsaufruf aufhalten. Und was das bedeutet, ist, dass, wenn die JavaScript-Engine Objekte mit der Form sieht , die der Inline-Cache zuvor aufgezeichnet hat, sie überhaupt nicht mehr auf die Eigenschaftsinformationen zugreifen muss. Stattdessen kann die Suche nach teuren Eigenschaftsinformationen vollständig übersprungen werden. Und das ist deutlich schneller als jedes Mal auf die Immobilie zu schauen. Lassen Sie mich Ihnen zeigen, was ich meine. So sollen wir die Testfunktion mit Calderon Benutzer eins und die Inline-Caches in Richtung des Offset 0 in der Funktion selbst einrichten . Nun, wenn wir es auf Benutzer 2 nennen, was denkst du, wird passieren? Nun, in diesem Fall werden die Inline-Caches es erkennen. Es hat die gleiche Form. Und anstatt die Eigenschaftsattribute nachschlagen zu müssen und zu den Formtabellen gehen, et cetera, et cetera. Aber weiß, dass der Teufel 0 sagte. Alles, was es tut, ist, dass es den Inline-Cache von Zara nimmt und einen Wert Ali von diesem Objekt zurückgibt. Cool, richtig? Wie auch immer, es gibt sehr hohe Inline-Caches. Du musst es jetzt nicht zu sehr verstehen, aber wenn du tiefer graben willst, Herbert, du dir genug Geschmack gegeben hast. Nun, das war ein langer Vortrag, also danke, dass du bei mir bist. Nun, Dan, wenn du so weit bist, willst du nur schnell zusammenfassen. Wir haben gelernt, wie JavaScript-Engines Objekte und Arrays speichern und wie Shapes und Inland-Caches dazu beigetragen haben, Operationen an diesen Objekten zu optimieren. Und basierend auf diesem Wissen, was können wir davon nehmen? Nun, wenn es eine Sache gibt, die wir aus diesem praktischen nehmen können, verpassen wir einfach unsere Objekte auf die gleiche Weise zu initialisieren. So haben sie nicht am Ende unterschiedliche Formen. Wenn Sie beispielsweise ein Benutzerobjekt erstellen möchten, erstellen Sie kein Objekt mit der Eigenschaft name, ein anderes mit einem fname, ein anderes mit dem Vornamen. Und andere sind zuerst und dann ein Großbuchstabe N für Namen dort. Also werden wir verschiedene Formen haben und es wird die Dinge komplizierter machen. Und so ist der Hintergrund eher konsistent in der Art, wie Sie Ihr Objektziel initialisieren. Ich hoffe, das war sehr informativ. T, ich? Viel Spaß, es zusammen zu setzen, weil ein ziemlich kompliziertes Thema und nicht viele Leute davon wissen, also ja, genießen Sie es. Und lass uns weitermachen. Lassen Sie uns in ein paar mehr JavaScript kommen, um Sie bald zu sehen.