Array of light

Ik was wat aan het experimenteren met arrays in Javascript. En mijn leerpuntjes maar eens vast te leggen, want ik krijg altijd hoofdpijn als ik wat meer wil doen dan enkele een lijstje tonen.

Enkele basis wetenswaardigheden die voor een beginner lastig zijn:
Het aantal items kan je achterhalen met myArray.length;
Maar de teller in een array begint bij 0. Het eerste item is dus myArray[0], terwijl myArray.length dan 1 is. Als je dus 35 items in je array hebt is myArray[34] je laatste item.

Ook is het handig om dit te begrijpen:

Arrays zijn objecten!

Arrays zijn daardoor een beetje lastig.

Als je een variabele X maakt en die vult met een integer, dan bevat die echt de waarde. Als je een tweede variabele Y maakt en zegt Y= X, dan heeft Y een zelfstandige waarde die je kan aanpassen.

Een variabele X die je vult met een object, bevat onder de motorkap niet het object, maar een verwijzing naar een stukje geheugen met de objectgegevens.

Dus wanneer je variabele Y maakt en zegt Y= X, dan kopieer je de verwijzing naar dezelfde objectgegevens.

Gevolg is dat als je in variabele Y iets aanpast, dit ook in variable X wordt getoond.

Dat levert veel frustratie op als je dat niet door hebt. Dit geldt ook als je met functionclasses werkt.

Slice

Een array kopiëren doe je niet met:

var copyArray = originalArray;

Dan kopieer je dus de object verwijzing van de array. Wat wel werkt is met een for-loop:

var sourceArray= ['kat','hond','konijn'];
var copyArray =[]; // empty array
for(var i=0; i<sourceArray.length; i++){
   copyArray[i] = sourceArray[i];
}

Dan is Slice handiger:

var copyArray = sourceArray.Slice(0);

Maar let ook hier op: als je een array van objecten hebt, dan is copyArray een nieuw en uniek array, maar de items verwijzen nog wel naar dezelfde objecten!

Een voordeel van Slice is dat het vooral bij grote arrays sneller kan zijn. Kopiëren kan overigs ook op een andere manier die hieronder staat beschreven.

Multidimensionale arrays

Die worden eigenlijk niet ondersteund. Het is gewoon een array van arrays. Je kan wel het array item benaderen met:

myArray[row][cell]; // myArray[row] bevat een array en daar [cell] van

Het kopiëren is ook weer opletten: een gecontroleerde oplossing is om een nieuwe Array aan te maken en deze te vullen met de waarden uit de andere array  (…tenzij dat ook weer objecten zijn).

Interessant nieuwe Array trucjes

Inmiddels hebben ze wel wat extra’s toegevoegd aan Javascript, die het werken met Arrays makkelijker maken. Ik weet niet wanneer ze erbij zijn gekomen, maar kwam ze gelukkig tegen:

forEach

Voorheen ging het alsvolgt:

for (var i= 0; i< myArray.length; i++) {
  //doe iets met myArray[i];

foreach maakt het leven wat makkelijker:

myArray.forEach(function(item, index, arr){
// doe iets met parameters
});

In parameter item komt de inhoud van het element in de array De parameters index en arr kan je weglaten, maar kunnen handig zijn: index is het volgnummer van het element in de array, en arr is het volledige array.

Map

Hiermee kan een nieuwe array maken:

var arr = ['kat','hond','konijn'];
var newArr = arr.map(function(item, i){
return "beest "+ (i+1) +". "+item;
});

// newArr = ['beest 1. kat', 'beest 2. hond','beest 3. konijn']

Als je alleen het item teruggeeft heb je dit wel een unieke kopie van de array   (…tenzij dat ook weer objecten zijn).

Filter

Hiermee kopieer je een array, maar in de functie geef je de waarde niet terug, maar een boolean if het item wel of niet mag voorkomen:

var arr = ['kat','hond','konijn'];
 var newerArr = arr.filter(function(item){
    return (item !='hond');
});
// newArr = ['kat', 'konijn']

Dus alle items behalve de hond.

IndexOf

Om te controleren of een waarde in je array zit, hoef je niet meer met foreach er doorheen, maar kan je indexOf gebruiken (werkt dus niet voor objecten).

var arr = ['kat','hond','konijn'];
arr.indexOf('konijn') // geeft 2;

Every

Een snelle manier om te kijken of een bepaalde waarde aanwezig is kan met every:

var arr = ['kat','hond','konijn'];
 var bevatKip = arr.every(function(item){
    return (item =='kip');
});
 var bevatHond = arr.every(function(item){
    return (item =='hond');
});
// geenKip = false;
// bevatHond  = true;

Enkele bronnen

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s