Leer Arrays Transformeren met de map()-Methode | Geavanceerde Arraymethoden en Transformaties

In deze sectie worden verschillende veelgebruikte methoden voor het werken met arrays in JavaScript behandeld. JS biedt een breed scala aan methoden, maar we richten ons specifiek op die methoden die van onschatbare waarde zijn in dagelijkse programmeerpraktijken: map(), filter(), find(), reduce() en sort(). Deze methoden zijn geselecteerd vanwege hun praktische nut en het oplossen van veelvoorkomende scenario's bij programmeertaken.

Voor een volledige lijst van alle array-methoden, raadpleeg de officiële MDN-documentatie.

map()

De map()-methode doorloopt elk element van de oorspronkelijke array en past een opgegeven callbackfunctie toe om een nieuwe array te produceren.

De basis-syntaxis:

array.map((element, index, array) => {
  // Callback body
});

element: Het huidige element dat wordt verwerkt in de array;
index: De index van het huidige element binnen de array. Dit geeft de positie van het element in de array aan;
array: De array waarop de map()-methode is aangeroepen. Dit verwijst naar de oorspronkelijke array die wordt doorlopen.

Hier volgt een illustratie van wat element, index en array voorstellen:


              12345
            
const products = ["Ball", "Shoes", "Mouse"];

const modifiedProducts = products.map((element, index, array) => {
  console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
});

Belangrijke punten om te onthouden over map():

Het doorloopt het originele array element voor element;
Het wijzigt het originele array niet;
Het resultaat van de callbackfunctie wordt gebruikt om een nieuw array te maken;
Het retourneert een nieuw array met dezelfde lengte.

Array-elementen transformeren

De map()-methode is bijzonder geschikt wanneer elk element van een array getransformeerd moet worden zonder het originele array te wijzigen. Bekijk het volgende voorbeeld:


              12345678910
            
const numbers = [3, 5, 11, 32, 87];

/* Use the `map` method to create a new array (`doubledNumbers`) 
  by doubling each element of the `numbers` array. */
const doubledNumbers = numbers.map((element) => {
  return element * 2;
});

console.log("Initial array:", numbers); // Output: 3, 5, 11, 32, 87
console.log("Modified array:", doubledNumbers); // Output: 6, 10, 22, 64, 174

1. Wat doet de `map()`-methode?

2. Wat is een belangrijk kenmerk van de `map()`-methode?

3. In het onderstaande voorbeeld, wat doet `strings.map((element) => (element += "!"))`?

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 1

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.27

Veeg om het menu te tonen

Voor een volledige lijst van alle array-methoden, raadpleeg de officiële MDN-documentatie.

map()

De map()-methode doorloopt elk element van de oorspronkelijke array en past een opgegeven callbackfunctie toe om een nieuwe array te produceren.

De basis-syntaxis:

array.map((element, index, array) => {
  // Callback body
});

element: Het huidige element dat wordt verwerkt in de array;
index: De index van het huidige element binnen de array. Dit geeft de positie van het element in de array aan;
array: De array waarop de map()-methode is aangeroepen. Dit verwijst naar de oorspronkelijke array die wordt doorlopen.

Hier volgt een illustratie van wat element, index en array voorstellen:


              12345
            
const products = ["Ball", "Shoes", "Mouse"];

const modifiedProducts = products.map((element, index, array) => {
  console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
});

Belangrijke punten om te onthouden over map():

Het doorloopt het originele array element voor element;
Het wijzigt het originele array niet;
Het resultaat van de callbackfunctie wordt gebruikt om een nieuw array te maken;
Het retourneert een nieuw array met dezelfde lengte.

Array-elementen transformeren

De map()-methode is bijzonder geschikt wanneer elk element van een array getransformeerd moet worden zonder het originele array te wijzigen. Bekijk het volgende voorbeeld:


              12345678910
            
const numbers = [3, 5, 11, 32, 87];

/* Use the `map` method to create a new array (`doubledNumbers`) 
  by doubling each element of the `numbers` array. */
const doubledNumbers = numbers.map((element) => {
  return element * 2;
});

console.log("Initial array:", numbers); // Output: 3, 5, 11, 32, 87
console.log("Modified array:", doubledNumbers); // Output: 6, 10, 22, 64, 174

1. Wat doet de `map()`-methode?

2. Wat is een belangrijk kenmerk van de `map()`-methode?

3. In het onderstaande voorbeeld, wat doet `strings.map((element) => (element += "!"))`?

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 1

Arrays Transformeren met de map()-Methode

map()

Belangrijke punten om te onthouden over map():

Array-elementen transformeren

1. Wat doet de map()-methode?

2. Wat is een belangrijk kenmerk van de map()-methode?

3. In het onderstaande voorbeeld, wat doet strings.map((element) => (element += "!"))?

Awesome!

Arrays Transformeren met de map()-Methode

map()

Belangrijke punten om te onthouden over map():

Array-elementen transformeren

1. Wat doet de map()-methode?

2. Wat is een belangrijk kenmerk van de map()-methode?

3. In het onderstaande voorbeeld, wat doet strings.map((element) => (element += "!"))?

1. Wat doet de `map()`-methode?

2. Wat is een belangrijk kenmerk van de `map()`-methode?

3. In het onderstaande voorbeeld, wat doet `strings.map((element) => (element += "!"))`?

1. Wat doet de `map()`-methode?

2. Wat is een belangrijk kenmerk van de `map()`-methode?

3. In het onderstaande voorbeeld, wat doet `strings.map((element) => (element += "!"))`?