Hoe gebruik je Array.map() in JavaScript?

1

NOVEMBER, 2018

JavaScript
.map()
Front end Development

Van de klassieke ‘for loop’ tot de ‘for each ()’ methode zijn er verschillende technieken om de datasets te doorzoeken met JavaScript. Een van de meest populaire manieren is met de .map() methode.

.map() maakt een array van het aanroepen van een specifieke functie op elk item in de bovenliggende array. .map() is non-mutating, omdat het een nieuwe array maakt in vergelijking met mutatie methoden die alleen wijzigingen aanbrengen in de ingevoerde array. Dit is een lastig punt, waar velen zich in vergissen. We bekijken 4 opvallende gebruiken van de .map() in JavaScript.

“De belangrijkste toepassingen van de methode .map() in JavaScript.”

Een functie op elk item in een array oproepen

.map() accepteert een callback-functie als een van zijn argumenten en een belangrijke parameter van die functie is de huidige waarde van het item dat wordt verwerkt door de functie. Dit is een vereiste parameter. Met deze parameter kunnen we elk afzonderlijk item in een array wijzigen en er een nieuwe functie van maken.

Door de toevoeging van HotArray.map(makeHotter) maakt de code een stuk beter leesbaar als je voor het eerst deze code ziet.

Een string naar een array converteren

Het is bekend dat .map() tot een array prototype behoort. We kunnen het gebruiken om een string naar een array om te zetten. Hiervoor zullen we de .call() methode voor moeten gebruiken.

Alles in JavaScript is een object en methodes zijn slecht standaard functies die aan deze objecten zijn gekoppeld. .call() zorgt er voor dat de context van het ene object op het andere. Daarom kopiëren we de context van .map() in een array naar een string.

.call() kan doorgegeven arguments zijn van de context en de parameters van de arguments van de originele functie. Dat is wel lastig. Een voorbeeld:

Hier hebben we simpelweg de context van .map() op een string toegepast en een argument doorgegeven van de functie die .map() verwacht. Dit werkt zoals de .split() methode van een string, waarbij iedere individuele string-character can worden gewijzigd, voordat het uitgevoerd wordt in een array.

Lijsten weergeven in JavaScript libraries

JavaScript libraries zoals React gebruiken .map() om items in een lijst weer te geven. Hiervoor is echter de JSX syntax vereist. Hier is een goed voorbeeld van een React-component.

Ben je onbekend met React? Bovenstaand is een eenvoudige statusloos component in React die een <div> met een <li> rendert. De afzonderlijke lijstitems worden weergegeven met behulp van .map() om de aanvankelijk gemaakte naam array te herhalen. Dit onderdeel wordt gerenderd met ReactDOM op het DOM element met id van de root. Hier kun je de inhoud creëren die zal worden gebruikt binnen de module.

Array objecten opnieuw formatteren

Hoe zit het dan met de behandeling van objecten in een array? .map() kan worden gebruikt om objecten in een array te doorlopen en op dezelfde manier als traditionele arrays te wijzigen en een nieuwe array uit te voeren. Deze wijziging wordt gedaan op basis van wat er wordt uitgevoerd in de callback functie. Een voorbeeld:

Hierboven hebben we gemakkelijk met haakjes en puntjes elk object in de array gewijzigd. Dit kan gebruikt worden om ontvangen gegevens te verwerken of ontvangen data op te vangen, voordat het wordt opgeslagen of in een frontend-applicatie wordt uitgevoerd.

Conclusie

We hebben gekeken naar de belangrijkste toepassingen van de methode .map() in JavaScript. Een ding om nog op te merken is dat in combinatie met andere methodes de functionaliteit van .map() kan worden uitgebreid. Probeer maar eens andere mogelijkheden. Hopelijk kun je er iets mee en misschien heb je opmerkingen over het artikel. Laat het ons weten.

JavaScript code
Programmeercode