Arrays worden vaak ook gegevensvelden of tabellen genoemd.
var mijnArray = new Array();
Aan een variabele kan je altijd maar één waarde tegelijk toewijzen. Een Array daarentegen kan verschillende waarden bevatten. Men spreekt daarbij van verschillende elementen, waarbij elk element een waarde heeft. De afzonderlijke elementen gedragen zich bijgevolg als variabelen. In plaats van tien variabelen kan je dus ook een Array van tien elementen gebruiken.
Arrays hebben nog een groot voordeel : de verschillende elementen worden doorlopend genummerd. In een lus kan je dan via een automatische teller de Array doorlopen.
In onderstaand voorbeeld maken we eerst een Array met 3 elementen. De Array is gekend onder de naam namen. Het opvullen van de Array doe je door aan elk element van de Array een waarde toe te kennen. Het eerste element is namen[0] en krijgt de waarde "William" toegewezen. Elementen kunnen we dus aanspreken door de naam van de Array te laten volgen door een indexcijfer tussen vierkante haakjes: [ en ]. Dit indexcijfer is zero-based: het eerste cijfer is een nul.
Het aantal elementen in een Array kan je opvragen via de eigenschap length van de Array.
Je kan met een eenvoudige for-lus alle elementen van de Array aflopen.
var namen = new Array(3);
namen[0] = "William";
namen[1] = "Jos";
namen[2] = "Tine";
document.write("<br>Aantal namen: " +namen.length);
document.write("<br>Eerste naam: " +namen[0]);
document.write("<br>Tweede naam: " +namen[1]);
document.write("<hr>");
for(var i = 0; i < namen.length ; i++){
document.write("<br>naam" +(i+1) +": " +namen[i]);
}
In dit tweede voorbeeld wordt een Array op een compacte manier gevuld met gemeenten.
var gemeenten = new Array("Knokke","Brugge","Gent","Oostende");
document.write("<br>Aantal gemeenten: " +gemeenten.length);
for(var i = 0; i < gemeenten.length ; i++){
document.write("<br>gemeente" +(i+1) +": " +gemeenten[i]);
}
Een alternatieve manier om een Array af te lopen is met een for...in-lus.
Hier neemt de variabele item de taak van de index over: voor elk element in de Array wordt het indexcijfer in de variabele item gestopt.
var gemeenten = new Array("Knokke","Brugge","Gent","Oostende");
document.write("
Aantal gemeenten: " +gemeenten.length);
for(var item in gemeenten){
document.write("<br>gemeente" +item +": " +gemeenten[item]);
}
Arrays ondersteunen een aantal methoden:
| Methode |
Beschrijving |
| concat |
Voeg de elementen van twee (of meer) Arrays samen |
| join |
Plaatst alle elementen van een Array in een String. De elementen worden gescheiden door een aangegeven delimeter (standaard een komma). |
| pop |
Verwijdert en retourneert het laatste element van de Array |
| push |
Voegt een of meerdere elementen toe aan een Array en retourneert de nieuwe lengte van de Array |
| reverse |
Keert de volgorde van de Arrayelementen om |
| shift |
Verwijdert en retourneert het eerste element van de Array |
| slice |
Maakt een nieuwe Array van een aangegeven bereik in een Array.
Argumenten: beginpositie en optioneel de eindpositie |
| sort |
Sorteert de elementen in de Array |
| splice |
Elementen verwijderen en toevoegen aan een Array. Deze methode retourneert de verwijderde elementen.
Argumenten: startpositie voor verwijderen, aantal te verwijderen elementen, nieuwe elementen |
| unshift |
Voegt een of meerdere elementen toe aan het begin van de Array en retourneert de nieuwe lengte |
var dieren = new Array("koe","aap","ezel");
var beesten = new Array("paard","eend","kikker","hond");
document.write("<br>Dieren: <b>" +dieren.join() +"</b>");
// als je join() niet gebruikt levert de naam van de Array ook een String
document.write("<br>Nog eens de dieren: <b>" +dieren +"</b>");
document.write("<br>Beesten: <b>" +beesten.join("-") +"</b>");
document.write("<br>Dieren en beesten: <b>" +dieren.concat(beesten) +"</b>");
document.write("<br>Dieren omgekeerd: <b>" +dieren.reverse() +"</b>");
document.write("<br>Dieren gesorteerd: <b>" +dieren.sort() +"</b>");
document.write("<br>Beesten eruit: <b>" +beesten.splice(1,2) +"</b>");
document.write("<br>Beesten over: <b>" +beesten +"</b>");
document.write("<br>dieren.pop(): <b>" +dieren.pop() +"</b>");
document.write("<br>dieren.push('kat'): <b>" +dieren.push("kat") +"</b>");
document.write("<br>dieren: <b>" +dieren +"</b>");
Bij het toepassen van een methode op een Array wordt deze onmiddellijk gemanipuleerd en is dus de originele Array veranderd.
Wil je de originele Array bewaren, dan moet je die eerst 'kopiëren' in een ander Array-object. Dit is anders dan bij de String-methoden uit het vorige hoofdstuk.
Een Array kan ook meerdere dimensies hebben.
Een tweedimensionele Array kunnen we ons als een tabel voorstellen:
var Adressen = new Array(4)
for ( var teller = 0; teller<Adressen.length;teller++) {
Adressen[teller]=new Array(3);
}
Adressen[0][0]="Peters";
Adressen[0][1]="Pol";
Adressen[0][2]="Brugge";
Adressen[1][0]="Janssens";
Adressen[1][1]="Sofie";
Adressen[1][2]="Oostkamp";
Adressen[2][0]="Vandenberghe";
Adressen[2][1]="Jan";
Adressen[2][2]="Blankenberge";
Adressen[3][0]="Willems";
Adressen[3][1]="Elien";
Adressen[3][2]="Kortrijk";
Adressen.sort();
for (var n = 0;n<Adressen.length;n++) {
for (var m = 0;m<Adressen[n].length;m++){
document.write(Adressen[n][m] +" ");
}
document.write("<br>");
}
We declareren eerste een eendimensionele Array adressen. Elk element uit deze nieuwe Array wordt met behulp van een lus gedeclareerd als een Array.
Een driedimensionele n x m x l Array kunnen we ons voorstellen als een kubus bestaande uit l tabellen.
Associatieve Arrays geven je de mogelijkheid te werken met text-indices in plaats van numerieke waarden.
Het overlopen van de Array kan nu best met een for...in-lus.
var arrAuto = new Array();
arrAuto["klein"] = "Smart";
arrAuto["stad"] = "Renault Twingo";
arrAuto["snel"] = "Porsche";
document.write("<br>Kleine auto:" +arrAuto["klein"]);
document.write("<hr>");
for( soort in arrAuto ) {
document.write("<br>" +soort +" :" +arrAuto[soort]);
}
In feite worden objecten in Javascript op een analoge manier behandeld.
Wil je de eigenschap appName van het object navigator opvragen dan tik je normaal:
document.write("Uw browser: " +navigator.appName);
Resultaat:
Je kan eigenschappen van objecten ook benaderen door het object te behandelen als een associatieve Array:
document.write("Uw browser: " +navigator["appName"]);
Resultaat:
