Een array is een speciale variabele die meerdere waarden kan bevatten. In plaats van voor elke waarde een aparte variabele te maken, kun je ze allemaal in één array stoppen.
let namen = ["Alice", "Bob", "Charlie"];
let getallen = [10, 20, 30, 40];Elke waarde in een array heeft een index (positie). De eerste waarde heeft index 0, de tweede heeft index 1, enzovoort.
let namen = ["Alice", "Bob", "Charlie"];
console.log(namen[0]); // "Alice"
console.log(namen[1]); // "Bob"
console.log(namen[2]); // "Charlie"Arrays beginnen altijd te tellen bij 0! De eerste waarde staat op positie 0, de tweede op positie 1, enz.
Laten we beginnen met het maken van simpele arrays en het ophalen van waarden.
Maak een array fruit met drie waarden: "appel", "banaan" en "peer".
Maak een array scores met vier getallen: 10, 25, 30, 45.
De array kleuren is al gemaakt. Log de eerste waarde (index 0) naar de console.
De array cijfers is al gemaakt. Log de derde waarde (index 2) naar de console.
Maak een array steden met drie steden: "Amsterdam", "Rotterdam", "Utrecht". Log de tweede stad naar de console.
Je kunt het aantal elementen in een array opvragen met .length.
let namen = ["Alice", "Bob", "Charlie"];
console.log(namen.length); // 3De array dieren is al gemaakt. Log de lengte van de array naar de console.
Maak een array maanden met 4 maandnamen (bijvoorbeeld "januari", "februari", etc.). Maak daarna een variabele aantal die de lengte van de array bevat.
Met .indexOf() kun je de index (positie) van een bepaalde waarde in een array opzoeken. Als de waarde niet bestaat in de array, krijg je -1 terug.
let fruit = ["appel", "banaan", "peer"];
console.log(fruit.indexOf("banaan")); // 1
console.log(fruit.indexOf("sinaasappel")); // -1 (niet gevonden)De array kleuren bevat ["rood", "groen", "blauw"]. Zoek de index van "groen" en log deze naar de console.
De array getallen bevat [5, 10, 15, 20, 25]. Zoek de index van het getal 20 en sla deze op in de variabele positie.
De array namen bevat ["Alice", "Bob", "Charlie"]. Controleer of "Diana" in de array voorkomt. Log "Gevonden" als de index niet -1 is, anders log "Niet gevonden".
De array steden bevat ["Amsterdam", "Rotterdam", "Utrecht", "Den Haag"]. Zoek de positie van "Utrecht" en verwijder die stad met splice.
Met .push() kun je een nieuwe waarde aan het einde van een array toevoegen.
let namen = ["Alice", "Bob"];
namen.push("Charlie");
// namen is nu ["Alice", "Bob", "Charlie"]De array getallen bevat [1, 2, 3]. Gebruik push() om het getal 4 toe te voegen.
De array fruit bevat ["appel", "peer"]. Voeg "banaan" toe met push.
Maak een lege array taken. Voeg drie taken toe met push: "wassen", "koken", "lezen".
De array scores is al gemaakt. Voeg het getal 100 toe aan het einde.
Met .unshift() kun je een nieuwe waarde aan het begin van een array toevoegen. Alle andere waarden schuiven één positie op.
let namen = ["Bob", "Charlie"];
namen.unshift("Alice");
// namen is nu ["Alice", "Bob", "Charlie"]De array getallen bevat [2, 3, 4]. Gebruik unshift() om het getal 1 aan het begin toe te voegen.
De array taken bevat ["koken", "lezen"]. Voeg "wassen" toe aan het begin met unshift.
Maak een lege array rij. Voeg drie namen toe met unshift: eerst "Charlie", dan "Bob", dan "Alice". Log de array.
Met .pop() kun je de laatste waarde uit een array verwijderen. De verwijderde waarde wordt ook geretourneerd.
let namen = ["Alice", "Bob", "Charlie"];
let laatsteNaam = namen.pop();
// namen is nu ["Alice", "Bob"]
// laatsteNaam is "Charlie"De array getallen bevat [10, 20, 30]. Gebruik pop() om de laatste waarde te verwijderen.
De array kleuren bevat ["rood", "groen", "blauw"]. Verwijder de laatste kleur met pop en sla deze op in de variabele verwijderd.
De array taken bevat ["wassen", "koken", "lezen", "sporten"]. Verwijder de laatste twee taken met twee keer pop.
Maak een array stapel met drie waarden: "A", "B", "C". Verwijder de laatste waarde en log deze naar de console.
Met .shift() kun je de eerste waarde uit een array verwijderen. De verwijderde waarde wordt ook geretourneerd en alle andere waarden schuiven één positie terug.
let namen = ["Alice", "Bob", "Charlie"];
let eersteNaam = namen.shift();
// namen is nu ["Bob", "Charlie"]
// eersteNaam is "Alice"Vergelijk de vier methodes: push en pop werken aan het einde, unshift en shift werken aan het begin van de array.
De array getallen bevat [10, 20, 30]. Gebruik shift() om de eerste waarde te verwijderen.
De array wachtrij bevat ["Pascal", "Mark", "Emma"]. Verwijder de eerste persoon met shift en sla deze op in de variabele eersteInRij.
De array prioriteiten bevat ["hoog", "midden", "laag"]. Verwijder de eerste twee items met twee keer shift. Log de resterende array.
Maak een array queue met ["A", "B", "C"]. Verwijder het eerste element met shift en voeg "D" toe aan het einde met push. Log de array.
Met .splice() kun je waarden verwijderen of toevoegen op elke positie in de array. De syntax is: array.splice(startIndex, aantalTeVerwijderen, nieuweWaarden...).
let namen = ["Alice", "Bob", "Charlie", "Diana"];
namen.splice(1, 2); // Verwijder 2 elementen vanaf index 1
// namen is nu ["Alice", "Diana"]let getallen = [1, 2, 5];
getallen.splice(2, 0, 3, 4); // Voeg 3 en 4 toe op index 2, verwijder niets
// getallen is nu [1, 2, 3, 4, 5]splice(index, aantal) verwijdert 'aantal' elementen vanaf 'index'. Als je een derde parameter meegeeft, voegt splice nieuwe elementen toe op die positie.
De array letters bevat ["A", "B", "C", "D"]. Verwijder het element op index 2 (de letter "C") met splice.
De array getallen bevat [10, 20, 30, 40, 50]. Verwijder 2 elementen vanaf index 1 met splice.
De array fruit bevat ["appel", "peer"]. Voeg "banaan" toe op index 1 met splice (verwijder niets).
De array cijfers bevat [1, 2, 5, 6]. Voeg de getallen 3 en 4 toe op index 2 met splice.
De array namen bevat ["Alice", "Bob", "Charlie", "Diana"]. Vervang "Bob" (index 1) door "Eve" met splice.
Je kunt een for loop gebruiken om door alle elementen van een array te lopen.
let fruit = ["appel", "banaan", "peer"];
for (let i = 0; i < fruit.length; i = i + 1) {
console.log(fruit[i]);
}
// Dit print: appel, banaan, peerGebruik array.length in de voorwaarde van je for loop om precies alle elementen te doorlopen. Begin bij i = 0 en ga door tot i < array.length.
De array namen bevat ["Alice", "Bob", "Charlie"]. Maak een for loop die alle namen naar de console logt.
De array getallen bevat [5, 10, 15, 20]. Maak een for loop die alle getallen naar de console logt.
De array scores bevat [100, 85, 92, 78]. Maak een for loop die elk getal vermenigvuldigd met 2 naar de console logt.
De array prijzen bevat [10, 20, 30, 40]. Maak een variabele totaal met waarde 0. Maak een for loop die alle prijzen bij totaal optelt. Log totaal na de loop.
De array temperaturen bevat [18, 22, 25, 19, 21]. Maak een for loop die alle temperaturen boven de 20 graden naar de console logt.
De array woorden bevat ["Hallo", "Wereld", "JavaScript"]. Maak een for loop die elk woord met een uitroepteken naar de console logt (bijv. "Hallo!").
De array cijfers bevat [7, 8, 5, 9, 6]. Tel hoeveel cijfers een 7 of hoger zijn. Sla dit op in de variabele aantalVoldoende en log deze na de loop.
Maak een array getallen met de waarden [3, 7, 2, 9, 4]. Zoek het grootste getal en sla het op in de variabele maximum. Log maximum na de loop.
Naast de standaard for loop kun je ook een for...of loop gebruiken. Dit is een modernere en makkelijkere manier om door een array te lopen wanneer je alleen de waarden nodig hebt (niet de index).
let fruit = ["appel", "banaan", "peer"];
for (let item of fruit) {
console.log(item);
}
// Dit print: appel, banaan, peerGebruik for...of wanneer je alle waarden wilt doorlopen. Gebruik een reguliere for loop wanneer je de index nodig hebt of specifieke posities wilt overslaan.
De array kleuren bevat ["rood", "groen", "blauw"]. Maak een for...of loop die alle kleuren naar de console logt.
De array prijzen bevat [10, 20, 30, 40]. Maak een for...of loop die elke prijs met BTW (prijs * 1.21) naar de console logt.
De array namen bevat ["Alice", "Bob", "Charlie"]. Maak een for...of loop die "Hallo " gevolgd door elke naam naar de console logt.
De array temperaturen bevat [18, 22, 15, 25, 20]. Maak een variabele totaal met waarde 0. Gebruik een for...of loop om alle temperaturen bij totaal op te tellen. Log totaal na de loop.
De array woorden bevat ["JavaScript", "is", "leuk"]. Gebruik een for...of loop om alle woorden op één regel te combineren met spaties ertussen. Sla het resultaat op in de variabele zin.
De array scores bevat [85, 92, 78, 95, 88]. Tel met een for...of loop hoeveel scores 90 of hoger zijn. Sla het aantal op in aantalHoog.
Je kunt de waarden in een array veranderen door ze opnieuw toe te wijzen.
let getallen = [1, 2, 3];
for (let i = 0; i < getallen.length; i = i + 1) {
getallen[i] = getallen[i] * 2;
}
// getallen is nu [2, 4, 6]De array waarden bevat [5, 10, 15]. Verdubbel alle waarden in de array met een for loop.
De array getallen bevat [10, 20, 30, 40]. Tel 5 op bij elke waarde in de array.
De array namen bevat ["alice", "bob", "charlie"]. Maak alle namen hoofdletters met een for loop. Gebruik de functie .toUpperCase().
In dit hoofdstuk heb je geleerd:
.length.indexOf().push().unshift().pop().shift().splice()Arrays zijn erg handig wanneer je met lijsten van gegevens werkt!