Skip to content

4. Arrays

Image

4.1. Skript [tab-01]

Das folgende Skript veranschaulicht einige Eigenschaften von JavaScript-Arrays. Diese ähneln den Arrays PHP, weisen jedoch einen wesentlichen Unterschied auf: Sie werden über Zeiger verwaltet und gelten als Objekte.


'„use strict“;

// Ein Array ist ein Objekt, das über seine Adresse manipuliert wird
const tab1 = [1, 2, 3];
// Kopieren von Adressen
const tab2 = tab1;
// tab1 und tab2 verweisen auf dasselbe Array
console.log("tab1===tab2 :", tab1 === tab2);
// Man kann das Array ändern, indem man wahlweise über tab1 oder tab2 darauf zugreift
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
tab1===tab2 : true
tab1= [ 1, 10, 3 ]
tab2= [ 1, 10, 3 ]

Kommentare

  • Zeile 2 der Ergebnisse zeigt, dass [tab1] und [tab2] zwei identische Entitäten sind, genauer gesagt zwei identische Zeiger;
  • Die Zeilen 4 und 5 der Ergebnisse zeigen, dass diese beiden Zeiger auf dasselbe Array verweisen;

4.2. Skript [tab-02]

Dieses Skript zeigt, dass sich das JavaScript-Array von den Arrays in kompilierten Sprachen unterscheidet.


'use strict';

// Array
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// Initialisierung eines Elements
tab[3] = 100;
tab[1] = "huit";
// Array
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// Die Schlüssel des Arrays sind seine Indizes
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// die Werte des Arrays
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • Zeile 4: ein leeres Array;
  • Zeile 8: Ein Array hat keine feste Größe. Es handelt sich lediglich um eine Folge von Elementen, die durch eine Nummer indiziert sind. Man kann das Element Nr. 3 initialisieren, auch wenn die Elemente [0, 1, 2] noch nicht definiert sind;
  • Zeilen 16–24: Ein JavaScript-Array verhält sich ähnlich wie das Array PHP;

Ausführung


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
tab= [] , longueur=[ 0 ]
-------------------------------
tab= [ <1 empty item>, 'huit', <1 empty item>, 100 ] , longueur=[ 4 ]
-------------------------------
tab.toString=[ ,huit,,100 ]
-------------------------------
clé=[ 0 ], valeur=[ undefined ]
clé=[ 1 ], valeur=[ huit ]
clé=[ 2 ], valeur=[ undefined ]
clé=[ 3 ], valeur=[ 100 ]
-------------------------------
valeur=[ undefined ]
valeur=[ huit ]
valeur=[ undefined ]
valeur=[ 100 ]

4.3. Skript [tab-03]

Dieses Skript zeigt verschiedene Methoden des Objekts [tableau].


'use strict';
// Ein Array kann verschiedene Datentypen enthalten
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log kann den Inhalt eines Arrays anzeigen
show(1);
console.log("tab=", tab);
show(2);
// Durchlaufen des Arrays mit foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// eine andere Schreibweise, um dasselbe zu erreichen
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// Durchlaufen des Arrays mit „for“
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// Änderung von tab[i]
tab[5] = [];
// Anzeige
console.log("tab=", tab);
show(5);
// Das letzte Element wird entfernt
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// Ein Element wird am Ende des Arrays hinzugefügt
tab.push('xyz');
console.log("tab=", tab);
show(7);
// Ein Element wird am Anfang des Arrays hinzugefügt
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// Das erste Element des Arrays wird entfernt
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// Das zweite Element wird aus dem Array entfernt
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// Es werden zwei Elemente ab dem ersten Element aus dem Array entfernt
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

// Funktion
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

Kommentare

  • Der Unterschied zwischen PHP-Arrays und JavaScript-Arrays wird in den Zeilen 3 und 24 veranschaulicht:
    • In Zeile 3 wird die Variable [tab] als Konstante deklariert;
    • Zeile 24 ändert das Element „tab[5]“;

In Zeile 3 wird der Zeiger, der auf das Array verweist, als Konstante deklariert, nicht das Array selbst. Dieses kann geändert werden.

  • Zeilen 14–16: Das Array [tab] wird mithilfe einer Methode [forEach] des Arrays [tab] durchlaufen. Diese Methode erhält als Parameter die Definition einer Funktion, die man als literale Funktion bezeichnen könnte. Diese Parameterfunktion erhält einen Parameter: das aktuelle Element des Arrays [tab]. Die Funktion wird für jedes Element des Arrays aufgerufen. Diese Schreibweise ist in JavaScript üblich;
  • Zeilen 9–10: Hier wird eine andere Syntax zur Definition der Parameterfunktion verwendet. Anstelle von:
    • function(p1, p2, …, pn){….}

schreibt man:

  • (Fortsetzung)
    • (p1, p2, …, pn) => {…}. Dies wird als „Pfeilnotation“ oder „Arrow-Notation“ bezeichnet;
  • der Rest des Codes wird durch die Kommentare erläutert;

An diesem Skript ist Folgendes zu beachten:

  • ein Array ein Objekt ist, auf das ein Zeiger verweist;
  • dass dieses Objekt die Methoden [forEach, pop, push, shift, unshift] besitzt;

4.4. Skript [tab-04]

