Kies een thema:

Cursus Javascript

Beginner


Gevorderde


    Appendix


      Informatie


      Referenties


      Links


        2 Variabelen

        2.4 Arrays


        » Inhoudstafel
        2.4.1 Inleiding
        2.4.2 Dimensionele Array
        2.4.3 Associatieve Array
        2.4.4 Hashes
         Test je kennis!

        2.4.1 Inleiding

        Een array is een manier om dingen te ordenen. Array's vind je terug in elke computertaal. Het is een van de belangrijkste manieren om variabelen te ordenen.

        Een array kun je doorheen loopen, de gegevens van die array gebruiken, die gegevens manipuleren en herbruiken.

        Het aanmaken van een Array gebeurt op verschillende manieren, afhankelijk van je smaak en soort array. Ik laat hier een voorbeeld zien van het aanmaken van een lege Array:

        var mijnArray = new Array( [ Integer aantal_elementen ] );

        De integer tussen de vierkante haakjes is optioneel. Je hoeft die dus niet in te vullen. Mocht je controle willen hebben op het aantal elementen in een Array, kun je die alsnog invullen. Hier een voorbeeld van een Array met 3 elementen:

        var mijnArray = new Array( 3 );

        Zoals je in de twee voorbeelden hierboven ziet, is Array ook een object. Je kunt dus achter een array element een methode plakken.

        De Array constructor accepteert ook string(s) als parameter(s). JavaScript zal dat dan als een Array aanmaken:

        var mijnArray( "Element 0", "Element 1", "Element 2" );

        Laten we eens verder kijken hoe je de Array kunt gebruiken. We beginnen met een dimensionele Array.

        2.4.2 Dimensionele Array

        Een dimensionele array is een array met meerdere dimensies. Een voorbeeld van een 1-dimensionele Array:

        var oneDimensional = new Array( 3 );
oneDimensional[0] = "Een";
oneDimensional[1] = "dimensionele";
oneDimensional[2] = "Array";
 
alert( oneDimensional.join(' ') );

        Zoals je kunt zien heb ik hierboven een parameter meegegeven aan de Array constructor. Dit betekent dat JavaScript 3 elementen voor mij zal reserveren waarin ik content aan kan toevoegen. Als je deze code uitvoert zul je de inhoud van de array in een alert boxje zien (zie voorbeeld sectie voor uitvoering).

        Je ziet hier dat ik de method join gebruik. De functie join voegt alle elementen van een Array samen tot 1 string met de parameter als plakmiddel.

        Een andere manier om een Array aan te maken gaat zo:

        var oneDimensional = [ "Een", "dimensionele", "Array" ];
        Een constructor is een object aanmaker. Meer hierover in het Object hoofdstuk in de gevorderde sectie.

        Wij hebben hierboven, en bij de inleiding, een 1-dimensionele Array aangemaakt. 
        Er is geen limiet in het maken van dimensionele Arrays, dus laten we kijken of we een 4-dimensionele Array kunnen maken. Dit is gewoon om te laten zien dat het kan:

        var fourDimensional = new Array( 1 );
fourDimensional[0] = new Array( 1 );
fourDimensional[0][0] = new Array( 1 );
fourDimensional[0][0][0] = new Array( 1 );
fourDimensional[0][0][0][0] = 'Ik zit in de 4e dimensie';
 
alert( fourDimensional[0][0][0][0] );

        Zoals je kunt zien, is dit niet zo erg handig en niet erg leesbaar. Daarom beperken de meeste programmeurs zich tot de 2e dimensie.

        Wat je ook van dit voorbeeld hebt kunnen zien, is dat een Array element gewoon gezien kan worden als een normale variabele want we hebben een Array object in een element gestopt. Een Array is niets anders dan een variabele in een variabele. Je kunt ook andere types in een array element stoppen.

        Laten we een Array aanmaken waarin we informatie van een product opslaan. We gaan gebruik maken van een 2-dimensionele Array, aangezien we meerdere producten moeten kunnen opslaan.

        var productsArray = new Array( );
