Skip to content

4. Tabellen

Image

4.1. Skript [tab-01]

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


'use strict';
 
// an array is an object manipulated via its address
const tab1 = [1, 2, 3];
// address copying
const tab2 = tab1;
// tab1 and tab2 point to the same table
console.log("tab1===tab2 :", tab1 === tab2);
// the table can be modified using either tab1 or tab2
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 gleiche Entitäten sind, genauer gesagt zwei gleiche Zeiger;
  • Die Zeilen 4 und 5 der Ergebnisse zeigen, dass diese beiden Zeiger auf dasselbe Array verweisen;

4.2. Skript [tab-02]

Dieses Skript veranschaulicht, dass sich JavaScript-Arrays von Arrays in kompilierten Sprachen unterscheiden.


'use strict';
 
// table
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// element initialization
tab[3] = 100;
tab[1] = "huit";
// table
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// the keys to the picture are its indices
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// table values
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 ist einfach eine Folge von Elementen, die durch eine Zahl indiziert sind. Du kannst Element #3 initialisieren, auch wenn die Elemente [0, 1, 2] noch nicht definiert sind;
  • Zeilen 16–24: Ein JavaScript-Array verhält sich ähnlich wie ein PHP-Array;

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 demonstriert verschiedene Methoden des [array]-Objekts.


'use strict';
// a table can contain different types of data
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log can display the contents of an array
show(1);
console.log("tab=", tab);
show(2);
// table path with foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// another script to do the same thing
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// table route with for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// change tab[i]
tab[5] = [];
// display
console.log("tab=", tab);
show(5);
// remove the last element
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// add an element to the end of the array
tab.push('xyz');
console.log("tab=", tab);
show(7);
// add an element at the beginning of the array
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// remove the 1st element from the array
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// remove element no. 2 from the table
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// remove two elements from the table, starting with element no. 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);
 
// function
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. Das Array selbst kann geändert werden.

  • Zeilen 14–16: Das Array [tab] wird mithilfe der Methode [forEach] des Arrays [tab] durchlaufen. Diese Methode nimmt als Parameter die Definition einer Funktion entgegen, die man als Literalfunktion bezeichnen könnte. Diese Funktion nimmt einen Parameter entgegen: das aktuelle Element des Arrays [tab]. Die Funktion wird für jedes Element des Arrays aufgerufen. Diese Art von Syntax ist in JavaScript üblich;
  • Zeilen 9–10: Wir verwenden eine andere Syntax, um die Funktion zu definieren. Anstatt zu schreiben:
    • function(p1, p2, …, pn){….}

schreiben wir:

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

Beachten Sie in diesem Skript Folgendes:

  • ein Array ein Objekt ist, auf das ein Zeiger verweist;
  • Dieses Objekt verfügt über Methoden [forEach, pop, push, shift, unshift];

4.4. Skript [tab-04]

Dieses Skript stellt weitere Methoden von Array-Objekten vor.


'use strict';
 
// table manipulation method
 
// a picture
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// display
console.log("tab=", tab);
// map
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// display
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduce without initial value
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// reduce with initial value
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);
// find
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);
// spell
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// reverse spell
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);

Kommentare

  • Zeilen 13–15: Die [map]-Methode nimmt eine Transformationsfunktion als Parameter entgegen. Diese Funktion wird für jedes Element im Array 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 [map]-Methode gibt ein neues Array zurück. Das ursprüngliche Array bleibt unverä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 [reduce]-Methode nimmt als Parameter eine Funktion mit zwei Argumenten entgegen, die für jedes Element des Arrays wiederholt aufgerufen wird. Diese Funktion nimmt zwei Argumente entgegen:
    • [currentValue] ist das aktuelle Element des Arrays;
    • [accumulator] ist das letzte von der Funktion erhaltene Ergebnis. Wenn für diesen Akkumulator kein Anfangswert angegeben wird, ist er 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, d. h. tab[0]+tab[1];
    • Beim dritten Mal gibt sie „accumulator + tab[2]“ zurück, was „tab[0] + tab[1] + tab[2]“ entspricht;
    • usw. Letztendlich repräsentiert der Akkumulator die Summe aller Elemente im Array [tab];
  • Zeile 26: Die Methode [filter] nimmt eine Filterfunktion als Parameter entgegen. Diese Funktion wird für jedes Element des Arrays wiederholt aufgerufen und erhält dieses Element als Parameter. Sie muss Folgendes zurückgeben:
    • [true], wenn das Element beibehalten werden soll;
    • [false] andernfalls;
  • Zeile 33: Die Methode [find] nimmt eine Suchfunktion als Parameter entgegen. Diese Funktion wird für jedes Element des Arrays wiederholt aufgerufen und erhält dieses Element als Parameter. Sie muss [true] zurückgeben, wenn das empfangene Element die Suchkriterien erfüllt. Die Suche wird dann beendet. Die Methode [find] gibt daher 0 oder 1 Element zurück;
  • Zeile 36: Die Methode [findIndex] funktioniert wie die Methode [find], gibt jedoch nicht das gefundene Element zurück, sondern dessen Index im Array;
  • Zeilen 39, 41: Die Methode [indexOf(value)] sucht im Array nach [value] und gibt dessen Index zurück, oder -1, falls er nicht gefunden wird;
  • Zeile 44: Die Methode [lastIndexOf(value)] funktioniert wie die Methode [indexOf(value)], beginnt ihre Suche jedoch am Ende des Arrays;
  • Zeile 47: Die Methode [sort] ohne Parameter gibt ein Array zurück, das in natürlicher Reihenfolge sortiert ist (Zahlen, Zeichenfolgen);
  • Zeile 50: Wenn die natürliche Reihenfolge nicht geeignet ist, müssen Sie der Methode [sort] eine Funktion mit zwei Parametern (e1, e2) übergeben, die Folgendes zurückgibt:
    • +1, wenn e1 nach e2 sortiert werden soll;
    • -1, wenn e1 vor e2 sortiert werden soll;
    • 0, wenn beide Elemente denselben Rang haben sollen;

Die als Parameter an die [sort]-Methode ü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.