Skip to content

4. Tabellen

Image

4.1. script [tab-01]

Het volgende script illustreert enkele kenmerken van JavaScript-arrays. Deze lijken op de PHP-arrays, maar met één groot verschil: ze worden via pointers gemanipuleerd en worden als objecten beschouwd.


''use strict';

// een array is een object dat via zijn adres wordt gemanipuleerd
const tab1 = [1, 2, 3];
// kopiëren van adressen
const tab2 = tab1;
// tab1 en tab2 verwijzen naar dezelfde array
console.log("tab1===tab2 :", tab1 === tab2);
// de array kan worden gewijzigd via zowel tab1 als tab2
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

Uitvoering


[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 ]

Opmerkingen

  • uit regel 2 van de resultaten blijkt dat [tab1] en [tab2] twee identieke entiteiten zijn, in feite twee identieke pointers;
  • uit regel 4 en 5 van de resultaten blijkt dat deze twee pointers naar dezelfde array verwijzen;

4.2. script [tab-02]

Dit script laat zien dat de JavaScript-array verschilt van arrays in gecompileerde talen.


''use strict';

// array
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// initialisatie van een element
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("-------------------------------");
// de sleutels van de tabel zijn de indices
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// de waarden van de array
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}
  • regel 4: een leeg array;
  • regel 8: een array heeft geen vaste grootte. Het is gewoon een reeks elementen die met een nummer worden geïndexeerd. Je kunt element nr. 3 initialiseren, zelfs als de elementen [0, 1, 2] nog niet zijn gedefinieerd;
  • regels 16-24: een JavaScript-array gedraagt zich op dezelfde manier als de array PHP;

Uitvoering


[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. script [tab-03]

Dit script toont verschillende methoden van het object [tableau].


'use strict';
// een array kan verschillende gegevenstypen bevatten
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
// console.log kan de inhoud van een array weergeven
show(1);
console.log("tab=", tab);
show(2);
// door de array lopen met foreach
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// een andere manier om hetzelfde te doen
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// de array doorlopen met for
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// tab-wijziging[i]
tab[5] = [];
// weergave
console.log("tab=", tab);
show(5);
// het laatste element verwijderen
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// een element aan het einde van de array toevoegen
tab.push('xyz');
console.log("tab=", tab);
show(7);
// een element aan het begin van de tabel toevoegen
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// het eerste element uit de array verwijderen
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
// element nr. 2 uit de tabel verwijderen
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
// er worden twee elementen uit de tabel verwijderd, te beginnen bij element nr. 1
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

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

Opmerkingen

  • Het verschil tussen PHP-arrays en JavaScript-arrays wordt geïllustreerd door de regels 3 en 24:
    • in regel 3 wordt de variabele [tab] als constante gedeclareerd;
    • regel 24 wijzigt het element tab[5];

In regel 3 wordt de pointer die naar de array verwijst als constant gedeclareerd, niet de array zelf. Deze kan worden gewijzigd.

  • regels 14-16: de array [tab] wordt doorlopen met behulp van een methode [forEach] van de array [tab]. Deze methode ontvangt als parameter de definitie van een functie, die we een letterlijke functie zouden kunnen noemen. Deze parameterfunctie ontvangt één parameter: het huidige element van de array [tab]. De functie wordt voor elk element van de array aangeroepen. Deze schrijfwijze is gebruikelijk in JavaScript;
  • regels 9-10: er wordt een andere syntaxis gebruikt om de parameterfunctie te definiëren. In plaats van te schrijven:
    • function(p1, p2, …, pn){….}

schrijven we:

  • (vervolg)
    • (p1,p2, ..,pn)=>{.…}. Dit wordt de ‘pijlnotatie’ of ‘arrow-notatie’ genoemd;
  • de rest van de code wordt uitgelegd door de opmerkingen;

Uit dit script blijkt het volgende:

  • een array een object is waarnaar met een pointer wordt verwezen;
  • dat dit object methoden [forEach, pop, push, shift, unshift] heeft;

4.4. script [tab-04]

Dit script toont andere methoden van array-objecten.


'use strict';

// methode voor het bewerken van arrays

// een array
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// weergave
console.log("tab=", tab);
// map
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// weergave
console.log("tab=", tab);
console.log("tab2=", tab2);
// reduce zonder beginwaarde
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// reduce met beginwaarde
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);
// zoeken
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);
// uitkomst
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// omgekeerde sortering
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);

Opmerkingen

  • regels 13-15: de methode [map] accepteert een transformatiefunctie als parameter. Deze wordt herhaaldelijk aangeroepen voor elk element van de array. De functie is verantwoordelijk voor het omzetten van het element in iets anders, in dit geval een object met de eigenschappen [prop1, prop2]. De methode [map] retourneert een nieuwe array. De oude wordt niet gewijzigd: 

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 } ]
  • regel 20: de methode [reduce] accepteert als parameter een functie met twee parameters die herhaaldelijk wordt aangeroepen voor elk element van de tabel. Deze functie accepteert twee parameters:
    • [currentValue] is het huidige element van de array;
    • [accumulator] is het laatste resultaat dat door de functie is verkregen. Als er geen beginwaarde voor deze accumulator is opgegeven, dan is deze 0;
    • de eerste keer dat de accumulatiefunctie wordt aangeroepen, retourneert deze [0+tab[0]]. Deze waarde wordt aan de accumulator toegewezen;
    • de tweede keer retourneert de functie accumulator+tab[1], dus tab[0]+tab[1];
    • de derde keer levert dit accumulator+tab[2] op, dus tab[0]+tab[1]+tab[2];
    • enzovoort. Uiteindelijk zal de accumulator de som van alle elementen van de array [tab] vertegenwoordigen;
  • regel 26: de methode [filter] heeft als parameter een filterfunctie. Deze wordt herhaaldelijk aangeroepen voor elk element van de array en ontvangt dit als parameter. De functie moet het volgende retourneren:
    • [true] als het element behouden moet blijven;
    • [false] anders;
  • regel 33: de methode [find] heeft als parameter een zoekfunctie. Deze wordt herhaaldelijk aangeroepen voor elk element van de array en ontvangt dit als parameter. De functie moet [true] retourneren als het ontvangen element aan het zoekcriterium voldoet. De functie stopt dan. De methode [find] retourneert dus 0 of 1 element;
  • regel 36: de methode [findIndex] werkt net als de methode [find], maar in plaats van het gevonden element terug te geven, geeft deze de index ervan in de array terug;
  • regels 39 en 41: de methode [indexOf(valeur)] zoekt naar [valeur] in de array en retourneert de index ervan, of -1 als het niet wordt gevonden;
  • regel 44: de methode [lastIndexOf(valeur)] werkt net als de methode [indexOf(valeur)], maar begint de zoekopdracht aan het einde van de array;
  • regel 47: de methode [sort] zonder parameters retourneert een array die in natuurlijke volgorde is gesorteerd (getallen, tekenreeksen);
  • regel 50: wanneer de natuurlijke volgorde niet geschikt is, moet aan de methode [sort] een functie met twee parameters (e1, e2) worden doorgegeven die het volgende retourneert:
    • +1 als e1 na e2 moet worden gerangschikt;
    • -1 als e1 vóór e2 moet worden gerangschikt;
    • 0 als beide elementen dezelfde rangorde moeten hebben;

De functie die als parameter aan de methode [sort] wordt doorgegeven, wordt door deze methode herhaaldelijk aangeroepen om twee elementen van de array te vergelijken;

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld volgens de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 ongewijzigd.