JavaScript-array-iteratie
Array-iteratiemethoden werken op elk array-item.
JavaScript-array voor elk()
De forEach()methode roept een functie (een callback-functie) één keer aan voor elk array-element.
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
Merk op dat de functie 3 argumenten nodig heeft:
- De artikelwaarde:
- De itemindex
- De array zelf
In het bovenstaande voorbeeld wordt alleen de parameter value gebruikt. Het voorbeeld kan worden herschreven tot:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
JavaScript-arraykaart()
De map()methode creëert een nieuwe array door een functie uit te voeren op elk array-element.
De map()methode voert de functie niet uit voor arrayelementen zonder waarden.
De map()methode verandert niets aan de oorspronkelijke array.
In dit voorbeeld wordt elke matrixwaarde vermenigvuldigd met 2:
Voorbeeld
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
Merk op dat de functie 3 argumenten nodig heeft:
- De artikelwaarde:
- De itemindex
- De array zelf
Wanneer een callback-functie alleen de parameter value gebruikt, kunnen de parameters index en array worden weggelaten:
Voorbeeld
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
JavaScript-arrayfilter()
De filter()methode maakt een nieuwe array met array-elementen die een test doorstaat.
In dit voorbeeld wordt een nieuwe array gemaakt van elementen met een waarde groter dan 18:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Merk op dat de functie 3 argumenten nodig heeft:
- De artikelwaarde:
- De itemindex
- De array zelf
In het bovenstaande voorbeeld gebruikt de callback-functie de index- en arrayparameters niet, dus ze kunnen worden weggelaten:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
JavaScript-array reduce()
De reduce()methode voert een functie uit op elk array-element om een enkele waarde te produceren (te reduceren tot).
De reduce()methode werkt van links naar rechts in de array. Zie ook reduceRight().
De reduce()methode reduceert de oorspronkelijke array niet.
Dit voorbeeld vindt de som van alle getallen in een array:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Merk op dat de functie 4 argumenten nodig heeft:
- Het totaal (de beginwaarde / eerder geretourneerde waarde)
- De artikelwaarde:
- De itemindex
- De array zelf
In het bovenstaande voorbeeld worden de index- en arrayparameters niet gebruikt. Het kan worden herschreven tot:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
De reduce()methode kan een beginwaarde accepteren:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
JavaScript-array reduceRight()
De reduceRight()methode voert een functie uit op elk array-element om een enkele waarde te produceren (te reduceren tot).
De reduceRight()werken van rechts naar links in de array. Zie ook reduce().
De reduceRight()methode reduceert de oorspronkelijke array niet.
Dit voorbeeld vindt de som van alle getallen in een array:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
Merk op dat de functie 4 argumenten nodig heeft:
- Het totaal (de beginwaarde / eerder geretourneerde waarde)
- De artikelwaarde:
- De itemindex
- De array zelf
In het bovenstaande voorbeeld worden de index- en arrayparameters niet gebruikt. Het kan worden herschreven tot:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
JavaScript-array elke()
De every()methode controleert of alle arraywaarden een test doorstaan.
In dit voorbeeld wordt gecontroleerd of alle matrixwaarden groter zijn dan 18:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Merk op dat de functie 3 argumenten nodig heeft:
- De artikelwaarde:
- De itemindex
- De array zelf
Wanneer een callback-functie alleen de eerste parameter (waarde) gebruikt, kunnen de andere parameters worden weggelaten:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
JavaScript-array wat()
De some()methode controleert of sommige matrixwaarden een test doorstaan.
In dit voorbeeld wordt gecontroleerd of sommige matrixwaarden groter zijn dan 18:
Voorbeeld
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Merk op dat de functie 3 argumenten nodig heeft:
- De artikelwaarde:
- De itemindex
- De array zelf
JavaScript-array indexOf()
De indexOf()methode zoekt in een array naar een elementwaarde en retourneert de positie ervan.
Opmerking: het eerste item heeft positie 0, het tweede item heeft positie 1, enzovoort.
Voorbeeld
Zoek in een array naar het item "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
Syntaxis
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf() geeft -1 terug als het item niet wordt gevonden.
Als het item meer dan één keer voorkomt, wordt de positie van het eerste exemplaar geretourneerd.
JavaScript-array lastIndexOf()
Array.lastIndexOf()is hetzelfde als Array.indexOf(), maar retourneert de positie van het laatste exemplaar van het opgegeven element.
Voorbeeld
Zoek in een array naar het item "Apple":
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
Syntaxis
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
JavaScript-array vind()
De find()methode retourneert de waarde van het eerste array-element dat een testfunctie doorstaat.
Dit voorbeeld vindt (retourneert de waarde van) het eerste element dat groter is dan 18:
Voorbeeld
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Merk op dat de functie 3 argumenten nodig heeft:
- De artikelwaarde:
- De itemindex
- De array zelf
Browserondersteuning
find() is een ES6-functie (JavaScript 2015).
Het wordt ondersteund in alle moderne browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find() wordt niet ondersteund in Internet Explorer.
JavaScript-array findIndex()
De findIndex()methode retourneert de index van het eerste array-element dat een testfunctie doorstaat.
Dit voorbeeld vindt de index van het eerste element dat groter is dan 18:
Voorbeeld
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Merk op dat de functie 3 argumenten nodig heeft:
- De artikelwaarde:
- De itemindex
- De array zelf
Browserondersteuning
findIndex() is een ES6-functie (JavaScript 2015).
Het wordt ondersteund in alle moderne browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex() wordt niet ondersteund in Internet Explorer.
JavaScript-array.from()
De Array.from()methode retourneert een Array-object van een willekeurig object met een eigenschap length of een willekeurig object.
Voorbeeld
Maak een array van een string:
Array.from("ABCDEFG");
Browserondersteuning
from() is een ES6-functie (JavaScript 2015).
Het wordt ondersteund in alle moderne browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from() wordt niet ondersteund in Internet Explorer.
JavaScript-matrixtoetsen ()
De Array.keys()methode retourneert een Array Iterator-object met de sleutels van een array.
Voorbeeld
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.