Die Methoden werden in der Reihenfolge aufgelistet, in der sie auf dieser Tutorial-Seite erscheinen
Array length
Array toString()
Array pop()
Array push()
Array shift()
Array unshift()
Array join()
Array delete()
Array concat()
Array flat()
Array splice()
Array slice()
Die Eigenschaft length
gibt die Länge (Größe) eines Arrays zurück:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = 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>
toString()
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>
Die Methode join()
fügt außerdem alle Array-Elemente zu einem String zusammen.
Es verhält sich genau wie toString()
, aber zusätzlich können Sie das Trennzeichen angeben:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Ergebnis :
Banana * Orange * Apple * MangoProbieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The join() Method</h2>
<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</body>
</html>
Wenn Sie mit Arrays arbeiten, ist es einfach, Elemente zu entfernen und hinzuzufügen neue Elemente.
Das ist Knallen und Drücken:
Elemente aus einem Array herausen oder verschieben Elemente in ein Array.
pop()
Die Methode pop()
entfernt das letzte Element aus einem Array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>
<p>The pop() method removes the last element from an array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Die Methode pop()
gibt den Wert zurück, der „herausgesprungen“ wurde:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>
<p>The pop() method returns the value that was "popped out":</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
push()
Die Methode push()
fügt einem Array (am Ende) ein neues Element hinzu:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
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>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Die Methode push()
gibt die neue Array-Länge zurück:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>
<p>The push() method returns the new array length:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.push("Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Das Verschieben ist gleichbedeutend mit dem Knallen, aber das Arbeiten am ersten Element ist nicht dasselbe das Letzte.
shift()
Die Methode shift()
entfernt das erste Array-Element und „verschiebt“ alles andere Elemente auf einen niedrigeren Index.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method removes the first element of an array (and "shifts" the other elements to the left):</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Die Methode shift()
gibt den Wert zurück, der „herausgeschoben“ wurde:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The shift() Method</h2>
<p>The shift() method returns the element that was shifted out.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
unshift()
Die Methode unshift()
fügt einem Array (am Anfang) ein neues Element hinzu und „hebt die Verschiebung auf“ ältere Elemente:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The unshift() Method</h2>
<p>The unshift() method adds new elements to the beginning of an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Die Methode unshift()
gibt die neue Array-Länge zurück:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The unshift() Method</h2>
<p>The unshift() method returns the length of the new array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Der Zugriff auf Array-Elemente erfolgt über ihre Indexnummer:
Array-Indizes beginnen mit 0:
[0] ist das erste Array-Element
[1] ist das zweite
[2] ist das dritte ...
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Indexing</h2>
<p>Array elements are accessed using their index number:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Die Eigenschaft length
bietet eine einfache Möglichkeit, ein neues Element an ein Array anzuhängen:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property provides an easy way to append new elements to an array without using the push() method:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[fruits.length] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
delete()
Array-Elemente können mit dem JavaScript-Operator delete
gelöscht werden.
Die Verwendung von delete
hinterlässt undefinierte
Lücken im Array.
Verwenden Sie stattdessen pop() oder shift().
const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The delete Method</h2>
<p>Deleting elements leaves undefined holes in an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>
</body>
</html>
Die Methode concat()
erstellt ein neues Array durch Zusammenführen (Verketten). vorhandene Arrays:
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>
<p>The concat() method merges (concatenates) arrays:</p>
<p id="demo"></p>
<script>
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Die Methode concat()
ändert die vorhandenen Arrays nicht. Es wird immer ein neues Array zurückgegeben.
Die Methode concat()
kann eine beliebige Anzahl von Array-Argumenten annehmen:
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>
<p>The concat() method merges (concatenates) arrays:</p>
<p id="demo"></p>
<script>
const array1 = ["Cecilie", "Lone"];
const array2 = ["Emil", "Tobias", "Linus"];
const array3 = ["Robin", "Morgan"];
const myChildren = array1.concat(array2, array3);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Die Methode concat()
kann auch Zeichenfolgen als Argumente verwenden:
const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>
<p>The concat() method can merge string values to arrays:</p>
<p id="demo"></p>
<script>
const myArray = ["Emil", "Tobias", "Linus"];
const myChildren = myArray.concat("Peter");
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Beim Reduzieren eines Arrays wird die Dimensionalität eines Arrays reduziert.
Die flat()-Methode erstellt ein neues Array mit Unterarray-Elementen, die bis zu einer bestimmten Tiefe verkettet sind.
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>
<p id="demo"></p>
<script>
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
Das JavaScript-Array flat()
wird seit Januar 2020 in allen modernen Browsern unterstützt:
Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
Die Methode splice()
fügt einem Array neue Elemente hinzu.
Die Methode slice()
schneidet einen Teil eines Arrays aus.
splice()
Mit der Methode splice()
können neue Elemente zu einem Array hinzugefügt werden:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>
<p>The splice() method adds new elements to an array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Der erste Parameter (2) definiert die Position, wo neue Elemente sein sollen hinzugefügt (eingefügt).
Der zweite Parameter (0) definiert, wie viele Elemente es sein sollen entfernt.
Die restlichen Parameter („Lemon“, „Kiwi“) definieren die neuen Elemente hinzugefügt.
Die Methode splice()
gibt ein Array mit den gelöschten Elementen zurück:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>
<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any):</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
let removed = fruits.splice(2, 2, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed;
</script>
</body>
</html>
splice()
zum Entfernen von ElementenMit geschickter Parametereinstellung können Sie mit splice()
Elemente entfernen, ohne das Programm zu verlassen „Löcher“ im Array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The splice() Method</h2>
<p>The splice() methods can be used to remove array elements:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.splice(0, 1);
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Der erste Parameter (0) definiert die Position, an der neue Elemente sein sollen hinzugefügt (eingefügt).
Der zweite Parameter (1) definiert, wie viele Elemente es sein sollen entfernt.
Die restlichen Parameter werden weggelassen. Es werden keine neuen Elemente hinzugefügt.
slice()
Die Methode slice()
schneidet einen Teil eines Arrays in einen neuen aus Array.
In diesem Beispiel wird ein Teil eines Arrays ab Array-Element 1 herausgeschnitten ("Orange"):
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 1 ("Orange"):</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Die Methode slice()
erstellt ein neues Array.
Die Methode slice()
entfernt keine Elemente aus dem Quellarray.
In diesem Beispiel wird ein Teil eines Arrays ab Array-Element 3 herausgeschnitten ("Apfel"):
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 3 ("Apple")</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Die Methode slice()
kann zwei Argumente wie slice(1, 3)
annehmen.
Die Methode wählt dann Elemente vom Startargument bis zu (jedoch nicht) aus einschließlich) des Endarguments.
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1, 3);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Wenn das Endargument weggelassen wird, wie in den ersten Beispielen, wird der slice()
Die Methode schneidet den Rest des Arrays aus.
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The slice() Method</h2>
<p>Slice out a part of an array starting from array element 2 ("Lemon"):</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
toString()
JavaScript konvertiert ein Array automatisch in eine durch Kommas getrennte Zeichenfolge, wenn a primitiver Wert wird erwartet.
Dies ist immer der Fall, wenn Sie versuchen, ein Array auszugeben.
Diese beiden Beispiele führen zum gleichen Ergebnis:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Probieren 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>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
Alle JavaScript-Objekte verfügen über eine toString()-Methode.
Es gibt keine eingebauten Funktionen zum Finden des Höchsten oder niedrigster Wert in einem JavaScript-Array.
Wie Sie dieses Problem lösen, erfahren Sie im nächsten Abschnitt Kapitel dieses Tutorials.
Das Sortieren von Arrays wird im nächsten Kapitel dieses Tutorials behandelt.
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.