Javascript-Liste

| | | | | | | | | | | | | | | | | | | | | | | | | | |

Lassen Sie uns eine Obstliste erstellen. Wir nennen unsere Liste "Obst" und fugen die folgenden Werte hinzu: Banane, Melone, Trauben. Oh, wie ich Obst liebe! Obwohl dies wie ein Tutorial zu Einkaufslisten klingen mag, haben wir uns gerade selbst ein Array erstellt.

In diesem Leitfaden werden wir durchgehen, was Arrays sind, wie sie funktionieren, und warum Sie sie in Ihrem Code verwenden sollten. Wir werden einige Beispiele fur Arrays in Aktion besprechen, damit Sie ein JavaScript-Array-Ninja werden können!

Was ist ein Array?

Ein Array ist ein Objekt, das Daten speichert. Arrays enthalten eine geordnete Sammlung von Elementen und können null oder mehr Elemente speichern. Arrays sind bei der Programmierung nutzlich, da Sie ähnliche Werte in einer Variablen speichern können.

Sie mussen nicht zehn einzelne Variablen schreiben, um beispielsweise Ihre Lieblingsfruchte aufzulisten. Mit einem Array können Sie alle Ihre Lieblingsfruchte in einer Variablen hinzufugen.

Betrachten Sie das folgende Beispiel:

Hier haben wir ein Array namens "fruits‚" erstellt. Es speichert drei verschiedene Werte, von denen jeder eine Frucht widerspiegelt, die wir in einem Lebensmittelgesch√§ft kaufen m√∂chten. Um unser Array zu deklarieren, haben wir unsere Liste von Elementen in eckige Klammern gesetzt.

Ein Array deklarieren

Es gibt zwei Möglichkeiten, ein Array zu deklarieren. Die meisten Leute sehen dies, indem Sie eine Liste von Elementen in eckige Klammern setzen, wie wir es zuvor getan haben:

In diesem Beispiel haben wir ein Array mit drei Werten deklariert. Wir können auch den Array-Konstruktor verwenden, der das Schlusselwort new verwendet, um ein Array zu deklarieren:

Diese Code-Schnipsel erstellen das gleiche Array, aber mit unterschiedlichen Methoden. Beachten Sie, dass wir in unserem zweiten Beispiel runde Klammern verwendet haben, um unser Array zu deklarieren. Wir mussten auch den Konstruktor new Array verwenden, um ein Array zu deklarieren. Aus diesem Grund bevorzugen die meisten Leute die erste Methode; eckige Klammern sind viel einfacher zu merken und schneller zu tippen.

Arrays mussen nicht denselben Datentyp enthalten. Unser Array kann eine beliebige Anzahl verschiedener Datentypen speichern:

Dieses Array speichert drei verschiedene Datentypen: einen String, eine Zahl und ein boolescher Wert. Nun, da Sie damit vertraut sind, wie ein Array deklariert wird, können Sie mit dem Zugriff auf seinen Inhalt beginnen.

Ein Array lesen

Arrays wären nicht sehr nutzlich wenn wir ihre Werte nicht lesen könnten. Deshalb gibt es eine Indizierung. Die Indizierung ist eine Möglichkeit, auf einzelne Elemente in einem iterierbaren Objekt wie einer Liste zuzugreifen.

Jedes Element eines Arrays in ein Array erh√§lt eine eigene Indexnummer. Diese Nummern beginnen mit 0 und k√∂nnen verwendet werden, um auf einzelne Elemente in einem Array zuzugreifen ts‚" array?

Hier sind die Indexwerte, die diesem Array zugewiesen sind:

Mit diesen Nummern können wir auf einzelne Elemente in unserer Liste zugreifen. Angenommen, Sie möchten ermitteln, welche Frucht sich in Indexposition 1 in Ihrem Array befindet. Sie können dies tun, indem Sie den Indexwert in eckigen Klammern nach dem Namen des Arrays angeben:

Unser Code gibt zuruck: Trauben. Wir beziehen uns auf die Indexposition 1, die den Wert "Trauben" speichert. Wenn Sie den Wert 0 ubergeben haben, wird "Banane‚" zuruckgegeben wurde. Wenn Sie versuchen, auf ein Element zuzugreifen, das nicht existiert, wird "undefiniert‚" wird zuruckgegeben:

Ausgabe: nicht definiert. Die Indizierung ist besonders nutzlich, wenn Sie die Elemente in einem Array durchlaufen möchten. Nehmen wir an, Sie möchten jede Frucht in Ihrem Array auf der Konsole ausgeben. Sie könnten dies mit einer for-Schleife wie folgt tun:

Dieser Code gibt Folgendes zuruck:

Unser Code durchläuft jedes Element in unserer Liste und gibt dann jedes Element an die Konsole aus. Sie werden auch feststellen, dass wir die Eigenschaft length verwendet haben. Dies gibt die Länge unserer Liste zuruck.

Elemente zu einem Array hinzufugen

Meistens möchten Sie einem Array einen neuen Wert hinzufugen, nachdem Sie Ihr Array ursprunglich deklariert haben. Sie können dies mit tun die Array-Methode push().

Wir haben vergessen, "Erdbeere‚" zu unserer Obstliste hinzuzufugen. Oh nein! Keine Sorge, wir k√∂nnen Fugen Sie es immer mit der Methode push() hinzu:

Jetzt, wo wir diesen Code ausgefuhrt haben, sieht unser Array aus so:

BananeTraubenMeloneErdbeere
123

Mit unshift() können Sie Daten am Anfang Ihres Arrays hinzufugen. Erdbeeren sind so wichtig auf unserer Einkaufsliste, dass wir möchten, dass sie zuerst erscheinen:

Damit wurden unsere ursprunglichen "fruits‚" Liste sieht wie folgt aus:

< tr>
Erdbeere BananeTraubenMelone
123

Artikel aus einem Array entfernen

Es stellt sich heraus, dass wir bereits eine Melone zu Hause haben, also mussen wir keine kaufen. Was wäre der Sinn, eine weitere Melone zu kaufen, oder? Da Melone am Ende unserer Liste steht, haben wir zwei Möglichkeiten, sie zu entfernen:

Nehmen wir als Beispiel splice():

Unser Code gibt Folgendes zuruck:

splice() akzeptiert zwei Parameter. Die erste ist die Indexnummer, die aus dem Array entfernt werden soll, und die zweite gibt an, wie viele Elemente entfernt werden sollen. In diesem Fall wollten wir das Element mit dem Indexwert 3 entfernen, daher haben wir "3, 1‚" als unsere Parameter.

pop() akzeptiert keine Parameter. Es entfernt nur das letzte Element einer Liste:

Unser Code gibt Folgendes zuruck:

Sie können auch shift() verwenden, um ein Element vom Anfang einer Liste zu entfernen:

Unser Code gibt Folgendes zuruck:

push() und unshift() fugen Elemente zu Listen hinzu. pop() und shift() entfernen Elemente aus Listen. Die Splice-Methode kann auch verwendet werden, um ein Element basierend auf seinem Indexwert aus einer Liste zu entfernen.

Elemente in einem Array ändern

Bananen sind zwar eine leckere Frucht, aber oft sind sie so groß, dass man sie nicht nur als Snack essen kann, wenn man sich ein bisschen fuhlt hungrig. Babybananen sind leichter zu essen.

Nun, sagen wir, wir m√∂chten unsere ‚ÄûObst‚"-Liste √§ndern, sodass wir Babybananen statt normaler Bananen kaufen tun Sie dies mit dem Zuweisungsoperator wie bei jeder Variablen:

Unser Code gibt Folgendes zuruck:

Wir haben das Element an der Indexposition 0 ge√§ndert, um den Wert "Baby-Bananen‚" zu speichern. Sie mussen keine speziellen Methoden anwenden um diese √Ñnderung vorzunehmen; Der Zuweisungsoperator wird verwendet, um Werte in einem Array zu √§ndern.

Schlussfolgerung

Das sind die Grundlagen dessen, was Sie uber JavaScript-Arrays wissen mussen. Es gibt noch mehr zu lernen, aber genau das macht Programmieren Spaß: Es gibt immer eine neue Herausforderung, die es zu meistern gilt. Nicht zuletzt haben Sie meine Lieblingsfruchte kennengelernt. Obwohl ich sagen wurde, dass ich schwarze Johannisbeeren liebe, was ich in diesem Tutorial nicht erwähnt habe.

Jetzt sind Sie bereit, wie ein Experte mit JavaScript-Arrays zu arbeiten!