In JavaScript is een array een gegevensstructuur die wordt gebruikt om een geordende lijst van elementen op te slaan. Een array kan elementen van verschillende datatypen bevatten, zoals getallen, strings, objecten, en zelfs andere arrays. Elke element in een array heeft een index, en de index begint meestal bij nul voor het eerste element.
// Een array van getallen
const numbers = [1, 2, 3, 4, 5];
// Een array van strings
const fruits = ['apple', 'banana', 'orange'];
// Een array van gemengde datatypen
const mixedArray = [1, 'apple', true, { name: 'John' }];
// Toegang tot elementen via index
console.log(numbers[2]); // Geeft 3 weer
// Wijzigen van een element
fruits[1] = 'grape'; // Verandert 'banana' naar 'grape'
// Toevoegen van een element
fruits.push('kiwi'); // Voegt 'kiwi' toe aan het einde van de array
// Verwijderen van een element
mixedArray.pop(); // Verwijdert het laatste element van de array
// Met de spread operator (...) kun je gemakkelijk nieuwe elementen aan een array toevoegen of arrays samenvoegen.
const moreFruits = [...fruits, 'grape', 'kiwi'];
Hier is een overzicht van veelgebruikte array-methoden in JavaScript:
push
const fruits = ['apple', 'banana'];
fruits.push('orange');
// fruits: ['apple', 'banana', 'orange']
Voegt één of meer elementen toe aan het einde van een array en retourneert de nieuwe lengte van de array.
pop
const fruits = ['apple', 'banana', 'orange'];
const removedFruit = fruits.pop();
// removedFruit: 'orange', fruits: ['apple', 'banana']
Verwijdert het laatste element uit een array en retourneert dat element.
shift
const fruits = ['apple', 'banana', 'orange'];
const shiftedFruit = fruits.shift();
// shiftedFruit: 'apple', fruits: ['banana', 'orange']
Verwijdert het eerste element uit een array en verschuift de overige elementen naar een lagere index.
unshift
const fruits = ['banana', 'orange'];
fruits.unshift('apple');
// fruits: ['apple', 'banana', 'orange']
Voegt één of meer elementen toe aan het begin van een array en retourneert de nieuwe lengte van de array.
indexOf
const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana');
// index: 1
Retourneert de index van het eerste voorkomen van een element in een array. Als het element niet wordt gevonden, wordt -1 geretourneerd.
splice
const fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'grape', 'kiwi');
// fruits: ['apple', 'grape', 'kiwi', 'orange']
Verwijdert of vervangt elementen op een specifieke index in een array.
slice
const fruits = ['apple', 'banana', 'orange'];
const slicedFruits = fruits.slice(1, 3);
// slicedFruits: ['banana', 'orange']
Creëert een nieuw array-object dat bestaat uit een deel van een bestaande array.
Geavanceerde array-methoden zoals map, filter, en reduceworden vaak aangeduid als "higher-order functions" (HOFs) of "array iteration methods". Deze methoden zijn krachtige en flexibele tools die beschikbaar zijn voor arrays in JavaScript en ze stellen ontwikkelaars in staat om op een elegante manier door arrays te lopen, te transformeren en te manipuleren.
map:
const doubledNumbers = [1, 2, 3].map(number => number * 2);
// doubledNumbers: [2, 4, 6]
De map-methode maakt een nieuwe array door elk element van de bestaande array te transformeren.
filter:
const evenNumbers = [1, 2, 3, 4].filter(number => number % 2 === 0);
// evenNumbers: [2, 4]
De filter-methode creëert een nieuwe array met elementen die aan een bepaalde voorwaarde voldoen.
reduce:
const sum = [1, 2, 3].reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// sum: 6
De reduce-methode past een functie toe op elk element van de array en accumuleert de resultaten in één waarde.
forEach:
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => console.log(fruit));
// Logs each fruit in the array
De forEach-methode voert een functie uit voor elk element in de array.
find:
const foundFruit = fruits.find(fruit => fruit === 'banana');
// foundFruit: 'banana'
De find-methode retourneert het eerste element in de array dat aan de opgegeven voorwaarde voldoet.
some:
const hasBanana = fruits.some(fruit => fruit === 'banana');
// hasBanana: true
De some-methode controleert of ten minste één element aan de opgegeven voorwaarde voldoet.