Werken met Arrays

Variabelen in JavaScript zijn 'untyped'. Ze zijn niet aanwijsbaar als getal, string of pointer naar een object. Javascript behandelt alle data als string, tenzij uit de context blijkt dat de data anders geïnterpreteerd moeten worden.

Één van de datastructuren in JavaScript is de Array. Dat is een lijst met gegevens met een naam en een index. Anders dan de meeste andere programmeer- en scripttalen mag elk element in de lijst van een ander type zijn. Het ene element kan een string zijn, het volgende een getal (Number-object), dan weer een Image-object, enzovoort.

De array is dus heel veelzijdig. Het is daarom handig om te weten wat je allemaal met arrays kunt doen. Dat is veel meer dan je zou verwachten.

• Op deze pagina wordt besproken:
  1. Declaratie van een array
  2. Waarden toekennen aan array-elementen
  3. Waarden zoeken in een array.
  4. Een paar Properties en Methods van het object 'Array'
   
• In andere artikelen op deze site wordt besproken:
1. Meerdimensionale arrays. Zie daarvoor het item Meerdimensionale arrays in JavaScript.
2. Arrays sorteren. Zie daarvoor het item JavaScript-arrays sorteren.
3. Associatieve arrays voor het werken met objecten. Zie daarvoor het item JavaScript-object als associatieve array.
4. Array-elementen invoegen en verwijderen.
5. Arrays splitsen en samenvoegen.
 
• Declaratie van een array
• Arrays in JavaScript zijn dynamisch, dat wil zeggen: ze hebben geen vaste lengte. Als je echter een array declareert met een lengte, dan ligt die lengte vast (statische array).
• Er zijn twee manieren om een array te declareren:
  • var naam = new Array(item1, item2, ...);
  • var naam = [item1, item2, ...];
• Deze twee methodes leiden tot hetzelfde resultaat; het zijn dynamische arrays. Toch zijn er kleine verschillen in de manier waarop JavaScript er mee omgaat.
• Een statische array heeft de voorkeur als je al weet wat er in de array moet komen, bijvoorbeeld de namen van de kalendermaanden of een aantal automerken. Dat declareer je met var maanden = new Array(12).
• Let er bij de tweede methode op dat je geen komma zet na het laatste element. De verschillende browsers gaan hier anders mee om (wel of niet een element toevoegen, wat resulteert in verschillende waarden van length.
• Bij de eerste methode moet je minstens 2 elementen opgeven om een array te maken. Als je maar één element opgeeft, wordt dat anders verwerkt.
  De declaratie var naam = new Array(20, 10) maakt een array aan met daarin de getallen 20 en 10. De declaratie var naam = new Array(20) maakt echter een array aan met length = 20.
• De declaratie var naam = new Array() maakt een dynamische array aan, dus met een variabele lengte.
   
• Waarden toekennen aan array-elementen
• Je kunt direct bij de declaratie waarden (getallen, teksten) in een array zetten, zoals hierboven is gedaan.
• Je kunt het ook per element apart doen:
  Elk array-element heeft een index. Je gebruikt die index om de waarde in het juiste element te krijgen, bijvoorbeeld: var aa = new Array(); aa[2] = 7;.
  Omdat er nog geen waarde is toegekend aan aa[0] en aa[1], hebben die de waarde undefined.
   
• Waarden zoeken in een array
• Als je een waarde in een array zoekt kun je die vinden met behulp van een for-lus:
  var abcd = ["Opel","BMW","Audi"];
var my_index = -1, gezocht = "BMW";
for (i = 0; i < abcd.length; i++) {
  if (abcd[i] == gezocht) {
    my_index = i;
    break;
  }
}
  Het gevolg is dat my_index de waarde 1 krijgt, waarna de lus wordt afgebroken.
  Deze aanpak is erg inefficiënt, maar werkt altijd.
• Het zelfde bereik je met indexOf() of lastIndexOf(). Zie de volgende paragraaf voor een beschrijving.
• Als je de hoogste of laagste element uit een array zoekt, is het het meest efficiënt om de array te sorteren. De hoogste waarde staat dan op index [0], de laagste waarde staat op index [length-1].
  Het sorteren van arrays wordt beschreven in het item JavaScript-arrays sorteren.
   
• Een paar Properties en Methods van het object 'Array'
• De property length geeft het aantal elementen in een array, bijvoorbeeld: var abcd = new Array(17);
var aa = abcd.length;
  De waarde van aa is 17.
• Met length kun je ook de lengte van een array instellen: var abcd = new Array(17);
abcd.length = 22;
  De array bevat nu 22 elementen. De 5 nieuwe elementen in de array hebben geen waarde. Ze zijn "undefined"
• De method reverse() keert de volgorde van de array om.
• Met de method toString() zet je een array om in een string: var abcd = ["Opel","BMW","Audi"];
var aa = abcd.toString()
  De waarde van aa is nu "Opel,BMW,Audi". De elementen van de array worden gescheiden door komma's. De komma kun je niet vervangen door wat anders. Als de array een string met komma's bevat, kan dat ongewenste bijwerkingen hebben. De code var abcd = ["O,pel","BM,W","Aud,i"];
var aa = abcd.toString()
  leidt ertoe dat aa = "O,pel,BM,W,Aud,i". Als je hiermee verder werkt in je JavaScript-programma, kun je rekenen op vreemde namen van de automerken...
• De method join() doet bijna hetzelfde als toString: het zet de inhoud van de array in een string. Je kunt hier een string opgeven als scheidingsteken. De code var abcd = ["Opel","BMW","Audi"];
var aa = abcd.join(' of ')
  leidt er toe dat aa = "Opel of BMW of Audi"
  Als je de parameterlijst leeg laat wordt een komma gebruikt. je kunt het scheidings teken weglaten door een lege string aan join mee te geven. De code var abcd = ["Opel","BMW","Audi"];
var aa = abcd.join('')
  leidt er toe dat aa = "OpelBMWAudi".
• De method valueOf() verwijst naar het object zelf. Stel: abcd is een array. De twee opdrachten
  var x = abcd.valueOf(); en var x = abcd;
  zijn gelijkwaarding.
• Met de method indexOf() kun je een waarde in een array opzoeken. Er wordt gezocht vanaf het begin van de array. De code:
  var abcd = ["Opel","BMW","Audi"];
var aa = abcd.indexOf("BMW")
  leidt er toe dat aa = 1 (er wordt geteld vanaf nul!).
  Als de waarde niet wordt gevonden, geeft indexOf() de waarde -1 terug.
• De method lastIndexOf() doet hetzelfde als indexOf(), zij het dat er wordt gezocht vanaf het einde van de array.
• Opmerking: de methods indexOf() en lastIndexOf() zijn niet beschikbaar in Internet Explorer vóór versie 9.

Opmerking:
 
Een array in JavaScript is een Object. Elk opject heeft de methods valueOf() en toString().