JavaScript Array map() Methode

De map()-methode in JavaScript creëert een nieuwe array door een functie toe te passen op elk element van de originele array. Het slaat lege elementen over en verandert de oorspronkelijke array niet, waardoor het ideaal is voor het transformeren van gegevens.

Een opvallend kenmerk van de methode map() is de omgang met lege elementen. Het slaat automatisch de uitvoering van de callback-functie voor deze elementen over en richt zich uitsluitend op het verwerken van niet-lege waarden. Dit gedrag zorgt voor een efficiënte en gestroomlijnde verwerking, waardoor de algehele prestaties van arraytransformaties worden verbeterd.

Syntaxis:

map((element, index, array) =>{ /* … */ }) 

Parameters:

  • element: Het is een vereiste parameter en bevat de waarde van het huidige element.
  • inhoudsopgave: Het is een optionele parameter en bevat de index van het huidige element.
  • arr: Het is een optionele parameter en bevat de array.

Winstwaarde:

Het retourneert een nieuwe array en elementen van arrays zijn het resultaat van de callback-functie.

Voorbeeld: Hier gebruiken we de map()> methode om een ​​nieuwe array te maken met de vierkantswortels van elk getal in de originele array.

Javascript
const numbers = [1, 4, 9, 16, 25]; const squareRoots = numbers.map(num =>Wiskunde.sqrt(num)); console.log(squareRoots); // Uitvoer: [1, 2, 3, 4, 5] 

Uitvoer
[ 1, 2, 3, 4, 5 ] 

Voorbeeld : In dit voorbeeld wordt de methode array map() gebruikt en wordt het kwadraat van het array-element geretourneerd.

Javascript
// Input array let arr = [2, 5, 6, 3, 8, 9]; // Using map to transform elements let newArr = arr.map(function (val, index) {  return { key: index, value: val * val }; }) // Display output console.log(newArr) 

Uitvoer
[ { key: 0, value: 4 }, { key: 1, value: 25 }, { key: 2, value: 36 }, { key: 3, value: 9 }, { key: 4, value: 64 }, { key: 5, value: 81 } ] 

Voorbeeld: In dit voorbeeld wordt de methode array map() gebruikt om het teken ‘A’ samen te voegen met elk teken van de naam.

Javascript
//Input string let name = 'Geeks'; // New array of character and names // concatenated with 'A' let newName = Array.prototype.map.call(name, function (item) {  return item + 'A'; }) // Display output console.log(newName) 

Uitvoer
[ 'GA', 'eA', 'eA', 'kA', 'sA' ] 

Een callback-functie gebruiken met een argument

ParseInt() gebruiken met de map()-methode. De parseInt()> functie converteert tekenreeksen naar gehele getallen. Bij gebruik met map()> , converteert het elk element van een reeks strings naar gehele getallen.

Voorbeeld: Hier gebruiken we parseint met map().

Javascript
const strings = ['10', '20', '30']; const integers = strings.map(str =>parseInt(str)); console.log(gehele getallen); // Uitvoer: [10, 20, 30] 

Uitvoer
[ 10, 20, 30 ] 

We hebben een volledige lijst met Javascript Array-methoden. Om deze te controleren, kunt u deze doornemen Javascript Array Volledige referentie artikel.

We hebben een Cheat Sheet over Javascript waarin we alle belangrijke Javascript-onderwerpen hebben behandeld om deze te controleren Javascript Cheat Sheet-Een basisgids voor JavaScript .

JavaScript is vooral bekend voor de ontwikkeling van webpagina's, maar wordt ook gebruikt in verschillende niet-browseromgevingen. U kunt JavaScript vanaf de basis leren door dit te volgen JavaScript-zelfstudie En JavaScript-voorbeelden .