JavaScript array iteratie

Array iteratiemethoden voeren een operatie uit op elk array-item.

Array.forEach()

forEach() De methode roept de functie (callback-functie) eenmaal voor elk array-element aan.

Voorbeeld

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(waarde, index, array) {
  txt = txt + value + "<br>"; 
}

Probeer het zelf uit

Opmerking:De functie accepteert 3 parameters:

  • Item-waarde
  • Item-index
  • Het zelfde array

Het bovenstaande voorbeeld heeft alleen de value-parameter gebruikt. Dit voorbeeld kan worden herschreven als:

Voorbeeld

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Probeer het zelf uit

Ondersteund door alle browsers Array.forEach()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

Array.map()

map() De methode maakt een nieuwe array door de functie uit te voeren op elk array-element.

map() De methode voert de functie niet uit op array-elementen zonder waarde.

map() De methode wijzigt niet het oorspronkelijke array.

Dit voorbeeld vermenigvuldigt elke waarde van de array met 2:

Voorbeeld

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(waarde, index, array) {
  return value * 2;
}

Probeer het zelf uit

Let op, deze functie heeft 3 parameters:

  • Item-waarde
  • Item-index
  • Het zelfde array

Als de callback-functie alleen de value-parameter gebruikt, kunnen de index- en array-parameters worden weggelaten:

Voorbeeld

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Probeer het zelf uit

Ondersteund door alle browsers Array.map()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

Array.filter()

filter() De methode maakt een nieuwe array met de elementen die de test doorstaan.

Dit voorbeeld maakt een nieuwe array van elementen met waarden groter dan 18:

Voorbeeld

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(waarde, index, array) {
  return waarde > 18;
}

Probeer het zelf uit

Let op, deze functie accepteert 3 parameters:

  • Item-waarde
  • Item-index
  • Het zelfde array

In het bovenstaande voorbeeld gebruikt de callback-functie niet de index- en array-parameters, dus ze kunnen worden weggelaten:

Voorbeeld

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return waarde > 18;
}

Probeer het zelf uit

Ondersteund door alle browsers Array.filter()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

Array.reduce()

reduce() De methode voert de functie uit op elk element van de array om een enkele waarde te genereren (verminderen).

reduce() De methode werkt van links naar rechts in de array. Zie ook reduceRight().

reduce() De methode vermindert niet het oorspronkelijke array.

Deze voorbeeldbepaling bepaalt de som van alle getallen in de array:

Voorbeeld

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Probeer het zelf uit

Let op, deze functie accepteert 4 parameters:

  • Totaal (initiële waarde/voorafgaande geretourneerde waarde)
  • Item-waarde
  • Item-index
  • Het zelfde array

In het voorbeeld is de index en array parameter niet gebruikt. Het kan worden herschreven als:

Voorbeeld

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Probeer het zelf uit

reduce() De methode kan een initiële waarde accepteren:

Voorbeeld

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
  return total + value;
}

Probeer het zelf uit

Ondersteund door alle browsers Array.reduce()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

Array.reduceRight()

reduceRight() De methode voert de functie uit op elk element van de array om een enkele waarde te genereren (verminderen).

reduceRight() De methode werkt van rechts naar links in de array. Zie ook reduce().

reduceRight() De methode vermindert niet het oorspronkelijke array.

Deze voorbeeldbepaling bepaalt de som van alle getallen in de array:

Voorbeeld

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
  return total + value;
}

Probeer het zelf uit

Let op, deze functie accepteert 4 parameters:

  • Totaal (initiële waarde/voorafgaande geretourneerde waarde)
  • Item-waarde
  • Item-index
  • Het zelfde array

In het voorbeeld is de index en array parameter niet gebruikt. Het kan worden herschreven als:

Voorbeeld

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Probeer het zelf uit

Ondersteund door alle browsers Array.reduceRight()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

Array.every()

every() De methode controleert of alle arraywaarden de test hebben doorstaan.

Deze voorbeeld controleert of alle arraywaarden groter zijn dan 18:

Voorbeeld

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(waarde, index, array) {
  return waarde > 18;
}

Probeer het zelf uit

Let op, deze functie accepteert 3 parameters:

  • Item-waarde
  • Item-index
  • Het zelfde array

Als de callback-functie alleen de eerste parameter (waarde) gebruikt, kunnen de andere parameters worden weggelaten:

Voorbeeld

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return waarde > 18;
}

Probeer het zelf uit

Ondersteund door alle browsers Array.every()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

Array.some()

some() De methode controleert of bepaalde arraywaarden de test hebben doorstaan.

Deze voorbeeld controleert of bepaalde arraywaarden groter zijn dan 18:

Voorbeeld

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(waarde, index, array) {
  return waarde > 18;
}

Probeer het zelf uit

Let op, deze functie accepteert 3 parameters:

  • Item-waarde
  • Item-index
  • Het zelfde array

Ondersteund door alle browsers Array.some()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

Array.indexOf()

indexOf() De methode zoekt naar een elementwaarde in de array en retourneert zijn positie.

Opmerking:De positie van het eerste item is 0, de positie van het tweede item is 1, enz.

Voorbeeld

Zoek het item "Apple" in de array:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Probeer het zelf uit

Ondersteund door alle browsers Array.indexOf()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

syntaxis

array.indexOf(item, start)
item Verplicht. Het item dat moet worden opgehaald.
start Optioneel. Van waaruit moet worden gezocht. Negatieve waarden beginnen met de gegeven positie aan het einde en zoeken tot het einde.

Als het item niet wordt gevonden:Array.indexOf() Retourneert -1.

Als het item meerdere keren voorkomt, wordt de positie van de eerste verschijning geretourneerd.

Array.lastIndexOf()

Array.lastIndexOf() met Array.indexOf() Soortgelijk, maar zoek van de einde van de array af.

Voorbeeld

Zoek het item "Apple" in de array:

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Probeer het zelf uit

Ondersteund door alle browsers Array.lastIndexOf()behalve Internet Explorer 8 of eerder:

Ja 9.0 Ja Ja Ja

syntaxis

array.lastIndexOf(item, start)
item Verplicht. Het item dat moet worden opgehaald.
start Optioneel. Vanwaar je begint te zoeken. Negatieve waarden beginnen aan het einde van de gegeven positie en zoeken naar het begin.

Array.find()

find() De methode retourneert de waarde van het eerste element in de array dat de testfunctie通过了。

Deze voorbeeld zoekt (retourneert) de waarde van het eerste element dat groter is dan 18:

Voorbeeld

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(waarde, index, array) {
  return waarde > 18;
}

Probeer het zelf uit

Let op, deze functie accepteert 3 parameters:

  • Item-waarde
  • Item-index
  • Het zelfde array

Oude browsers ondersteunen dit niet Array.find()Hieronder wordt de eerste browserversie vermeld die deze methode volledig ondersteunt:

45 12 25 8 32

Array.findIndex()

findIndex() De methode retourneert de index van het eerste element in de array dat de testfunctie通过了。

Deze voorbeeld zoekt naar de index van het eerste element dat groter is dan 18:

Voorbeeld

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(waarde, index, array) {
  return waarde > 18;
}

Probeer het zelf uit

Let op, deze functie accepteert 3 parameters:

  • Item-waarde
  • Item-index
  • Het zelfde array

Oude browsers ondersteunen dit niet Array.findIndex()Hieronder wordt de eerste browserversie vermeld die deze methode volledig ondersteunt:

45 12 25 8 32