Ein Array ist eine spezielle Variable, die mehr als einen Wert enthalten kann:
const cars = ["Saab", "Volvo", "BMW"];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Wenn Sie über eine Liste mit Elementen verfügen (z. B. eine Liste mit Autonamen), speichern Sie diese Autos in einzelnen Variablen könnten so 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, sondern 300 Autos hätten?
Die Lösung ist ein Array!
Ein Array kann viele Werte unter einem einzigen Namen enthalten, und das ist auch möglich Greifen Sie auf die Werte zu, indem Sie auf eine Indexnummer verweisen.
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.
const cars = ["Saab", "Volvo", "BMW"];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Leerzeichen und Zeilenumbrüche sind nicht wichtig. Eine Deklaration kann sich über mehrere Zeilen erstrecken:
const cars = [
"Saab",
"Volvo",
"BMW"
];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = [
"Saab",
"Volvo",
"BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Sie können auch ein Array erstellen und dann die Elemente bereitstellen:
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Das folgende Beispiel erstellt ebenfalls ein Array und weist ihm Werte zu:
const cars = new Array("Saab", "Volvo", "BMW");
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Die beiden obigen Beispiele machen genau das Gleiche.
Es ist nicht erforderlich, new Array()
zu verwenden.
Aus Gründen der Einfachheit, Lesbarkeit und Ausführungsgeschwindigkeit verwenden Sie die Array-Literal-Methode.
Sie greifen auf ein Array-Element zu, indem Sie auf die Indexnummer verweisen:
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
Hinweis: Array-Indizes beginnen mit 0.
[0] ist das erste Element. [1] ist das zweite Element.
Diese Anweisung ändert den Wert des ersten Elements in cars
:
cars[0] = "Opel";
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Die JavaScript-Methode toString()
konvertiert ein Array in ein Zeichenfolge von (durch Kommas getrennten) Array-Werten.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Ergebnis :
Banana,Orange,Apple,MangoProbieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns an array as a comma separated string:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
Mit JavaScript kann auf das gesamte Array zugegriffen werden, indem auf das Array verwiesen wird Name:
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Arrays sind eine besondere Art von Objekten. Der Operator typeof
in JavaScript gibt „Objekt“ für zurück Arrays.
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 zurück:
const person = ["John", "Doe", 46];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Arrays use numbers to access its elements.</p>
<p id="demo"></p>
<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>
</body>
</html>
Objekte verwenden Namen, um auf ihre „Mitglieder“ zuzugreifen. In diesem Beispiel, person.firstName
gibt John zurück:
const person = {firstName:"John", lastName:"Doe", age:46};
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>
<script>
const person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person.firstName;
</script>
</body>
</html>
JavaScript-Variablen können Objekte sein. Arrays sind spezielle Arten von Objekten.
Aus diesem Grund können Sie Variablen unterschiedlichen Typs in der haben gleiches Array.
Sie können Objekte in einem Array haben. Sie können Funktionen in einem Array haben. Du kannst haben Arrays in einem Array:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
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 Eigenschaft length
eines Arrays gibt die Länge eines Arrays zurück (die Anzahl der Arrays). Elemente).
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property returns the length of an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>
</body>
</html>
Die Eigenschaft length
ist immer um eins größer als der höchste Array-Index.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[0];
</script>
</body>
</html>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits[fruits.length-1];
</script>
</body>
</html>
Eine Möglichkeit, ein Array zu durchlaufen, ist die Verwendung einer for
-Schleife:
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>";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>
<p id="demo"></p>
<script>
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>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Sie können auch die Funktion Array.forEach()
verwenden:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>Call a function for each array element:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFunction(value) {
text += "<li>" + value + "</li>";
}
</script>
</body>
</html>
Der einfachste Weg, ein neues Element zu einem Array hinzuzufügen, ist die Verwendung der Methode push()
:
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>
<p>The push method appends a new element to an array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Ein neues Element kann auch mithilfe der Eigenschaft length
zu einem Array hinzugefügt werden:
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Lemon";
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
WARNUNG!
<p>Das Hinzufügen von Elementen mit hohen Indizes kann undefinierte „Löcher“ in einem Array erzeugen:
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Adding elements with high indexes can create undefined "holes" in an array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";
let fLen = fruits.length;
let text = "";
for (i = 0; i < fLen; i++) {
text += fruits[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Viele Programmiersprachen unterstützen Arrays mit benannten Indizes.
Arrays mit benannten Indizes werden als assoziativ bezeichnet Arrays (oder Hashes).
JavaScript unterstützt Arrays mit benannten Indizes nicht.
In JavaScript verwenden Arrays immer nummerierte Indizes.
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>
WARNUNG!!
Wenn Sie benannte Indizes verwenden, definiert JavaScript das Array in ein Objekt um.
Danach führen einige Array-Methoden und -Eigenschaften zu falschen Ergebnissen Ergebnisse.
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>
<p id="demo"></p>
<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>
In JavaScript verwenden Arrays nummerierte Indizes.
In JavaScript verwenden Objekte benannte Indizes.
Arrays sind eine besondere Art von Objekten mit nummerierten Indizes.
JavaScript unterstützt keine assoziativen Arrays.
Sie sollten objects verwenden, wenn Sie die Elementnamen verwenden möchten Zeichenfolgen (Text).
Sie sollten Arrays verwenden, wenn die Elementnamen wie folgt aussehen sollen Zahlen.
JavaScript verfügt über einen integrierten Array-Konstruktor new Array()
.
Aber Sie können stattdessen getrost []
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];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Creating an Array</h2>
<p>Avoid using new Array(). Use [] instead.</p>
<p id="demo"></p>
<script>
//const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
Das Schlüsselwort new
kann zu unerwarteten Ergebnissen führen:
// Create an array with three elements:
const points = new Array(40, 100, 1);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Create an Array with three elements.</p>
<p id="demo"></p>
<script>
var points = new Array(40, 100, 1);
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
// Create an array with two elements:
const points = new Array(40, 100);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Create an Array with two elements.</p>
<p id="demo"></p>
<script>
var points = new Array(40, 100);
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
// Create an array with one element ???
const points = new Array(40);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Avoid using new Array().</p>
<p id="demo"></p>
<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
const points = [40];
ist nicht dasselbe wie:
const points = new Array(40);
// Create an array with one element:
const points = [40];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Create an Array with one element.</p>
<p id="demo"></p>
<script>
var points = [40];
document.getElementById("demo").innerHTML = points;
</script>
</body>
</html>
// Create an array with 40 undefined elements:
const points = new Array(40);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>Avoid using new Array().</p>
<p id="demo"></p>
<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];
</script>
</body>
</html>
Eine häufig gestellte Frage lautet: Woher weiß ich, ob eine Variable ein Array ist?
Das Problem besteht darin, dass der JavaScript-Operator typeof
zurückgibt „Objekt
“:
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator, when used on an array, returns object:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>
</body>
</html>
Der Operator „typeof“ gibt ein Objekt zurück, da ein JavaScript-Array ein ist Objekt.
Um dieses Problem zu lösen, hat ECMAScript 5 (JavaScript 2009) eine neue Methode Array.isArray()
definiert:
Array.isArray(fruits);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>
</body>
</html>
Der Operator instanceof
gibt true zurück, wenn ein Objekt erstellt wird von einem gegebenen Konstruktor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The instanceof Operator</h2>
<p>The instanceof operator returns true when used on an array:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>
</body>
</html>
Eine vollständige Array-Referenz finden Sie in unserem:
Vollständige JavaScript-Array-Referenz.
Die Referenz enthält Beschreibungen und Beispiele aller Arrays Eigenschaften und Methoden.