JavaScript/Array

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Beschreibung

Ein Javascript Array ist eine Datenstruktur, die mehrere Werte unter einem gemeinsamen Namen speichert. Auf diese Werte kann mit einem ganzzahligen Index zugegriffen werden. Die Reihenfolge der hinterlegten Daten wird durch deren Position im Array bestimmt.

Ein Array ist abstrakt gesehen eine Sequenz von aufeinanderfolgenden Werten. Diese müssen in JavaScript nicht vom gleichen Typ sein. In anderen Programmiersprachen existiert auch die Begrifflichkeit Liste oder Vektor. Diese beziehen sich auf die Art der dahinterliegenden Datenhaltung und der Zuordnung der Objekte im Speicher.

In JavaScript ist beides nicht ersichtlich und für den Programmierer irrelevant. Letztendlich ist hier ein Array vom Typ Object abgeleitet und der Zugriff auf die Werte über einen Index erfolgt wie der Zugriff auf Eigenschaften von Objekten.

Erstellung

Die Erstellung neuer Objektinstanzen vom Typ Array erfolgt über das Schlüsselwort new, gefolgt vom Funktionsaufruf Array, mit oder ohne Parameter. Arrays dürfen anfänglich leer sein, sie enthalten dann nur keine Elemente. Ein nachträgliches Verändern von Arrays durch Hinzufügen, Löschen oder Manipulieren der Elemente ist jederzeit möglich.

Beispiel 
let farben = ['rot', 'orange', 'gelb', 'grün', 'blau' ];         // Erstellung durch Literal
var let = new Array('rot', 'orange', 'gelb', 'grün', 'blau'); // Erstellung durch Array-Funktion

console.log(farben);     // rot, orange, gelb, grün, blau
In diesem Beispiel wird ein Array erstellt, das fünf Farben als Zeichenfolgen beinhaltet. Die neue Instanz wird in der Variable farben abgelegt.

Alternativ wird ein Array mithilfe der Array-Funktion erstellt.

Empfehlung: Sie sollten ein Array immer in der Literal-Schreibweise erstellen.
Beachten Sie: Die Größe eines Arrays muss bei der Erzeugung nicht angegeben werden, da Sie problemlos Werte hinzufügen und entfernen können.

Zugriff auf einfache Arrays

Nachdem Sie eine Instanz des Array-Objekts erzeugt haben, können Sie mit dem Index-Operator auf einzelne Werte zugreifen:

Beispiel ansehen …
let farben = ['rot', 'orange', 'gelb', 'grün', 'blau']; 

function init() {
  let elem = document.getElementById('button');
  elem.addEventListener('click', ausgeben);	
}

function ausgeben() {
  let x = farben[1];
  let ausgabe = document.getElementById('ausgabe');
  ausgabe.innerHTML = x;
}
Nachdem Sie eine Instanz des Array-Objekts in einem Namen gespeichert haben (im Beispiel der Name farben), können Sie einzelne Werte innerhalb des Variablenvektors ansprechen.
Im Beispiel wird eine gewöhnliche Variable x definiert. Anschließend erfolgt eine Kontrollausgabe, wobei über einen Index-Operator auf die gespeicherten Werte zugegriffen wird.


0 1 2 3 4
rot orange gelb grün blau
Beachten Sie: Die Kontrollausgabe liefert den Wert orange und nicht rot. Das liegt daran, dass der Index ein auf 0 (Null) basierender Index ist. Der erste Wert ist über [0] erreichbar, der zweite Wert über [1] und so weiter. Das Gleiche gilt für die zweite Kontrollausgabe. Die drei steht hier nicht für die dritte Position, sondern für das Element mit dem Index drei (0,1,2,3,4).

Weiterhin muss der Indexwert positiv sein, negative Werte zum Zugriff sind unzulässig. Wird ein Element nachträglich durch das Schlüsselwort delete entfernt, so rücken die nachfolgenden Elemente nicht automatisch nach. Stattdessen wird bei einem Zugriff auf ein Element an der gelöschten Position der Wert undefined zurück gegeben, sofern kein neues Element dort abgelegt wurde.

Die Eigenschaft length

