Multidimensionale Arrays in Javascript

Posted in : Javascript, Websites on by : Administrator Comments: 0

Toen ikzelf research aan het doen was voor een opdracht op school naar het maken van een multidimensionale array kwam ik er achter dat er nergens een goede omschrijving is hoe het nou eigenlijk moet. Behalve een filmpje wat ikzelf er goed vond. Toen heb ik besloten deze blog post te maken.

Javascript heeft ingebouwd geen goede support voor multidimensionale array’s zoals bijvoorbeeld PHP dat wel heeft.¬†Maar om er toch nog aan te komen is er een trucje die ik hier zal gaan uitleggen. Als het kwartje gevallen is, kan je er zo veel mee doen, en is het ook niet moeilijk meer.

We weten allemaal hoe we een variabele aan kunnen maken in javascript. In dit voorbeeld maak een variabele met de naam opel aan. De standaard waarden maken we astra.

var opel = "astra";

We hebben de variabele opel de waarde Astra gegeven. Maar wat nou als we meerdere modellen van Opel bekent willen hebben? Dit kan erg makkelijk met een array. Het principe van een array is het hebben van meerdere waarden in een variable, dit klinkt erg onlogisch maar het is zo makkelijk om mee te werken binnen javascript. We hebben nu de modellen Vivaro, Zafira, Movano, Agila, Corsa en Insignia toevoegen in een array. Een array begin je altijd met een [. De verschillende waarden worden gescheiden met een , en afgesloten met een ] en een ;. Hieronder zal ik een array maken zoals hij met de modellen die hier boven staan er uit komt te zien.

var opel = ["Astra", "Vivaro", "Zafira", "Movano", "Agila", "Corsa", "Insignia"];

Zoals je kan zien begin ik de waarde van de variable met een [, gevolgt door aanhalings tekens. Dat komt omdat de namen in een string moeten, het invoeren van de verschillende data soorten doe je dus hetzelfde binnen een array als bij al het andere in javascript. Er zijn meerder mogelijkheden om een array binnen javascript te maken, maar om het voor deze tutorial makkelijk te houden doe ik het op deze manier. Later zal ik een tutorial maken over Array’s zelf waarin ik het duidelijker zal uitleggen.

Nu willen we de waarde Agila oproepen uit de array om in een alert box te plaatsen. Als een variable geen array bevat doe je dit door alleen de variable naam in te vullen, in dit geval opel. Maar omdat we de speciefieke waarden Agila willen hebben moeten we dit duidelijk maken aan javascript. Als je dat niet doet krijg je het volgende in de alert box:

"Astra", "Vivaro", "Zafira", "Movano", "Agila", "Corsa", "Insignia"

Dat is niet wat we willen, voordat ik verder ga is het belangrijk te weten dat javascript, net als veel andere programmeer talen begint te tellen bij nul, dus niet bij een. Astra is in deze array de eerste waarden, maar heeft de positie nul. Dit is erg belangrijk dat je dit goed onthoud met het programmeren. Als Astra positie nul is, dan is Vivaro een, Zafira twee, en zo verder. Wij willen Agila aanroepen in een alert box, en als we op deze manier tellen heeft Agila de positie vier. Als we nu dus een alert box willen maken die Agila uitput gebruiken we de functie alert, en we vullen het volgende in: opel[4]. De functie laad nu de vierde positie van de variable opel. En we krijgen Agila te zien, de code ziet er dan als volgende uit:

alert(opel[4]);

Tot zover zijn we niet veel verder gegaan dan een standaard array, maar niet waar het uiteindelijk om gaat. We willen per opel model ook het aantal deuren dat beschikbaar zijn, en de grootst mogelijke motor. Hierboven hebben we telkens aanhalings tekens gebruikt om de waarde aan te geven van die positie. Om een multidimensionale array te maken voegen we in plaats van aanhalingstekens [] toe, en vullen we daar de waarden. Ik zal hieronder de complete multidimensionale array neerzetten, en hem daarna uitleggen.

var opel = [ 
  ["Astra", 5, "2.0L Diesel"],
  ["Vivaro", 4, "2.5L Diesel"],
  ["Zafira", 5, "2.0L Diesel"],
  ["Movano", 4, "2.3L Diesel"],
  ["Agila", 5, "1.3L Diesel"],
  ["Corsa", 5, "1.7L Diesel"],
];

Hierboven staat de complete array, zoals je kan zien het ik de maximaal aantal deuren niet in een string gezet, maar in een integer gezet. Hij kan ook in een string staan, dit is geen enkel probleem. Alleen mochten we er mee willen gaan rekenen moeten we hem eerst omzetten naar een integer of float voordat dat kan.

Overal op de eerste positie staat het model, daar achter staan het maximaal aantal deuren, en daar achter de grootst mogelijke motor. Nog steeds zijn de waarde gescheiden met een komma in de array. Zoals je misschien al ziet, maak je feitelijk een array, in een bestaande array. Ook deze begint zoals te verwachten met tellen bij nul, dus alle informatie van de Astra heeft positie nul, van de Vivaro heeft positie een, Zafira is twee en zo verder. We hebben nu een multidimensionale array gemaakt.

Stel dat we nu van de Movano de grootste mogelijk motor willen oproepen. Onze hoofd array nummer is dan 3, en de waarde die we nodig hebben is 2. Als we dit dan weer in een alert box zetten ziet het er als het volgende uit:

alert(opel[3][2]);

Het zal misschien nu als moeilijk uit zien, maar als je er mee gaat werken word het steeds makkelijker en zal je steeds meer voordelen er uit gan halen.

Geef een reactie