.map() Methode in JavaScript: Effectief Gebruik Ervan
.map() is een van de meest populaire manieren om datasets te doorzoeken in JavaScript. Het creëert een nieuwe array door een specifieke functie toe te passen op elk item in de ouderarray, waardoor deze niet-mutatie is.
.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 in JavaScript.
“De belangrijkste toepassingen van de methode .map() in javascript.”
Het Gebruik van .map() om een Functie Aan te Roepen
.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.
const makeHotter = HotItem => HotItem * 2;
const HotArray = [2, 3, 4, 5, 35];
const HotterArray = HotArray.map(makeHotter);
console.log(HotterArray);
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:
const name = "Chuloo"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
return `${eachLetter}a`
})
console.log(newName) // ["Ca", "ha", "ua", "la", "oa", "oa"]
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.
Het Gebruik van .map() om Lijsten weer te Geven 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.
import React from "react";
import ReactDOM from "react-dom";
const names = ["marielle", "elke", "guus", "jean", "chris"];
const NamesList = () => (
<div>
<ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
</div>
);
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:
https://gist.github.com/GustiCup/033b0aa436a19197b8659cfdabb5056f#file-users_likes-js
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.