Über die length-Eigenschaft kann die Anzahl der im Array definierten Elemente abgefragt und auch gesetzt werden. Sie enthält einen positiven Zahlwert.

Auslesen der Anzahl der Elemente

Beispiel ansehen …
let farben = ['rot', 'orange', 'gelb', 'grün', 'blau']; 

function ausgeben() {
  let x = '<b>Anzahl Elemente:</b> ' + farben.length;
  let ausgabe = document.getElementById('ausgabe');
  ausgabe.innerHTML = x;
}
In diesem Beispiel wird mit farben.length die Anzahl der Elemente des Array-Objekts ausgelesen.

Kürzen und Erweitern des Arrays

Wenn durch length eine neue Anzahl festgelegt wird, die kleiner als die aktuelle Anzahl der Elemente ist, dann wird das Array verkleinert und die überschüssigen Einträge gehen verloren. Ist die neue Länge hingegen größer als die aktuelle Anzahl der Einträge im Array, dann wird das Array zwar formal erweitert, aber nicht automatisch mit Werten vorbelegt. Solange keine Elemente an diesen Stellen gespeichert wurden, liefern Abfragen darauf den Wert undefined.

Beispiel ansehen …
let farben = ['rot', 'orange', 'gelb', 'grün', 'blau']; 

function arrayKuerzen() {
  farben.length = 4;	
  let x = '<b>Anzahl Elemente:</b> ' + farben.length +'<br><b>Array:</b> ' + farben ;
  let ausgabe = document.getElementById('ausgabe');
  ausgabe.innerHTML = x;
}
In diesem Beispiel wird mit farben.length = 4; die Länge des Array-Objekts neu festgelegt und dann in einer Kontrollausgabe ausgegeben.
Empfehlung: Erweitern sie das Array im Frickl, indem Sie array.length einen höheren Wert zuweisen.


Beispiel ansehen …
let zahlen = [1, 2, 4, 8, 16, 32, 64, 128, 256];

alert(zahlen);        // "1,2,4,8,16,32,64,128,256"
alert(zahlen.length); // 9
alert(zahlen[3]);     // 8

// verkleinern
zahlen.length = 2;
alert(zahlen);        // "1,2"
alert(zahlen.length); // 2
alert(zahlen[3]);     // undefined

// vergrößern
zahlen.length = 5;
alert(zahlen);        // "1,2,,,"
alert(zahlen.length); // 5
alert(zahlen[3]);     // undefined
Das Beispiel definiert ein Array, bestehend aus neun Zahlen. Anschließend folgen Kontrollausgaben. Dabei wird zuerst das Array ansich, dann die Länge und zuletzt der Wert an der vierten Stelle (über den Index 3) im Array ausgegeben. Dies wiederholt sich, einmal nachdem das Array verkleinert und einmal nachdem es vergrößert wurde.

Mehrdimensionale Arrays

Viele Daten sind aber nicht eindimensional wie Arrays, sondern in Tabellenform strukturiert. Mit einem Array, dessen Werte mit einem weiteren Array gefüllt werden, können Sie mehrdimensionale Arrays erzeugen.

Beispiel 
let a = new Array(4);

for (let i = 0; i < a.length; i++) {
  a[i] = new Array(10);
}
     
a[3][1] = "Hallo";
      
console.log(a[3][1]);
Das Beispiel definiert zunächst ein Array a mit 4 Elementen. Dann wird in einer for-Schleife für jedes dieser Elemente ein neues Array definiert, wobei für jedes Array 10 leere Elemente erzeugt werden. Anschließend können Sie durch eine Angabe wie a[3][1] das zweite Element (1) im vierten Array (3) ansprechen. Im Beispiel wird dieses Element mit dem Wert Hallo belegt. Zur Kontrolle wird der Wert in einem Meldungsfenster ausgegeben.

Assoziative Arrays

Wenn die einzelnen Felder eines mehrdimensionalen Arrays unterschiedliche Datentypen enthalten, ist es anschaulicher, anstelle des numerischen Index eine Zeichenkette als Schlüssel zu verwenden. So entstehen in einem assoziativen Array feste Schlüssel-Wert-Paare (key-values-Paare).

