JavaScript -Arrays
Ein Array ist eine spezielle Variable, die mehr als einen Wert enthalten kann:
const cars = ["Saab", "Volvo", "BMW"];
Warum ein Array verwenden?
Wenn Sie eine Liste von Elementen haben (z. B. eine Liste mit Autonamen), könnte das Speichern der Autos in einzelnen Variablen wie folgt aussehen:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Was aber, wenn Sie die Autos durchgehen und ein bestimmtes finden möchten? Und was wäre, wenn Sie nicht 3 Autos, sondern 300 hätten?
Die Lösung ist ein Array!
Ein Array kann viele Werte unter einem einzigen Namen enthalten, und Sie können auf die Werte zugreifen, indem Sie auf eine Indexnummer verweisen.
Erstellen eines Arrays
Die Verwendung eines Array-Literals ist die einfachste Möglichkeit, ein JavaScript-Array zu erstellen.
Syntax:
const array_name = [item1, item2, ...];
Es ist üblich, Arrays mit dem Schlüsselwort const zu deklarieren.
Erfahren Sie mehr über const mit Arrays im Kapitel: JS Array Const .
Beispiel
const cars = ["Saab", "Volvo", "BMW"];
Leerzeichen und Zeilenumbrüche sind nicht wichtig. Eine Deklaration kann mehrere Zeilen umfassen:
Beispiel
const cars = [
"Saab",
"Volvo",
"BMW"
];
Sie können auch ein Array erstellen und dann die Elemente bereitstellen:
Beispiel
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Verwenden des JavaScript-Schlüsselworts new
Das folgende Beispiel erstellt ebenfalls ein Array und weist ihm Werte zu:
Beispiel
const cars = new Array("Saab", "Volvo", "BMW");
Die beiden obigen Beispiele machen genau dasselbe.
Es besteht keine Notwendigkeit zu verwenden new Array().
Verwenden Sie aus Gründen der Einfachheit, Lesbarkeit und Ausführungsgeschwindigkeit die Array-Literal-Methode.
Zugriff auf Array-Elemente
Sie greifen auf ein Array-Element zu, indem Sie sich auf die Indexnummer beziehen :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Hinweis: Array-Indizes beginnen mit 0.
[0] ist das erste Element. [1] ist das zweite Element.
Ändern eines Array-Elements
Diese Anweisung ändert den Wert des ersten Elements in cars:
cars[0] = "Opel";
Beispiel
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Greifen Sie auf das vollständige Array zu
Mit JavaScript kann auf das vollständige Array zugegriffen werden, indem auf den Array-Namen verwiesen wird:
Beispiel
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Arrays sind Objekte
Arrays sind eine spezielle Art von Objekten. Der typeofOperator in JavaScript gibt "object" für Arrays zurück.
JavaScript-Arrays lassen sich jedoch am besten als Arrays beschreiben.
Arrays verwenden Zahlen , um auf ihre "Elemente" zuzugreifen. In diesem Beispiel person[0]
gibt John Folgendes zurück:
Anordnung:
const person = ["John", "Doe", 46];
Objekte verwenden Namen , um auf ihre "Mitglieder" zuzugreifen. In diesem Beispiel
person.firstName
gibt John Folgendes zurück:
Objekt:
const person = {firstName:"John", lastName:"Doe", age:46};
Array-Elemente können Objekte sein
JavaScript-Variablen können Objekte sein. Arrays sind spezielle Arten von Objekten.
Aus diesem Grund können Sie Variablen unterschiedlichen Typs im selben Array haben.
Sie können Objekte in einem Array haben. Sie können Funktionen in einem Array haben. Sie können Arrays in einem Array haben:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Array-Eigenschaften und Methoden
Die wahre Stärke von JavaScript-Arrays sind die integrierten Array-Eigenschaften und -Methoden:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
Array-Methoden werden in den nächsten Kapiteln behandelt.
Die length-Eigenschaft
Die lengthEigenschaft eines Arrays gibt die Länge eines Arrays zurück (die Anzahl der Array-Elemente).
Beispiel
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
Die lengthEigenschaft ist immer um eins größer als der höchste Array-Index.
Zugriff auf das erste Array-Element
Beispiel
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Zugriff auf das letzte Array-Element
Beispiel
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Schleifen von Array-Elementen
Eine Möglichkeit, ein Array zu durchlaufen, ist die Verwendung einer forSchleife:
Beispiel
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
Sie können auch die Array.forEach()Funktion verwenden:
Beispiel
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Hinzufügen von Array-Elementen
Der einfachste Weg, ein neues Element zu einem Array hinzuzufügen, ist die Verwendung der push()Methode:
Beispiel
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
Ein neues Element kann auch mit der lengthEigenschaft zu einem Array hinzugefügt werden:
Beispiel
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
WARNUNG !
Das Hinzufügen von Elementen mit hohen Indizes kann undefinierte "Löcher" in einem Array erzeugen:
Beispiel
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
Assoziative Arrays
Viele Programmiersprachen unterstützen Arrays mit benannten Indizes.
Arrays mit benannten Indizes werden als assoziative Arrays (oder Hashes) bezeichnet.
JavaScript unterstützt keine Arrays mit benannten Indizes.
In JavaScript verwenden Arrays immer nummerierte Indizes .
Beispiel
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
WARNUNG !!
Wenn Sie benannte Indizes verwenden, definiert JavaScript das Array in ein Objekt um.
Danach werden einige Array-Methoden und -Eigenschaften falsche Ergebnisse liefern .
Beispiel:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
Der Unterschied zwischen Arrays und Objekten
In JavaScript verwenden Arrays nummerierte Indizes .
In JavaScript verwenden Objekte benannte Indizes .
Arrays sind eine besondere Art von Objekten mit nummerierten Indizes.
Wann man Arrays verwendet. Wann man Objekte verwendet.
- JavaScript unterstützt keine assoziativen Arrays.
- Sie sollten Objekte verwenden, wenn die Elementnamen Zeichenfolgen (Text) sein sollen .
- Sie sollten Arrays verwenden, wenn die Elementnamen Zahlen sein sollen .
JavaScript neues Array()
JavaScript hat einen eingebauten Array-Konstruktor new Array().
Aber Sie können []stattdessen sicher verwenden.
Diese beiden unterschiedlichen Anweisungen erstellen beide ein neues leeres Array mit dem Namen points:
const points = new Array();
const points = [];
Diese beiden unterschiedlichen Anweisungen erstellen beide ein neues Array mit 6 Zahlen:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
Das newSchlüsselwort kann zu unerwarteten Ergebnissen führen:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
Ein häufiger Fehler
const points = [40];
ist nicht dasselbe wie:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
So erkennen Sie ein Array
Eine häufig gestellte Frage ist: Woher weiß ich, ob eine Variable ein Array ist?
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.