Hoe Array Methoden te Gebruiken in JavaScript: Iteratie Methoden

Introductie

In JavaScript bestaat het datatype array uit een lijst van elementen. Er zijn veel handige ingebouwde methoden beschikbaar voor JavaScript-ontwikkelaars om met arrays te werken. Methoden die het oorspronkelijke array wijzigen, staan bekend als mutator-methoden, en methoden die een nieuwe waarde of representatie retourneren, staan bekend als accessor-methoden.

Er is een derde klasse van array-methoden, bekend als iteratie-methoden, die methoden zijn die één voor één op elk item in een array werken. Deze methoden zijn nauw verbonden met loops. In deze tutorial zullen we ons concentreren op iteratiemethoden.

Om het meeste uit deze tutorial te halen, moet je enige bekendheid hebben met het maken, indexeren, wijzigen en loop-en door arrays, wat je kunt bekijken in de tutorial Understanding Arrays in JavaScript.

In deze tutorial zullen we iteratiemethoden gebruiken om door arrays te lussen, functies uit te voeren op elk item in een array, de gewenste resultaten van een array te filteren, array-items te verminderen tot een enkele waarde, en door arrays te zoeken om waarden of indices te vinden.

Begrip van Pijlfuncties

Veel voorbeelden in deze tutorial zullen gebruikmaken van JavaScript pijlfunctionele expressies, die worden weergegeven door een gelijkteken gevolgd door een groter-dan-teken: =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // code uit te voeren
}

example();

De nieuwste versie van JavaScript op het moment van schrijven staat het gebruik van pijlfuncties toe, die kunnen worden geschreven met de volgende syntaxis:

var example = () => {
  // code uit te voeren
}

example();

De haakjes kunnen in beide gevallen parameters bevatten. Wanneer er slechts één parameter is, kunnen de haakjes worden weggelaten, zoals:

var example = parameter1 => {
  // code uit te voeren
}

Gedurende de voorbeelden in deze tutorial zullen we de pijl functiesyntax gebruiken. Om meer te lezen en te begrijpen over functies in JavaScript, lees de Functies referentie op het Mozilla Developer Network.

forEach()

De forEach() methode roept een functie aan voor elk element in een array.

Laten we beginnen met de volgende array toegewezen aan de variabele fish:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

We kunnen forEach() gebruiken om elk item in de fish array naar de console te printen.

// Print elk item in de array uit
fish.forEach(individualFish => {
	console.log(individualFish);
})

Zodra we dat doen, zullen we de volgende output ontvangen:

Output
piranha
barracuda
cod
eel

Een andere manier om dit te doen is door gebruik te maken van het for loop trefwoord en dit te testen tegen de lengte-eigenschap van de array.

// Loop door de lengte van de array
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

De bovenstaande code zal dezelfde output hebben als het gebruik van de forEach() methode. Als een iteratiemethode specifiek bedoeld voor gebruik met arrays, is forEach() beknopter en eenvoudiger voor deze specifieke taak.

map()

De methode map() maakt een nieuwe array met de resultaten van een functie-oproep voor elk element in de array.

Als voorbeeld van hoe de iteratiemethode map() te gebruiken, kunnen we elke iteratie van een lus naar de console afdrukken. map() muteert de oorspronkelijke array niet, maar retourneert in plaats daarvan een nieuwe array-waarde.

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Druk elk item in de array af
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

We kunnen ook map() gebruiken om de waarden van elk item in een array te wijzigen. Om dit te demonstreren, voegen we een s toe aan het einde van elk item in de fish-array om elk woord in het meervoud te zetten.

// Maak meervoud van alle items in de fish-array
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

De oorspronkelijke variabele fish is ongewijzigd, maar pluralFish bevat nu een gewijzigde versie van de oorspronkelijke variabele.

filter()

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

We kunnen filter() gebruiken om een nieuwe array terug te geven die alleen de items in een lijst bevat die beginnen met een specifieke letter. Hiervoor kunnen we gebruik maken van string indexering om het eerste item (of de eerste letter) in elk string item van de array op te roepen.

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Filter alle wezens die beginnen met "s" in een nieuwe lijst
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

We hebben getest welke items in de array een s hebben op index 0, en het resultaat toegewezen aan een nieuwe variabele.

filter() is een iteratiemethode en muteert de oorspronkelijke array niet.

reduce()

De reduce() methode zal een array reduceren tot een enkele waarde.

Dit wordt vaak gezien met getallen, zoals het vinden van de som van alle getallen in een array.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Krijg de som van alle numerieke waarden
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce() kan ook worden gebruikt met strings en andere datatypes. De waarde die wordt teruggegeven door reduce() kan een getal, string, array of ander datatype zijn. reduce() is een iteratiemethode die de oorspronkelijke array niet muteert.

find()

De find() methode retourneert de eerste waarde in een array die slaagt voor een opgegeven test.

Als voorbeeld zullen we een array van zeedieren maken.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Vervolgens zullen we de find() methode gebruiken om te testen of een van de dieren in de array cephalopoden zijn.

// Controleer of een gegeven waarde een cephalopod is
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

Omdat octopus het eerste item in de array was dat slaagde voor de test in de isCephalopod() functie, wordt het de eerste waarde die wordt geretourneerd.

De find() methode kan je helpen bij het werken met arrays die veel waarden bevatten.

findIndex()

De findIndex() methode retourneert het eerste indexnummer in een array dat slaagt voor een opgegeven test.

We kunnen hetzelfde seaCreatures voorbeeld gebruiken als bij de find() methode.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Met de isCephalopod test zullen we het indexnummer vinden in plaats van de waarde van de eerste match.

// Controleer of een gegeven waarde een cephalopod is
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

octopus is het eerste item dat slaagt voor de test en heeft een index van 1, daarom is het het indexnummer dat wordt geretourneerd.

Als de test niet voldaan is, zal findIndex() -1 teruggeven.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

De findIndex()-methode is bijzonder handig bij het werken met arrays die veel items bevatten.

Conclusie

In deze tutorial hebben we de belangrijkste ingebouwde iteratiemethoden voor arrays in JavaScript doorgenomen. Iteratiemethoden werken op elk item in een array en voeren vaak een nieuwe functie uit. We hebben behandeld hoe je door arrays kunt lussen, de waarde van elk item in een array kunt wijzigen, arrays kunt filteren en reduceren, en waarden en indexen kunt vinden.

Om de basisprincipes van arrays te herzien, lees Het begrijpen van arrays in JavaScript. Voor meer informatie over syntaxis in Javascript, bekijk onze tutorial over “Het begrijpen van syntaxis en codestructuur in JavaScript.”