Name Vorname Alter Wohnort
0 Müller Max 24 München
1 Doll Dieter 25 Dresden
2 Schulz Bettina 26 Berlin


Beispiel ansehen …
let Mitarbeiter = new Array();

    Mitarbeiter[0] = new Object();
    Mitarbeiter[0]["Name"] = "Müller";
    Mitarbeiter[0]["Vorname"] = "Max";
    Mitarbeiter[0]["Alter"] = 24;	
    Mitarbeiter[0]["Wohnort"] = "München";
	
    Mitarbeiter[1] = new Object();
    Mitarbeiter[1]["Name"] = "Doll";
    Mitarbeiter[1]["Vorname"] = "Dieter";
    Mitarbeiter[1]["Alter"] = 25;	
    Mitarbeiter[1]["Wohnort"] = "Dresden";

    Mitarbeiter[2] = new Object();
    Mitarbeiter[2]["Name"] = "Schulze";
    Mitarbeiter[2]["Vorname"] = "Bettina";
    Mitarbeiter[2]["Alter"] = 26;	
    Mitarbeiter[2]["Wohnort"] = "Berlin";

function init() {
  let elem = document.getElementById('button');
  elem.addEventListener('click', ausgeben);	
}

	function ausgeben() {
		let container = document.getElementById("ausgabe"),
			dl;

		if (container) {

			dl = container.appendChild(
				document.createElement("dl")
			);

			Mitarbeiter.forEach(function (m, i) {

				let dd, dt, eigenschaft;

				dt = document.createElement("dt");
				dt.innerHTML = "Mitarbeiter " + (i+1);

				dl.appendChild(dt);

				for (eigenschaft in m) {

					dd = document.createElement("dd");
					dd.innerHTML = eigenschaft + ": " + m[eigenschaft];

					dl.appendChild(dd);
				}
			});
		}
	}
Das Beispiel definiert ein Array Mitarbeiter. Dieses Array besitzt drei Elemente. Jedes dieser Elemente stellt ein Objekt dar. Den Objekten werden jeweils Eigenschaften hinzugefügt, deren Schlüssel heißen Name, Vorname, Alter und Wohnort. Jeder dieser Eigenschaften wird ein entsprechender Wert zugeordnet.

Bei einem Klick auf den Button wird die Funktion ausgeben() aufgerufen. Anstelle einer Schleife wird die forEach-Methode verwendet. Für jeden Mitarbeiter wird eine Definitionsliste erzeugt und dabei die laufende Nummer des Mitarbeiters angegeben.

Anschließend wird eine weitere, innere Schleife aufgerufen. Da hierbei auf ein Objekt zugegriffen wird, muss eine for...in-Schleife verwendet werden. Diese Schleife durchläuft alle Eigenschaften des angesprochenen Objektes und schreibt dessen Namen und den zugehörigen Wert ins Dokument.

Übersichtlicher als die oben verwendete Methode ist die kürzere Literalschreibweise im JSON-Format.

Mitarbeiterdatei in kürzerer Literalschreibweise ansehen …
var Mitarbeiter = [
  {
    Name: "Müller",
    Vorname: "Max",
    Alter: 24, // Integer! Kein String!
    Wohnort: "München"
  },
  {
    Name: "Doll",
    Vorname: "Dieter",
    Alter: 25, 
    Wohnort: "Dresden"
  },
  {
    Name: "Schulze",
    Vorname: "Bettina",
    Alter: 26,
    Wohnort: "Berlin"
  }
];

Literales Array oder Array-Objekt?

Wann sollte man besser ein literales Array und wann ein Array-Objekt einsetzen?

Einfache (literale) Arrays können Sie mit length, dem numerischen Index-Operator und Methoden wie push() und pop() bearbeiten. Die Reihenfolge der Elemente kann sortiert werden.

Wenn die Reihenfolge nicht wichtig ist, aber Begriffe eine bessere Übersicht ermöglichen, bietet ein Array-Objekt einen schnellen Zugriff auf die Schlüssel-Wert-Paare.

Siehe auch

Weblinks


Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Array&oldid=94106“