JavaScript Arrays

In diesem Kapitel werden wir JavaScript-Arrays erforschen.

In JavaScript können Sie Arrays zum Speichern mehrerer Werte in einer einzigen Variablen verwenden.

Wir können ein Array als eine einzigartige Variable beschreiben, die in der Lage ist, mehrere Werte gleichzeitig zu speichern.

Es gibt zwei Syntaxe zum Erzeugen eines leeren Arrays:

let arr = new Array();
let arr = [];

Die zweite Syntax wird meist verwendet. Sie können Anfangselemente in den Klammern hinzufügen, so:

Javascript arrays

let books = ["Html", "Css", "Javascript"]; console.log(books[0]); // Html console.log(books[1]); // Css console.log(books[2]); // Javascript

Sie können auch ein Element wie folgt ersetzen:

Javascript arrays

let books = ["Html", "Css", "Javascript"]; books[2] = 'Php'; // now ["Html", "Css", "Php"] console.log(books);

Oder Sie können einem Array ein Neues hinzufügen, so:

Javascript arrays add new element

let books = ["Html", "Css", "Javascript"]; books[3] = 'Php'; // now ["Html", "Css", "Javascript", "Php"] console.log(books); // Html, Css, Javascript, Php

Die Array-Länge length ist die Gesamtanzahl der Elemente. Hier ist ein Beispiel:

Javascript arrays length

let books = ["Html", "Css", "Javascript"]; console.log(books.length); // 3

Falls Sie das gesamte Array anzeigen wollen, können Sie console.log verwenden, so:

Ein Array kann jede Art von Elementen speichern:

Javascript arrays multitype

// mix of values let arr = ['Javascript', { sitename: 'W3Docs'}, true, function () { console.log('welcome'); }]; // get the object at index 1 and then show its name console.log(arr[1].sitename); // W3Docs // get the function at index 3 and run it arr[3](); // welcome

Arrays können als eine spezielle Art von Objekten angesehen werden. Eine der auffälligsten Ähnlichkeiten ist, dass Arrays mit einem Komma enden können.

Zum Beispiel:

let books = [
 "Html",
 "Css",
 "Javascript",
];

Methoden

Eine der häufigsten Verwendungen von Arrays ist eine Warteschlange. In der Informatik ist es bekannt als geordnete Zusammenstellung von Elementen, die die folgenden zwei Operationen unterstützen:

push - wird zum Anhängen eines Elements am Ende verwendet

shift - wird zum Abrufen eines Elements vom Anfang verwendet, was die Warteschlange vorrückt. Infolgedessen wird das zweite Element zum ersten.

Arrays unterstützen beide der oben genannten Operationen, und es ist eine weit verbreitete Praxis für Entwickler.

Sie können Arrays auch für eine andere Praxis verwenden. Es ist eine Datenstruktur namens Stapel, die zwei Operationen unterstützt:

push - es zielt darauf ab, ein Element am Ende hinzuzufügen.

pop - zielt darauf ab, ein Element vom Ende zu nehmen.

In JavaScript arbeiten Arrays sowohl als Warteschlange als auch als Stapel. Mit Hilfe von Arrays können Sie Elemente hinzufügen oder entfernen, entweder vom Anfang oder vom Ende.

Methoden, die mit dem Ende eines Arrays arbeiten

pop

Diese Methode wird zum Extrahieren und Zurückgeben des letzten Elements des Arrays verwendet. Zum Beispiel:

Javascript arrays pop element

let books = ["Html", "Css", "Javascript"]; console.log(books.pop()); // remove "Jasvascript" and alert it console.log(books); // Html, Css

push

Sie können diese Methode verwenden, um das Element am Ende des Arrays hinzuzufügen, so:

Javascript arrays push element

let books = ["Html", "Css"]; books.push("Javascript"); console.log(books); // Html, Css, Javascript

Die Aufrufe books.push(...) und books[books.length] = ... sind gleich.

Methoden, die mit dem Anfang des Arrays arbeiten

shift

Diese Methode zielt darauf ab, das erste Element des Arrays zu extrahieren und zurückzugeben.

Zum Beispiel:

Javascript arrays shift element

let books = ["Html", "Css", "Javascript"]; console.log(books.shift()); // remove Html and show it console.log(books); // Css, Javascript

unshift

Diese Methode wird verwendet, um das Element am Anfang des Arrays hinzuzufügen, wie folgt:

Javascript arrays unshift element

let books = ["Css", "Javascript"]; books.unshift('Html'); console.log(books); // Html, Css, Javascript

Mit Hilfe der Methoden push und unshift können Sie gleichzeitig verschiedene Elemente hinzufügen.

Lassen Sie uns dieses Beispiel ansehen:

Javascript arrays push and unshift element

let books = ["Html"]; books.push("Css", "Javascript"); books.unshift("Php", "C#"); // ["Php", "C#", "Html", "Css", "Javascript"] console.log(books);

Innenteile

Wie wir bereits erwähnt haben, sind Arrays eine spezielle Art von Objekten. Eckige Klammern können verwendet werden, um auf eine Eigenschaft zuzugreifen arr[0] stammen aus der Syntax des Objekts. Etwas besonderes macht ein Array noch spezieller. Es ist ihre interne Darstellung. Die Engine tendiert dazu, ihre Elemente nacheinander im zusammenhängenden Speicherbereich zu speichern. Beachten Sie jedoch, dass sie brechen, wenn Sie aufhören, mit dem Array in der gegebenen Reihenfolge zu arbeiten und es als ein gewöhnliches Objekt zu behandeln.

