Array
Ein Array ist eine Variable, in der mehrere Werte stehen können . Statt dutzende Variablenamen zu definieren und ihnen Werte zuzuweisen (unten im Beispiel),
let car1 = „Saab“;
let car2 = „Volvo“;
let car3 = „BMW“
kann ein Array erstellt werden in dem beliebige viele Wert abgelegt werden können. Arrays stehen immer in eckigen Klammern und sind mit einem Komma getrennt. Unten ein Beispiel in dem drei Nummern in einem Array stehen. Die ersten Zahl 179 ist an erster Stelle, da aber bei 0 angefangen wird zu zählen wird sie mit let car = arr[0] ausgelesen und in der Variabel car gespeichert.
Aufbau eines Array
const arr = [ 179, 66, 176 ]
▲ ▲ ▲
│ │ │
0 1 2
Die Werte der Elemente kann von einen beliebigen Datentyp sein (mehr dazu unter JS-DataTypes).
<!DOCTYPE html>
<html>
<body>
<h4>Ein Array auslesen</h4>
<p id="demo"></p>
<script>
function readOut(){
const fruits = ["Apple", "Banana", "Cherry", "Orange", "Kiwi"];
document.getElementById("demo").innerHTML = fruits;
}
</script>
<button class="myButton" type="button" onclick="readOut()">Klick</button>
</body>
</html>
Ein Array auslesen
Das „length“-Methode eines Arrays gibt die Länge eines Arrays zurück (die Anzahl der Array-Elemente).
<!DOCTYPE html>
<html>
<body>
<h4>Die Array.length-Methode</h4>
<p id="demo_1"></p>
<script>
function lengthArray(){
const fruits = ["Banana", "Orange", "Apple", "Kiwi","Mango", "Banana"];
let arrLength = fruits.length;
document.getElementById("demo_1").innerHTML = arrLength;
}
</script>
<button class="myButton" type="button" onclick="lengthArray()">Klick</button>
</body>
</html>
Die Array.length-Methode
Um das letzte Element eines Array zu löschen verwende die Methode pop().
<!DOCTYPE html>
<html>
<body>
<h4>Die pop().-Methode um denn letzten Wert eines Array zu löschen</h4>
<p id="demo_3"></p>
<p id="demo_4"></p>
<script>
function removeLastItem(){
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo_3").innerHTML = fruits;
fruits.pop();
document.getElementById("demo_4").innerHTML = fruits;
}
</script>
<button class="myButton" type="button" onclick="removeLastItem()">Klick</button>
</body>
</html>
Die pop().-Methode um denn letzten Wert eines Array zu löschen
Die „push“-Methode fügt am Ende des Array ein Element hinzu.
<!DOCTYPE html>
<html>
<body>
<h4>Die push()-Methode fügt einen Wert am Ende des Array hinzu</h4>
<p id="demo_5"></p>
<p id="demo_6"></p>
<script>
function pushItem(){
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo_5").innerHTML = fruits;
fruits.push("Kiwi");
document.getElementById("demo_6").innerHTML = fruits;
}
</script>
<button class="myButton" type="button" onclick="pushItem()">Klick</button>
</body>
</html>
Die push()-Methode fügt einen Wert am Ende des Array hinzu
Die „shift“-Methode entfernt das erste Element eines Array und folgenden Element rücken um ein Index-Position niedriger nach.
<!DOCTYPE html>
<html>
<body>
<h4>Die shift()-Methode löscht denn ersten Wert eines Array</h4>
<p id="demo_7"></p>
<p id="demo_8"></p>
<script>
function firstItemRemove(){
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo_7").innerHTML = fruits;
fruits.shift();
document.getElementById("demo_8").innerHTML = fruits;
}
</script>
<button class="myButton" type="button" onclick="firstItemRemove()">Klick</button>
</body>
</html>
Die shift()-Methode löscht denn ersten Wert eines Array
Die „unshift“-Methode fügt ein neues Element an den Anfang eines Array.
<!DOCTYPE html>
<html>
<body>
<h4>Die unshift()-Methode fügt am Array-Anfang einen Wert hinzu</h4>
<p id="demo_9"></p>
<p id="demo_10"></p>
<script>
function firstItemInsert(){
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo_9").innerHTML = fruits;
fruits.unshift("Lemon");
document.getElementById("demo_10").innerHTML = fruits;
}
</script>
<button class="myButton" type="button" onclick="firstItemInsert()">Klick</button>
</body>
</html>
Die unshift()-Methode fügt am Array-Anfang einen Wert hinzu
Die „sort“-Methode sortiert die Elemente alphabetisch.
<!DOCTYPE html>
<html>
<body>
<h4>Die sort()-Methode sortiert die Strings in einem Array alphabetisch</h4>
<p id="demo_11"></p>
<p id="demo_12"></p>
<script>
function sortArr(){
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo_11").innerHTML = fruits;
fruits.sort();
document.getElementById("demo_12").innerHTML = fruits;
}
</script>
<button class="myButton" type="button" onclick="sortArr()">Klick</button>
</body>
</html>
Die sort()-Methode sortiert die Strings in einem Array alphabetisch
Mit der „sort“-Methode wird das sortieren von Nummern nicht funktionieren, denn „25“ ist grösser als „100“( weil 2 grösser ist als 1). Um das zu umgehen verwende eine „Vergleichs-Funktion“. Unten werden Zahlen aufsteigend sortiert.
<!DOCTYPE html>
<html>
<body>
<h4>Die sort()-Methode mit Vergleich-Funktion zum sortieren von Zahlen aufsteigend</h4>
<p id="demo_13"></p>
<script>
function lowestNumber(){
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo_13").innerHTML = points;
}
</script>
<button class="myButton" type="button" onclick="lowestNumber()">Klick</button>
</body>
</html>
Die sort()-Methode mit Vergleich-Funktion zum sortieren von Zahlen aufsteigend
Mit der „sort“-Methode wird das sortieren von Nummern nicht funktionieren, denn „25“ ist grösser als „100“( weil 2 grösser ist als 1). Um das zu umgehen verwende eine „Vergleichs-Funktion“. Unten werden Zahlen absteigend sortiert.
<!DOCTYPE html>
<html>
<body>
<h4>Die sort()-Methode mit Vergleich-Funktion zum sortieren von Zahlen absteigend</h4>
<p id="demo_14"></p>
<script>
function highestNumber(){
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo_14").innerHTML = points;
}
</script>
<button class="myButton" type="button" onclick="highestNumber()">Klick</button>
</body>
</html>