Phenquestions
De array's kaart methode: wordt gebruikt om een nieuwe toegewezen array te construeren op basis van de retourwaarde van de callback-functie voor elk element.
var mappedArray = matrix.map(callbackFunction, thisValue)De Bel terug is de functie die elke keer wordt aangeroepen voor een enkel element en een waarde retourneert die in een nieuwe array wordt opgeslagen. De syntaxis voor de callback-functie is:
functie(waarde, [index[, array]])waarde is een noodzakelijk argument, dat eigenlijk een enkel element van de array is.
De inhoudsopgave is een optioneel argument dat zal worden gebruikt als de index van elk element in de callback-functie.
De reeks is ook een optioneel argument. We kunnen dit argument doorgeven als we de array in de callback-functie willen gebruiken.
deze waarde is de waarde die we willen doorgeven, die zal worden gebruikt als een "dit" in de callback-functie. Anders wordt "undefined" doorgegeven.
Javascript biedt de for... in lus en foreach-lus voor het doorlopen van elementen en het manipuleren van arrays. Maar waarom hebben we afgezien daarvan een kaartmethode nodig?? Daar zijn twee belangrijke redenen voor:. Een daarvan is de scheiding van zorg en de tweede is de gemakkelijke syntaxis om dergelijke taken uit te voeren. Laten we dus wat verschillende voorbeelden proberen om het doel en het juiste gebruik ervan te demonstreren.
Voorbeelden
Allereerst gaan we een eenvoudige demonstratie geven waarin we een eenvoudige reeks getallen hebben waarop we zullen proberen een eenvoudige rekenkundige bewerking uit te voeren over elk afzonderlijk element.
var arr = [4, 8, 16, 64, 49];Nu, voordat u de kaartmethode op deze array toepast:. We zullen eerst een callback-functie schrijven waarnaar we onze kaartfunctie kunnen aanroepen waarin, laten we zeggen dat we elk element met 10 willen vermenigvuldigen en een nieuwe array hebben.
functie vermenigvuldigen(element)var newElement = element * 10;
retourneer nieuwElement;
Alles is ingesteld om de kaartmethode over de array toe te passen en de vereiste resultaten te krijgen.
var newArr = arr.kaart (vermenigvuldigen);Als we nu kijken naar de "newArr",
troosten.log(nieuweArr);We kunnen de nieuwste toegewezen array in de uitvoer zien volgens onze vereisten.
Houd er rekening mee dat de lengte van de nieuwe toegewezen array zeker gelijk zal zijn aan de originele array.
Er is een kortere manier om dezelfde taak uit te voeren met behulp van de pijl of anonieme functie binnen een kaartmethode. We kunnen dus een callback-functie schrijven binnen een kaartmethode als deze
var newArr = arr.kaart((element) =>retourelement * 10
)
Of, als we een pro willen zijn en het beknopter willen maken. We kunnen dit
var newArr = arr.kaart(e => e * 10)Oke! Dit was dus de basisdemonstratie van de kaartmethode en verschillende manieren om de terugbelfunctie te schrijven. Maar deze functie is handiger als we met een reeks objecten spelen. Dat is waar de echte implementatie plaatsvindt.
Kaart gebruiken met een reeks objecten
In dit voorbeeld veronderstellen we een array van objecten waarin elk object de informatie van een speler bevat. Naam van de speler en zijn ID.
var arr = [id: 12, naam: "James",
id: 36, naam: "Morgan",
id: 66, naam: "Jordanië"
];
Laten we nu zeggen dat we de ID's van elk object willen extraheren en een nieuwe reeks ID's willen hebben.
Maar om te begrijpen hoe de kaartmethode anders is en beter helpt dan de foreach-lus. We zullen beide proberen (kaartmethode en foreach-lus) om dezelfde taak uit te voeren en het verschil te leren.
Dus, eerst zullen we proberen ID's te extraheren met behulp van de foreach-lus en vervolgens met behulp van de kaartmethode.
var geëxtraheerde ID's = [];arr.forEach((element) =>
geëxtraheerde ID's retourneren.duw(element).ID kaart);
)
Als we nu naar de geëxtraheerde ID's kijken.
troosten.log (geëxtraheerde ID's);
We hebben ze gescheiden in een array. Maar laten we nu dezelfde uitvoer demonstreren met behulp van de kaartmethode.
retour element.ID kaart;
)
troosten.log (geëxtraheerde ID's);
Door naar het verschil in code en dezelfde uitvoer te kijken, kunnen we het echte verschil tussen de twee (foreach en kaart) methoden realiseren. De syntaxis en scheiding van zorg.
Op dezelfde manier kunnen we veel andere bewerkingen uitvoeren. Als we moeten spelen en wat gegevens uit de reeks objecten moeten halen. We veronderstellen een array van objecten waarin elk object twee eigenschappen bevat: voornaam en achternaam.
var arr = [firstName: "Jan", achternaam: "Doe",
firstName: "Morgan", achternaam: "Freeman",
voornaam: "Jordanië", achternaam: "Peterson"
];
Nu willen we een array hebben die de volledige namen bevat. Dus we zullen een kaartfunctie zoals deze schrijven om ons doel te bereiken
var fullName = arr.kaart((persoon) =>terugkeer persoon.voornaam + " + persoon.achternaam
)
troosten.log (volledige naam);
Zoals je kunt zien, hebben we een aparte array met volledige namen. Dat is geweldig.
Dit zijn dus enkele van de fundamentele en verschillende manieren waarop een kaartfunctie kan worden gebruikt om aan onze ontwikkelingsvereisten te voldoen en helpt in het leven van elke JavaScript-ontwikkelaar.
Conclusie
In dit artikel hebben we geleerd over de meest gebruikte map()-methode van javascript voor arrays en hebben we enkele van de verschillende manieren geleerd om de kaartmethode te gebruiken. Dit artikel legt het concept van de kaartmethode op zo'n gemakkelijke en diepgaande manier uit dat elke beginnende codeur het kan begrijpen en het naar zijn behoeften kan gebruiken. Dus blijf leren, werken en ervaring opdoen in javascript met linuxhint.com om het beter te begrijpen. Heel erg bedankt!
