Grundlagen Arrays definieren Werte zuordnen + entnehmen

Arrays definieren, Werte zuordnen, entnehmen

Home • JavaScript • Array Grundlagen

Demo Arrayfunktion

Was ist ein Array? Basiswissen 01

In meinen Beispielen spreche ich immer wieder von einem Array wenn es darum geht Informationen als 'Datenvorrat' bereit zu halten oder wenn Grafiken vorgeladen werden sollen. Auf dieser 1. Seite möchte ich die Grundlagen erklären.

Basiswissen Array - Seite 01

Array engl. Array = Aufstellung, Reihe [ä-rei]

das oder der Array (beides erlaubt), die Arrays

Betrachten sie einen simplen Array wie eine Tabelle mit zwei Zeilen und vielen Spalten. In der Überschriftenzeile stehen Zahlen von 0 bix X. In der zweiten Zeile stehen die Werte. Beispiel siehe rechts:

Mit Hilfe eines Arrays können Daten eines einheitlichen Datentyps geordnet so im Speicher abgelegt werden, dass ein Zugriff auf die Daten über einen Index möglich wird. Das StandardArray verwendet einen ganzzahligen Index zur Adressierung, beginnend mit Null.

bildlicher Vergleich

Stellen sie sich einen Array vor wie eine Reihe von Postfächern oder eine Zeile eines Apothekerschankes mit einer bestimmten Anzahl von Schubfächern. In jedes Schubladenelement kann man etwas ablegen. Andererseits kann man auch gezielt nachschauen, was im Schubfach Nr.3 z.B. enthalten ist.

Nehmen wir einmal an, der Array hätte die Bezeichnung 'Schrank'. Dann könnten wir mit einer Abfrage herausfinden, was in Schublade 3 ist oder z.B. den Inhalt von Schublade 3 nehmen und eine Kopie davon in eine Variable schreiben.

Was ist in Schublade Nr 3 ? Kurzschreibweise: ---> Schrank[3]

Was ist in Schublade Nr 0 ? Kurzschreibweise: ---> Schrank[0]

Schreibe eine Kopie des des Inhalts von Schublade 0 in die Variable 'InhaltNull'
Weise den Wert des Array-Elements 0 des Arrays 'Schrank' der Variablen 'InhaltNull' zu

var 'InhaltNull' = Schrank[0];

Die Schublade 0 ist nun nicht leer, da lediglich eine Kopie des Inhalts erzeugt wurde!

So, jetzt zeige ich ihnen wie man einen Array mit dem Namen 'Schrank' erzeugt und dann legen wir etwas in die Schubladen:

a neuen Array 'Schrank' erzeugen - ohne weitere Angaben

var Schrank = new Array();

Ein neues, vorerst leeres Register mit dem Namen 'Schrank' wurde erzeugt. Wie viele Schubladen der Schrank hat wurde nicht festgelegt.

b Array 'Schrank' erzeugen - Anzahl der Elemente festlegen

var Schrank = new Array(6);

Ein neues, vorerst leeres Register mit dem Namen 'Schrank' wurde erzeugt. Das Register hat (simpel ausgedrückt) 6 'leere Schubladen'. Ein Array mit 6 Elementen wurde erzeugt. Den Elementen wurden noch keine Werte zugewiesen. Die Schubladen sind leer.

c Array 'Schrank' erzeugen - Elemente zuweisen

var Schrank = new Array("Nägel", "Schrauben", "Dübel", "Knöpfe", "Haken", "Muttern");

Ein neues Register mit dem Namen 'Schrank' wurde erzeugt. Das Register hat (simpel ausgedrückt) bereits 6 'gefüllte Schubladen'. Bei der Definition des Arrays wurden 6 Elemente erzeugt und bereits jeweils ein Wert zugewiesen. Die Schubladen sind nicht mehr leer. Die Schubladen enthalten Text. Hier wurden Texte (Textstrings) in einem Array abgelegt.

Texte stehen in Anführungszeichen.

Array 'Schrank'

Index-Nummer	0	1	2	3	4	5
Elemente	"Nägel"	"Schrauben"	"Dübel"	"Knöpfe"	"Haken"	"Muttern"

Die Schublade mit dem Index 0 enthält den Text "Nägel".
Die Schublade mit dem Index 1 enthält den Text "Schrauben".

Auf dieser Seite 1 habe 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. Das ist ein erstes Basiswissen, mit einfachen Worten erklärt.

Auf der

Erklärungsseite 2 wollen wir uns nun ein wenig fachmännischer ausdrücken und einige Funktionen kennen lernen, die uns die Arbeit mit Arrays erleichtern.

Einsatzbereich und Vorteile

Diese Erklärung steht hier eigentlich noch etwas zu früh (deshalb auch ausgeblendet). Lesen sie diesen Abschnitt besser im Fußbereich der

Erklärungsseite 2 (identischer Abschnitt steht dort). Wenn sie möchten und ihre gesunde Neugier keine Fragezeichen in ihre Augen schreibt, dann lesen sie halt hier schon:

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 einblenden / ausblenden:

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.

Erläuterungen einblenden / ausblenden:

zur Erklärungsseite 2

26.08.2002