productsArray[0] = new Array(  4);
 
productsArray[0][0] = 'P24350';   // productcode
productsArray[0][1] = 'Product 1'; // product titel
productsArray[0][2] = 12.96;       // product prijs
productsArray[0][3] = 200;          // product voorraad

        Je ziet dat ik bij productsArray geen aantal elementen aangeef. Dit komt omdat we flexibiliteit willen hebben. Er kunnen elke dag producten bijkomen en weggaan. Zo hoeven wij de constructor niet telkens te veranderen en blijft de Array flexibel.

        Als we nu nog een product willen toevoegen, maken we gewoon nog een element aan in de 1e dimensie. In de 2e dimensie zetten we dan de product informatie. De reden dat we twee dimensies hebben is, omdat we zo een mooie overzichtelijke Array hebben. De ene product heeft dan niets te maken met de andere.

        Nu is dit een simpel voorbeeld van hoe een Array in elkaar steekt, dus kunnen we ons veroorloven erbij te zetten in welke element wat zit via de comments.

        Een comment is een stukje tekst achter twee slashes waar je een beschrijving over een stuk code kunt neerplantent.
        Het zal andere programmeurs goed doen, aangezien ze niet hoeven te puzzelen hoe jij het in elkaar hebt gestoken.

        Maar wat als we nog meer informatie willen opslaan. Dan wordt het nogal onoverzichtelijk. Je gaat je afvragen wat ook alweer in element 12 moest zitten. Je kunt niet bij elke product comments neerzetten, dat is niet handig. Daarvoor heeft JavaScript een ander soort Array, de associatieve array.


        » Voorbeelden:

        2.4.3 Associatieve Array

        Een associatieve Array is een array met een string als identifier voor een element. We hebben tot nu toe alleen integers gebruikt als key.

        Een array is als volgt opgebouwd:
        key => waarde

        Een dimensionele Array is een Array met integers als key, een associatieve array heeft dus strings als key. 
        Laten we de product Array herschrijven zodat we een associatieve Array hebben voor de producten.

        var productsArray = new Array( );
 
productsArray[0] = new Array( 4 );
 
productsArray[0]['productcode'] = "P24350"; 
productsArray[0]['product_titel'] = "Product 1";
productsArray[0]['product_prijs'] = 12.96; 
productsArray[0]['product_voorraad'] = 200;
 
alert( productsArray[0]["productcode"] );

        Dit zal de productcode geven. Je kunt dan "productcode" wijzigen naar een andere stringwaarde van de Array.
        Dit is veel overzichtelijker dan nummers, vind je niet ? Overzichtelijkheid is ook niet alles wat er anders is nu.

        Je kunt nu ook een soort loop gebruiken om door de Array heen te gaan. Dit valt echter buiten dit hoofdstuk.


        » Voorbeelden:

        2.4.4 Hashes

        Een hash zou ik niet echt een Array meer willen noemen aangezien het in JavaScript eigelijk wordt gezien als een attribuut setter.

        Een attribuut is een eigenschap van een object.

        Met een hash kun je een variabele attributen geven. Laten we een Hash maken die een mens moet voorstellen:

        var humanHash = { 'oog': { 'kleur': 'blauw' }, 'haar': { 'kleur': 'zwart', 'stijl': 'stekels' } };
 
alert( humanHash.oog.kleur );

        Wat JavaScript hier doet is het aanmaken van een object en daaraan attributen plakken. Als je nu alert( humanHash ); doet, 
        zul je zien dat in de alert boxje [ object Object ] tevoorschijn komt.

        In bovenstaande voorbeeld zie je ook dat je een Hash in een Hash element kunt stoppen. De attribuut wordt dan een object die dan weer attributen heeft. 
        Die noem je dan subattributen.

         


        » Voorbeelden:

        « Numbers    Booleans »