Arrays
Bei den primitiven Datentypen kann nur ein Wert zugewiesen werden. In einem Array hat man die Möglichkeit mehrere Werte zu definieren. Will man beispielsweise die Waren einer Einkaufsliste hinterlegen ist ein Array die ideale Wahl. In einem Kartenspiel könnte man die einzelnen Karten in einem Array hinterlegen. Die einzelnen Werte können dann über einen Index aufgerufen werden.
Ein Array ist quasi eine Liste von Werten, die über einen Indexwert identifiziert oder definiert werden. Es gibt einige Arrayfunktionen. Damit kann man Werte löschen, hinzufügen oder sortieren.
Der Index beginnt bei 0;
Man kann ein Array auf verschiedenen Arten initialisieren. Die gängiste Art ist die Array-Literal-Schreibweise.
var karte = [];
Die einzelnen Werte werden mit Komma getrennt aufgeführt. Das wäre auch in einer Zeile möglich.
var karte = [ "Bube", "Dame", "König", "As" ];
Eine weitere Möglichkeit ein Array zu definieren ist mit dem Schlüsselwort new und dem Aufruf der Konstruktorfunktion. Achtung kein Leerzeichen zwischen Array und Klammer.
var karte = new Array();
Auch hier werden Die einzelnen Werte mit Komma getrennt aufgeführt.
var karte = new Array( "Bube", "Dame", "König", "As" );
Indexbasierter Aufbau
Arrays haben einen Indexbasierten Aufbau, anders ausgedrückt: jeder Wert wird an einer bestimmten Position gespeichert, die man über einen Index aufrufen kann. Der erste Index ist 0.
karte[0] // "Bube"
karte[1] //"Dame"
Man kann über den Index auch Werte zuweisen.
karte[4] = "Herz";
karte[5] = "Karo";
Der höchste Index bestimmt die Länge des Arrays oder anders ausgedrückt die Anzahl der Elemente entspricht dem höchsten Index +1.
Über die Array Eigenschaft length kann man die Anzahl eines Arrays abfragen.
karte.length // Ausgabe 4
Hat man im Nachhinein einen Index zugewiesen der höher ist als der letzte Index plus 1, werden dazwischen Elemente erzeugt, jeweils mit dem Wert undefined.
let mitglieder = [ "Jimi Hendrix", "Theo Lingen", "Willi Brandt" ] mitglieder[6] = "Uwe Seeler";
Ergebnis
mitglieder[0] ="Jimi Hendrix"; mitglieder[1] ="Theo Lingen"; mitglieder[2] ="Willi Brandt"; mitglieder[3] =undefined; mitglieder[4] =undefined; mitglieder[5] =undefined; mitglieder[6] ="Uwe Seeler";
Die Werte in einem Array können von unterschiedlichem Datentyp sein. So können Strings, Number und Boolsche Werte in einem Array enthalten sein.
let mitglied1 = ["Walter", "Weller", 1948, true];
Mehrdimensionales Array
Der Wert eines Arrays kann ein weiteres Array sein. Auf die Artkann man ein mehrdimensionales Array erstellen. Mit einem mehrdimensionalen Array kann man datenbankähnliche Strukturen erzeugen.
let jaeger = [
['Walter','Hirsch'],
['Friedel','Dachs']
];
jaeger[0][0] == 'Walter';
jaeger[0][1] == 'Hirsch';
jaeger[1][0] == 'Friedel';
jaeger[1][1] == 'Dachs';
Eine andere Möglichkeit ein mehrdimensionales Array zu erzeugen:
let team = new Array(); team[0] = ["Walter", "Berg", "Waldheim" ]; team[1] = ["Gisela", "Gans", "Bauerndorf"]; team[2] = ["Frieda", "Frieden", "Friedrichsruh"]; team[0][2]; //Waldheim team[1][0]; //Gisela team[2][1]; //Frieden
In den obigen Beispielen wurden zweidimensionale Arrays erzeugt. Es ist natürlich auch möglich das Prinzip weiter zu verschachteln.
Eigenschaften & Methoden des Arrays
array.length
Wenn man ein Array instanziiert kann man auch die Anzahl der Elemente angeben.
var tage = new Array(); var tage = new Array(7);
Mit der Eigenschaft length kann man die Anzahl der Arrayelemente erfahren. Die Anzahl ist um 1 höher als der Indexwert des letzten Elementes. Es kann auch Arrayelemente mit undefinierten Inhalt geben, auch die werden gezählt. var tage = new Array(7); hat 7 Elemente mit undefinierten Inhalt.
tage.length;
array.push()
Mit push() werden Elemente am Ende des Arrays angefügt. Der Rückgabewert ist die geänderte Länge des Arrays.
tage.push("Wolkentag", "Regentag");
array.unshift()
Mit unshift() werden Elemente am Anfang des Arrays angefügt. Der Rückgabewert ist die geänderte Länge des Arrays.
tage.unshift("Wolkentag", "Regentag");
array.shift()
Mit shift() wird das erste Element gelöscht. Der Rückgabewert ist der Wert des gelöschen Elements.
tage.shift();
array.pop()
Mit pop() wird das letzte Element gelöscht. Der Rückgabewert ist der Wert des gelöschen Elements.
tage.pop();
array.splice()
Mit splice(startnummer, anzahl) kann man gezielt Elemente innerhalb des Arrays löschen. Die beiden Parameter sind Startindex und Anzahl der zu löschenden Elemente. Im folgenden Beispiel werden die Wochentage Dienstag und Mittwoch gelöscht. Die anderen Elemente rücken dann nach. Das bedeutet, Donnerstag liegt auf index 1, Freitag auf 2 etc. Rückgabewerte sind die gelöschten Elemente.
tage.splice(1,2);
Man kann mit splice() auch Elemente löschen und durch andere Elemente ersetzen. Indem man die Werte der neuen Elemente als Parameter hinter den beiden ersten Parametern aufführt. So werden im folgenden Beispiel die Wochentage Mittwoch, Donnerstag, Freitag durch die englischen Wochentage ersetzt.
tage.splice(2,3, "Wednesday", "Thursday", "Friday");
Man kann mit Splice auch Elemente dazwischen einfügen ohne Elemente zu löschen. Hier werden ab Index 3 (nach Mittwoch) die drei weiteren Elemente eingefügt. Kein Element wird gelöscht die nachfolgenden werden nach hinten verschoben.
tage.splice(3,0, "Mittwoch Morgens", "Mittwoch Mittag", "Mittwoch Abend");
array.reverse()
Mit reverse() wird die Reihenfolge der Elemente umgekehrt.
tage.reverse();
string.split()
string.split() ist keine Array Funktion, aber man kann mit dieser Funktion die Werte eines Strings, die mit einem Trennzeichen voneinander getrennt sind zu einem Array zusammensetzen. Als Parameter wird das Trennzeichen erwartet. Wenn man das Argument nicht zuweist, ist das Komma das Trennzeichen.
Achtung Leerzeichen hinter dem Trennzeichen nur dann einfügen, wenn eins vorhanden ist. Ein Leerzeichen ist auch ein Zeichen.
let moebelString = "Stuhl,Tisch,Schrank";
let moebel = moebelString.split(",");
array.concat()
Mit concat() werden die Elemente von 2 Arrays zu einem neuen Array zusammengefügt:
let moebel = new Array("Stuhl", "Tisch" , "Schrank");
let geschirr = new Array ("Teller", "Tasse", "Schüssel");
let haushalt = moebel.concat(geschirr);
array.join()
Mit join() werden die Elemente eines Arrays zu einem String zusammengefügt. Als Argument gibt man das Trennzeichen an. Wenn kein Trennzeichen angegeben wird, wird das Komma als Trennzeichen genommen.
var moebel = new Array("Stuhl", "Tisch" , "Schrank");
var moebelString = moebel.join("...");
array.toString()
Auch mit array.toString() werden die Elemente eines Arrays zu einem String zusammengefügt. Als Trennzeichen wird das Komma eingesetzt.
var moebel = new Array("Stuhl", "Tisch" , "Schrank");
var moebelString = moebel.toString();
indexOf() & endIndexOf()
Mittels indexOf(Element) kann man nach dem Index eines Elements suchen. Wie viele andere Array Methoden kann man diese auch in Strings nutzen. Wenn ein Element in einem Array mehrmals vorkommt, kann man mit endIndexOf(), auch nach dem letzten Vorkommen dieses Elements suchen und sich dessen Index ausgeben lassen.
let tiere =["Pferd", "Huhn", "Ente"];
console.log(tiere.indexOf("Huhn")); //1
In einem Click-Event den Array-Index des aufrufenden Elements finden
In diesem Javascript Beispiel geht es darum die Id eines Array-Elements innerhalb eines Eventlisteners zu ermitteln. Den Arrayelementen werden ein Eventlistener mit click-type zugewiesen. Wie kann man in der Funktion, welche aufgerufen wird, ermitteln welchen Index das aufrufende Array Element hat.
Im folgendem Beispiel müssen im Quelltext einige <button> Elemente vorhanden sein.
let buttons = document.querySelectorAll( "button" );
for ( var i = 0; i < buttons.length; i++ )
{
buttons[ i ].idNr = i;
buttons[ i ].addEventListener( "click", showId );
}
function showId ( evt )
{
console.log( evt.currentTarget.idNr );
}
Hier folgt eine etwas elegantere Möglichkeit.
let boxen = document.getElementsByClassName( "optionBox" );
for ( var i = 0; i < boxen.length; i++ )
{
boxen[ i ].addEventListener( "click", checkId );
}
function checkId ( evt )
{
let currentId = Array.prototype.indexOf.call( boxen, evt.currentTarget ) ;
console.log(currentId);
}
Ein- und ausblenden von Tabellenreihen
In folgendem Beispiel wird die jeweils darunterliegende Tabellenreihe angezeigt, wenn eine der ungeraden Tabellenreihen angeklickt wird.
Es gibt 2 Arrays. Ein Array thema für die Tabellenreihen mit ungerader Zahl und ein Array info für die Tabellenreihen mit grader Zahl.
Die Tabellenreihen mit gerader Zahl (Array thema) rufen über einen EventListener eine Funktion auf. Die Tabellenreihe darunter, welche im Array info liegt , hat den gleichen Index. Aber welches ist der Index, des Elements, welches die Eventfunktion aufruft? Das wird mit dieser Zeile ermittelt:
Array.prototype.indexOf.call( thema, evt.currentTarget )
Das Ein- und Ausblenden wird über eine toggle Funktion erreicht. Diese weist dem Element eine Klasse zu oder wenn sie schon zugewiesen wurde, wird sie wieder entfernt. Achtung man muss aufpassen, dass die Spezifität des Klassenselektors nicht zu klein ist.
2 Arrays vergleichen
Siehe auch Vergleichsfunktion compare
Folgende Funktion erwartet 2 Arrays. Wenn beide Arrays identisch sind, gibt die Funktion true zurück.
function checkArray(ar1, ar2){
for (var i = 0; i < ar1.length; i++) {
if (ar1[i] != ar2[i]) {
return false;
}
}
return true;
}
Im folgenden Funktionsaufruf muss es ein aepfel und eine birnen Array geben.
var allesEineSosse = checkArray(aepfel, birnen);
Arrays sortieren
siehe auch diese Erklärung in deutsch auf brain4.de
Mittels der sort() Methode kann man ein Array sortieren. Standardmäßig wird alphabetisch sortiert. Will man numerisch sortieren benötigt man eine Vergleichsfunktion.
<script>
let tiere = ["Elefant", "Affe", "Tiger", "Löwe", "Zebra", "Hai", "Bison", "Katze", "Hund"];
tiere.sort();
let ausgabe = "";
for(let i= 0; i < tiere.length; i++){
ausgabe += tiere[i] +"
";
}
document.getElementById("tierShow").innerHTML = ausgabe;
</script>
Wenn man auf diese Art Zahlenwerte sortiert, erscheint 100 vor 20, weil alphabtisch die 1 vor der 2 steht.
Numerisch sortieren
Man kann der sort() Funktion als Argument eine Vergleichsfunktion übergeben. Die Vergleichsfunktion sollte einen von 3 möglichen Werten zurückgeben.
- negativer Wert besagt, dass der erste Wert kleiner ist als der zweite
- 0 besagt beide Wert sind gleich
- positiver Wert besagt, dass der erste Wert größer ist als der zweite
Mit folgender Funktion wird das erreicht.
function compare(a,b){
return a-b;
}
Hier ein paar Beispiele
console.log(compare(30, 10)); //20 console.log(compare(5, 30)); //-25 console.log(compare(5, 5)); //0
Diese Vergleichsfunktion wird paarweise für die Werte des Arrays innerhalb der sort() Funktion aufgerufen. Der Rückgabewert von compare bestimmt, welcher der beiden Werte größer ist als der andere.
let zahlen = [20, 2, 11, 6, 4, 14, 10, 9, 15, 7, 21];
function compare(a,b){
return a-b;
}
zahlen.sort(compare);
console.log(zahlen);
Man bedenke dass die Vergleichsfunktion ohne Klammern übergeben wird. Würde man Sie mit Klammern einfügen, würde die Funktion ausgeführt und er Rückgabewert übergeben. Ohne Klammern ist die Funktion selbst das Argument. Es ist das gleiche wie folgende Schreibweise.
zahlen.sort(function(a,b){return a - b;});
Eine absteigende Reihenfolge erreicht man mit.
function compare(a,b){
return b - a;
}
Mehrdimensionales Array sortieren
Um ein mehrdimensionales Array zu sortieren, braucht man lediglich die Vergleichsfunktion etwas abzuändern. Dort greift man nicht direkt auf den Wert des Array Elements zu, sondern auf ein verschachteltes Element. In diesem Fall auf das darinliegende erste Element.
function sortFunction(a, b) {
return a[0] - b[0]
}
let sins = [];
sins[0] = [2, 'Plastik'];
sins[1] = [5, 'Überbevölkerung'];
sins[2] = [1, 'Klimakrise'];
sins[3] = [3, 'Artensterben'];
sins[4] = [9, 'Tierquälerei'];
sins[5] = [4, 'Überfischung'];
sins[6] = [7, 'verseuchte Böden'];
sins[7] = [6, 'Gifte'];
sins[8] = [8, 'radioaktiver Müll'];
sins.sort(sortFunction);
function sortFunction(a, b) {
return a[0] - b[0]
}
Alphabetisch mit Sort Funktion
Hier wird ein mehrdimensionales Array nach dem jeweils ersten Element alphabetisch sortiert.
let myArray = [["Bär",1],["Affe", 3],["Chamäleon",4]];
function sortAlphabetical(a, b) {
return a[0] > b[0] ? 1 : -1;
}
myArray.sort(sortAlphabetical);
Hier noch ein etwas komplexeres Beispiel aus der Praxis.
Elemente innerhalb des Arrays kopieren / copyWithin()
Mit Javascript Version 6 ist die Methode copyWithin() hinzugekommen. Damit kann man Elemente eines Arrays an eine andere Stelle des gleichen Arrays kopieren. Die vorhandenen Elemente werden durch die verschobenen Elemente ersetzt. Die Elemente werden kopiert nicht ausgeschnitten und es werden auch keine Elemente im Array hinzugefügt.
Die Methode hat 3 Parameter
copyWithin(
- Der Index an den die Elemente eingefügt werden sollen ,
- Der Index ab dem die Elemente kopiert werden sollen ,
- Der Index an dem das Kopieren endet. Es bedeutet nicht die Anzahl der Elemente, die kopiert werden. Also muss der dritte Parameter immer höher sein als der zweite. Der Parameter ist optional. Standard ist die Länge des Arrays.
)
let spiele = [ "Schach", "Halma", "Mühle", "Dame", "Stratego", "Mensch ärger dich nicht" ] spiele.copyWithin(2,0,2);
Ergebnis
spiele = ['Schach', 'Halma', 'Schach', 'Halma', 'Stratego', 'Mensch ärger dich nicht' ]
Die Parameter:
- 2 ab dem dritten Element "Stratego" wird etwas eingefügt
- 0 ab dem ersten Element wird etwas kopiert "Schach"
- 2 es wird bis zum dritten Element kopiert "Schach, Halma"
Also werden "Dame, Stratego" durch "Schach, Halma" ersetzt. Würde man den dritten Parameter weglassen, sähle das Array so aus: SchachHalmaSchachHalmaMühleDame