Dieses Skript stellt weitere Methoden von Array-Objekten vor.


'use strict';

// Methode zur Bearbeitung von Arrays

// ein Array
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// Anzeige
console.log("tab=", tab);
// Map
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// Ausgabe
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduce ohne Startwert
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// Reduzieren mit Anfangswert
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// Filter
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// suchen
const element1 = tab.find((element) => (element > 20));
console.log("élément1=", element1);
// findIndex
const index1 = tab.findIndex((element) => (element === 20));
console.log("index1 20=", index1);
// indexOf
const index2 = tab.indexOf(30);
console.log("index2 30=", index2);
const index3 = tab.indexOf(31);
console.log("index3 31=", index3);
// lastIndexOf
const index4 = [4, 5, 4, 2].lastIndexOf(4);
console.log("index4 4=", index4);
// Sortierung
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// umgekehrte Sortierung
const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
  if (e1 > e2) {
    return -1;
  }
  else if (e1 === e2) {
    return 0;
  } else {
    return +1;
  }
});
console.log("tab6=", tab6);

Anmerkungen

  • Zeilen 13–15: Die Methode [map] akzeptiert eine Transformationsfunktion als Parameter. Diese wird für jedes Element des Arrays wiederholt aufgerufen. Sie ist dafür zuständig, das Element in etwas anderes umzuwandeln, in diesem Fall in ein Objekt mit den Eigenschaften [prop1, prop2]. Die Methode [map] gibt ein neues Array zurück. Das alte wird nicht verändert: 

tab= [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
tab2= [ { prop1: 0, prop2: 0 },
{ prop1: 10, prop2: 100 },
{ prop1: 20, prop2: 400 },
{ prop1: 30, prop2: 900 },
{ prop1: 40, prop2: 1600 },
{ prop1: 50, prop2: 2500 },
{ prop1: 60, prop2: 3600 },
{ prop1: 70, prop2: 4900 },
{ prop1: 80, prop2: 6400 },
{ prop1: 90, prop2: 8100 } ]
  • Zeile 20: Die Methode [reduce] akzeptiert als Parameter eine Funktion mit zwei Parametern, die für jedes Element des Arrays wiederholt aufgerufen wird. Diese Funktion akzeptiert zwei Parameter:
    • [currentValue] ist das aktuelle Element des Arrays;
    • [accumulator] ist das zuletzt von der Funktion erzeugte Ergebnis. Ist für diesen Akkumulator kein Anfangswert vorgesehen, so ist dieser gleich 0;
    • beim ersten Aufruf der Akkumulationsfunktion gibt diese [0+tab[0]] zurück. Dieser Wert wird dem Akkumulator zugewiesen;
    • beim zweiten Mal gibt sie „Akkumulator + tab[1]“ zurück, also „tab[0] + tab[1]“;
    • beim dritten Mal ergibt sich Akkumulator + tab[2], also tab[0] + tab[1] + tab[2];
    • usw. Letztendlich enthält der Akkumulator die Summe aller Elemente des Arrays [tab];
  • Zeile 26: Die Methode [filter] hat als Parameter eine Filterfunktion. Diese wird für jedes Element des Arrays wiederholt aufgerufen und erhält das jeweilige Element als Parameter. Sie muss Folgendes zurückgeben:
    • [true], wenn das Element beibehalten werden soll;
    • [false] andernfalls;
  • Zeile 33: Die Methode [find] hat als Parameter eine Suchfunktion. Diese wird wiederholt für jedes Element des Arrays aufgerufen und erhält dieses als Parameter. Sie muss [true] zurückgeben, wenn das empfangene Element das Suchkriterium erfüllt. Der Vorgang wird dann beendet. Die Methode [find] gibt also 0 oder 1 Element zurück;
  • Zeile 36: Die Methode [findIndex] funktioniert wie die Methode [find], gibt jedoch anstelle des gefundenen Elements dessen Index im Array zurück;
  • Zeilen 39, 41: Die Methode [indexOf(valeur)] sucht nach [valeur] im Array und gibt dessen Index zurück oder -1, falls es nicht gefunden wird;
  • Zeile 44: Die Methode [lastIndexOf(valeur)] funktioniert wie die Methode [indexOf(valeur)], beginnt ihre Suche jedoch am Ende des Arrays;
  • Zeile 47: Die Methode [sort] ohne Parameter gibt ein nach der natürlichen Reihenfolge (Zahlen, Zeichenketten) sortiertes Array zurück;
  • Zeile 50: Wenn die natürliche Reihenfolge nicht geeignet ist, muss der Methode [sort] eine Funktion mit zwei Parametern (e1, e2) übergeben werden, die Folgendes zurückgibt:
    • +1, wenn e1 nach e2 sortiert werden soll;
    • -1, wenn e1 vor e2 sortiert werden soll;
    • 0, wenn beide Elemente die gleiche Reihenfolge haben sollen;

Die als Parameter an die Methode [sort] übergebene Funktion wird von dieser wiederholt aufgerufen, um zwei Elemente des Arrays zu vergleichen;

https://stahe.github.io
Dieses Tutorial, verfasst von Serge Tahé, wird der Öffentlichkeit unter den Bedingungen der Creative Commons Namensnennung – Nicht kommerziell – Weitergabe unter gleichen Bedingungen 3.0 Unported.