Zum Beispiel ist es technisch möglich, so zu handeln:

let books = []; // make an array 
books[99999] = 5; // assign a property with the index far greater than its length 
books.name = "Javascript"; // create a property with an arbitrary name

Es ist verfügbar, weil Arrays Objekte sind. Sie können ihnen Eigenschaften hinzufügen.

Sie sollten auch die Fälle von Missbrauch des Arrays kennen, um sie zu vermeiden. Hier sind einige Beispiele:

Hinzufügen einer nicht-numerischen Eigenschaft, wie arr.test = 9.
Löcher machen, wie hinzufügen arr[0] und dann arr[500], ohne dazwischen etwas zu setzen.
Füllen des Arrays in umgekehrter Reihenfolge. Zum Beispiel, arr[500], arr[499].

Wir können davon ausgehen, dass man Arrays als einzigartige Strukturen betrachten sollte, wenn man mit ihnen mit geordneten Daten arbeitet.

Schleifen

Eine der gängigen Arten, Array-Elemente zu durchlaufen, ist die for-Schleife über Indizes.

Hier ist ein Beispiel:

Javascript arrays loop

let arr = ["Html", "Css", "Javascript"]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }

Eine andere Form von Schleife ist for..of.

Das Beispiel sieht so aus:

Javascript arrays loop

let books = ["Html", "Css", "Javascript"]; // iterates over array elements for (let book of books) { console.log(book); }

Diese Form der Schleife gibt keinen Zugriff auf die Nummer des aktuellen Elements.

Da Arrays Objekte sind, können Sie technisch auch for..in verwenden:

Javascript arrays loop

let booksArray = ["Html", "Css", "Javascript"]; for (let key in booksArray) { console.log(booksArray[key]); // Html, Css, Javascript }

Dennoch ist es keine gute Idee, da sie potenzielle Probleme verursachen kann, wie:

Die Schleife for..in kann über alle Eigenschaften iterieren, nicht nur über die numerischen Eigenschaften.
Die Schleife for..in ist für generische Objekte optimiert, aber nicht für Arrays. Deshalb ist sie bis zu 10-100 mal langsamer.

Die Länge

Immer wenn wir das Array ändern, aktualisiert sich die Eigenschaft length automatisch. Es ist nicht die Anzahl der Werte im Array, sondern der numerische Index + 1. Zum Beispiel wird ein einzelnes Element mit einem großen Index eine große Länge ergeben, so:

Javascript arrays length

let books = []; books[100] = "Html"; console.log(books.length); // 101

Dennoch verwenden Entwickler Arrays nicht auf diese Weise.

Die Eigenschaft length ist beschreibbar. Wenn Sie sie verringern, wird das Array abgeschnitten. Lassen Sie uns dieses Beispiel ansehen:

Javascript arrays length

let arr = [1, 2, 3, 4, 5]; arr.length = 3; // truncate to 3 elements console.log(arr); // [1, 2, 3] arr.length = 5; // return length back console.log(arr[4]); // undefined: the values do not return

Sie können das Array einfach leeren, indem Sie arr.length = 0; verwenden.

Erstellen eines neuen Arrays

Hier ist eine andere Syntax zum Erstellen eines Arrays:

let arr = new Array("Html", "Css", "etc");

Allerdings wird diese Syntax nicht häufig verwendet.

Wenn ein new Array mit nur einem Argument aufgerufen wird, das eine Zahl ist. Danach erstellt es ein Array ohne Elemente, aber mit einer bestimmten Länge:

Javascript create array

let arr = new Array(3); // will it create an array of [3] console.log(arr[0]); // undefined! no elements. console.log(arr.length); // length 3

In dem oben genannten Code sind alle Elemente undefined .

Mehrdimensionale Arrays

Arrays können auch Elemente haben, die Arrays sind. Dies kann für mehrdimensionale Arrays zur Speicherung von Matrizen verwendet werden:

Javascript create array

let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; console.log(matrix[1][1]); // 5, the central elementarrays

toString Methode

Arrays implementieren die Methode toString auf ihre eigene Weise. Sie gibt eine kommagetrennte Liste von Elementen zurück. Hier ist ein Beispiel:

Javascript create array

let arr = [1, 2, 3]; console.log(arr); // 1,2,3 console.log(String(arr) === '1,2,3'); // true

Es gibt auch eine alternative Methode:

Javascript create array

console.log([] + 1); // "1" console.log([1] + 1); // "11" console.log([2, 1] + 2); // "2,12"

Aber sie haben keine Symbol.toPrimitive und valueOf. Arrays implementieren nur die Konvertierung toString. So verwandelt sich hier [] in "1" und [2,1] wird zu "2,1".

Wenn der binäre Plusoperator "+" etwas zu einer Zeichenkette hinzufügt, wandelt er sie in eine Zeichenkette um, so dass der nächste Schritt folgendermaßen aussieht:

Javascript create array

console.log("" + 1); // "1" console.log("2" + 1); // "21" console.log("2,2" + 1); // "2,21"

Quizzeit: Testen Sie Ihre Fähigkeiten!

Sind Sie bereit, das Gelernte herauszufordern? Tauchen Sie ein in unsere interaktiven Quizze für ein tieferes Verständnis und eine unterhaltsame Art, Ihr Wissen zu festigen.