JavaScript-Array-Methoden


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

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()

Länge des JavaScript-Arrays

Die Eigenschaft length gibt die Länge (Größe) eines Arrays zurück:

Beispiel

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>

JavaScript-Array toString()

Die JavaScript-Methode toString() konvertiert ein Array in ein Zeichenfolge von (durch Kommas getrennten) Array-Werten.

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

Ergebnis :

Banana,Orange,Apple,Mango

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>

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:

Beispiel

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

Ergebnis :

Banana * Orange * Apple * Mango

Probieren 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>

Knallen und Drücken

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.



JavaScript-Array pop()

Die Methode pop() entfernt das letzte Element aus einem Array:

Beispiel

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:

Beispiel

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>

JavaScript-Array push()

Die Methode push() fügt einem Array (am Ende) ein neues Element hinzu:

Beispiel

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:

Beispiel

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>

Verschiebende Elemente

Das Verschieben ist gleichbedeutend mit dem Knallen, aber das Arbeiten am ersten Element ist nicht dasselbe das Letzte.


JavaScript-Array shift()

Die Methode shift() entfernt das erste Array-Element und „verschiebt“ alles andere Elemente auf einen niedrigeren Index.

Beispiel

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:

Beispiel

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>

JavaScript-Array unshift()

Die Methode unshift() fügt einem Array (am Anfang) ein neues Element hinzu und „hebt die Verschiebung auf“ ältere Elemente:

Beispiel

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:

Beispiel

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>

Elemente verändern

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 ...

Beispiel

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>

Länge des JavaScript-Arrays

Die Eigenschaft length bietet eine einfache Möglichkeit, ein neues Element an ein Array anzuhängen:

Beispiel

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>

JavaScript-Array delete()

Warnung !

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().

Beispiel

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>

Arrays zusammenführen (verketten).

Die Methode concat() erstellt ein neues Array durch Zusammenführen (Verketten). vorhandene Arrays:

Beispiel (Zusammenführen zweier 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:

Beispiel (Zusammenführen von drei Arrays)

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:

Beispiel (Zusammenführen eines Arrays mit Werten)

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>

Ein Array reduzieren

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.

Beispiel

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>

Browser-Unterstützung

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

Spleißen und Schneiden von Arrays

Die Methode splice() fügt einem Array neue Elemente hinzu.

Die Methode slice() schneidet einen Teil eines Arrays aus.


JavaScript-Array splice()

Mit der Methode splice() können neue Elemente zu einem Array hinzugefügt werden:

Beispiel

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:

Beispiel

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>

Verwenden von splice() zum Entfernen von Elementen

Mit geschickter Parametereinstellung können Sie mit splice() Elemente entfernen, ohne das Programm zu verlassen „Löcher“ im Array:

Beispiel

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.


JavaScript-Array 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"):

Beispiel

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>

Notiz

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"):

Beispiel

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.

Beispiel

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.

Beispiel

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>

Automatisches 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:

Beispiel

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>

Beispiel

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>

Notiz

Alle JavaScript-Objekte verfügen über eine toString()-Methode.


Ermitteln von Maximal- und Minimalwerten in einem Array

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.


Sortieren von Arrays

Das Sortieren von Arrays wird im nächsten Kapitel dieses Tutorials behandelt.

Vollständige Array-Referenz

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.