 Was ist ein Array? Basiswissen 02
In meinen Beispielen spreche ich immer wieder von Arrays wenn es darum geht, Informationen als 'Datenvorrat' bereit zu halten. Auf dieser 2. Seite möchte ich die Grundlagen erweitern.
|
|
Basiswissen Array - Seite 02
Auf der  Erklärungsseite 1 hatte ich ein Register mit dem Namen 'Schrank' erzeugt das bereits 6 'gefüllte Schubladen' hatte. Die Texte "Nägel", "Schrauben", "Dübel", "Knöpfe", "Haken" und "Muttern" hatte ich in die Schubladen gelegt.
Nun wollen wir uns ein wenig fachmännischer ausdrücken und einige Funktionen kennen lernen, die uns die Arbeit mit Arrays erleichtern.
Array erzeugen
Sie können einen Array erzeugen indem sie dem System mitteilen, dass sie ein neues Objekt vom Typ Array erstellen wollen. Den Namen für dieses Array bestimmen sie selbst. Dabei können sie schon vorab darüber nachdenken, wie viele Elemente sie benötigen oder auch bereits Werte für die Elemente des Arrays festlegen ('etwas in die Schubladen hineinlegen'). Der Fachmann sagt dazu: Dem Array Werte zuweisen.
a neuen Array 'Monate' erzeugen - ohne weitere Angaben
Monate = new Array();
Ein neues, vorerst leeres Register mit dem Namen 'Monate' wurde erzeugt.
b neuen Array 'Monate' erzeugen - Anzahl der Elemente festlegen
Monate = new Array(12);
Ein neues, vorerst leeres Register mit dem Namen 'Monate' wurde erzeugt. Das Register hat (simpel ausgedrückt) 12 'leere Schubladen'. Ein Array mit 12 Elementen wurde erzeugt. Den Elementen wurden noch keine Werte zugewiesen.
c neuen Array 'Spielkarten' erzeugen - Elemente zuweisen
Spielkarten = new Array("Pik7", "Pik8", "Pik9", "Pik10", "PikBauer");
Ein neues Register mit dem Namen 'Spielkarten' wurde erzeugt. Das Register hat (simpel ausgedrückt) bereits 5 'gefüllte Schubladen'. Bei der Definition des Arrays wurden 5 Elemente erzeugt und bereits jeweils ein Wert zugewiesen. Hier wurde Text in einem Array abgelegt.
Array 'Spielkarten'
| Index-Nummer |
0 |
1 |
2 |
3 |
4 |
| Elemente |
"Pik7" |
"Pik8" |
"Pik9" |
"Pik10" |
"PikBauer" |
d neuen Array 'Primzahlen' erzeugen - Elemente zuweisen
Primzahlen = new Array(2, 3, 5, 7, , 13);
Ein neues Register mit dem Namen 'Primzahlen' wurde erzeugt. Das Register hat 6 Elemente. Bei der Definition des Arrays wurden bereits 5 Werte zugewiesen (simpel ausgedrückt bereits 5 'Schubladen gefüllt'). Eine Schublade blieb leer. Hier wurden Zahlen in einem Array abgelegt. Die Werte stehen nicht in Anführungszeichen!
Array 'Primzahlen'
| Index-Nummer |
0 |
1 |
2 |
3 |
4 |
5 |
| Elemente |
2 |
3 |
5 |
7 |
|
13 |
bestimmten Elementen Werte zuweisen
Sie können einem Element in einem bereits existierenden Array Werte zuweisen. Ich möchte nun das 5. Element ansprechen und einen (neuen) Wert zuweisen. Dem 5. Element soll den Wert 11 zugewiesen werden (der Wert 11 ist hier wiederum eine Zahl). Der Wert steht nicht in Anführungszeichen!
Über den Index des Array kann man bestimmte Elemente ansprechen. Das StandardArray verwendet einen ganzzahligen Index zur Adressierung, beginnend mit Null. Entsprechend hat das 5. Element den Index 4.
Primzahlen[4] = 11;
Array 'Primzahlen'
| Index-Nummer |
0 |
1 |
2 |
3 |
4 |
5 |
| Elemente |
2 |
3 |
5 |
7 |
11 |
13 |
Techniken wie man für die Elemente eines Array automatisiert eine ganze Reihe von Werten zuweisen kann, erkläre ich auf einer separaten Beispielseite.
Wert eines Elements in einem Array ermitteln
Sie können von einem Array den dort abgelegten Wert eines Elements ermitteln. Möchte ich nun z.B. herausfinden, welcher Wert im Array 'Primzahlen' dem 4. Element zugewisen wurde, verwende ich dazu diese Technik. Ich spreche das 4. Element mit dem Index (3) an.
... schauen wir in der Schublade mit dem Index 3 nach ...
Primzahlen[3];
Array 'Primzahlen'
| Index-Nummer |
0 |
1 |
2 |
3 |
4 |
5 |
| Elemente |
2 |
3 |
5 |
7 |
11 |
13 |
var Inhalt = Primzahlen[3]
In der Variablen 'Inhalt' würde man den Wert 7 finden
Diesen ermittelten Wert kann man also in eine Variable schreiben ...
var ermittelterWert = Primzahlen[3];
... oder als Alert-Meldung anzeigen lassen ...
alert ("Der Wert im 4. Element ist: " + Primzahlen[3]);
... oder in das Dokument schreiben lassen mit
document.write("Im 4. Element wurde der Wert " + Primzahlen[3] + " gefunden");
Array-Eigenschaft Länge (Anzahl der Elemente) abfragen
Sie können von einem bereits existierenden Array die Anzahl der Elemente ermitteln. Ich möchte nun herausfinden wie viele Elemente (egal ob leer oder bereits gefüllt) mein Array 'Primzahlen' hat.
Primzahlen.length;
Array 'Primzahlen'
| Index-Nummer |
0 |
1 |
2 |
3 |
4 |
5 |
| Elemente |
2 |
3 |
5 |
7 |
11 |
13 |
var Anzahl = Primzahlen.length;
In der Variablen 'Anzahl' würde man den Wert 6 finden
'length' ermittelt die Länge (length) eines Arrays. Diesen ermittelten Wert könnte ich in eine Variable schreiben ...
var Anzahl = Primzahlen.length;
... oder als Alert-Meldung anzeigen lassen ...
alert ("Anzahl der Elemente: " + Primzahlen.length);
... oder in das Dokument schreiben lassen mit
document.write("Mein Array hat " + Primzahlen.length + " Elemente");
Methoden
Mit einem Array kann man nun eine Menge anfangen. JavaScript hält bereits einige Methoden bereit, bestimmte Operationen auszuführen um einen Array zu verändern oder Informationen aus einem Array zu entnehmen. Hier erst einmal eine Übersicht, darunter ein Beispiel. Eine Seite, die sämtliche Methoden an Hand von Beispielen erklärt, werde ich später erstellen.
|
concat
|
vereinigt 2 Arrays
|
|
join
|
vereinigt alle Elements eines Array in einem Text-String
|
|
pop
|
entfernt das letzte Element eines Array
|
|
push
|
fügt 1 oder mehrere Elemente am Ende eines Arrays an
|
|
reverse
|
kehrt die Reihenfolge der Elemente eines Arrays um
|
|
shift
|
entfernt das erste Element eines Arrays
|
|
slice
|
extrahiert einen Teil eines Arays
|
|
splice
|
fügt Elemente hinzu oder entfernt Elemente von einem Array
|
|
sort
|
sortiert die Elemente eines Arrays
|
|
unshift
|
fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu
|
Weitere Elemente (hinten) anhängen
Sie können an einem bereits existierenden Array Elemente anhängen. Ich möchte nun ein 6. Element anhängen und einen Wert zuweisen. Dem 6. Element soll der Wert 13 zugewiesen werden (der Wert 13 ist hier wiederum eine Zahl). Der Wert steht nicht in Anführungszeichen!
statt
Primzahlen[6] = 17;
verwende ich
Primzahlen.push(17);
'push' hängt ein oder mehrere Elemente an das Ende eines Arrays an!
Array 'Primzahlen'
| Index-Nummer |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
| Elemente |
2 |
3 |
5 |
7 |
11 |
13 |
17 |
Ich muss bei der Verwendung von 'push' nicht unbedingt wissen wie viele Elemente mein Array bereits hat.
Primzahlen.push(17,19);
hätte 2 Elemente hinten angehängt.
Einsatzbereich und Vorteile
Wozu betreibe ich diesen Aufwand meine Daten in ein Register zu schreiben und wo liegt der Vorteil? Eine kurze Erklärung der beiden wichtigsten Gründe können sie hier nachlesen.
Erläuterungen der Vorteile
1 Geschwindigkeit
Wenn z.B. Grafikadressen für die digitalen Ziffern einer Uhr in einen Array geschrieben werden und ich dem Systen gleichzeitig mitteile, dass es sich dabei um neue, später einzusentzende Grafik-Objekte handelt, werden diese Grafiken dabei bereits vorgeladen und stehen beim Abruf aus dem Register sofort zur Verfügung.
2 Notierung
Die Adressierung der Grafiken gestaltet sich einfacher und die Werte können einfacher zugewiesen werden.
Mein Array soll informationen zu Grafiken für die Darstellung einer digitalen Uhr enthalten. Hier mein Array für dieses Beispiel (Erklärungen später):
Array 'Ziffern'
| Index-Nummer |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
| Zeichen |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
: |
| Grafiken |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Um 12 Uhr möchte ich die Ziffern 1 und 2 anzeigen lassen. Vereinfacht dargestellt sähe der Unterschied so aus:
a) Herkömmliche Notierung: "... wenn der Stundenwert 12 ist dann zeige die Grafik für Ziffer 1 und zeige die Grafik für Ziffer 2"
<img src="clock/ziffern7/1.gif" width="15" height="20" border="0" alt="">
<img src="clock/ziffern7/2.gif" width="15" height="20" border="0" alt="">
b) Adressierung über Array-Elemente: "... wenn der Stundenwert 12 ist dann nutze aus dem Array 'ziffern' den Wert des Elements mit dem Index 1 und den Wert des Elements mit dem Index 2"
Zahl1 = ziffern[1];
Zahl2 = ziffern[2];
Vorteile:
Innerhalb eines JavaScripts bietet die Ansprache über die Indexnummer (hier 1 und 2), vor allem bei Schleifen (Loops, wiederkehrende und / oder mehrmals zu durchlaufende Vorgänge) einen enormen Vorteil. Denn das was bei
ziffern[x]
für x eingetragen ist, kann man hochzählen oder durch andere Funktionen ermitteln lassen.
 Arrays - Grundlagen 01
Arrays - Elementen Werte zuweisen, mit Schleifen Anfangswerte belegen
Arrays - Werte auslesen, Inhalte mit Schleifen auslesen
Arrays - Elemente ändern und prüfen 01 - Datenanalyse visualisieren
Arrays - Elemente ändern und prüfen 02 - Datenanalyse visualisieren
Arrays - Werte zuweisen und auslesen - Dateinamen Monatsbild 02
Arrays - Werte zuweisen und auslesen - Grafiken zuordnen
Arrays - Werte zuweisen und auslesen - URL zuordnen
Arrays - Werte zuweisen und auslesen - Text in Morsecode-Grafiken
Module mit Arrays - Monatsbild 01 (1 von 12)
Module mit Arrays - Wochentagsbild 01 - Bild des Wochentags (1 von 7)
Module mit Arrays - Grafik aktuelles Sternzeichen (1 von 12)
| 
Home • JavaScript • Array Grundlagen
Demo Arrayfunktion
