Mappa JavaScript

In questo articolo, impareremo uno dei metodi più utilizzati per l'array, che è il Metodo mappa (). Il metodo della mappa aiuta a mappare gli array in base ai nostri requisiti. Vediamo, cos'è un metodo Map ()? Qual è la sintassi per le matrici di mappatura usando il metodo Map ()?

L'array Metodo della mappa viene utilizzato per costruire un nuovo array mappato in base al valore di ritorno della funzione di callback per ciascun elemento.

var maptapray = array.mappa (callbackfunction, thisvalue)

IL richiamare è la funzione che verrà chiamata ogni volta per un singolo elemento e restituire un valore che verrà archiviato in un nuovo array. La sintassi per la funzione di callback è

funzione (valore, [indice [, array]])

valore è un argomento necessario, che in realtà è un singolo elemento dell'array.
IL indice è un argomento opzionale che verrà utilizzato come indice di ciascun elemento nella funzione di callback.
IL vettore è anche un argomento opzionale. Possiamo passare questo argomento se vogliamo usare l'array nella funzione di callback.

questo valore è il valore che vogliamo passare, che verrà utilizzato come "questo" nella funzione di callback. Altrimenti, verrà approvato "indefinito".

JavaScript fornisce il per ... in loop e foreach loop per iterarsi attraverso elementi e manipolando array. Ma perché abbiamo bisogno di un metodo della mappa a parte questo? Ci sono due motivi principali per questo. Uno è la separazione di preoccupazione e il secondo è la semplice sintassi per svolgere tali attività. Quindi, proviamo alcuni esempi diversi per dimostrare lo scopo e il giusto uso.

Esempi

Prima di tutto, avremo una semplice dimostrazione in cui abbiamo una semplice serie di numeri su cui proveremo a eseguire qualsiasi semplice operazione aritmetica su ogni singolo elemento.

var arr = [4, 8, 16, 64, 49];

Ora, prima di applicare il metodo della mappa su questo array. Scriveremo prima una funzione di callback a cui possiamo chiamare nella nostra funzione mappa in cui, supponiamo che vogliamo moltiplicare ogni elemento con 10 e avere un nuovo array.

funzione multiply (elemento)
var newelement = elemento * 10;
restituire newelment;

Tutto è impostato per applicare il metodo della mappa sul array e avere i risultati richiesti.

var newarr = arr.mappa (moltiplica);

Ora, se diamo un'occhiata al "Newarr",

console.log (newarr);

Possiamo vedere l'ultimo array mappato nell'output secondo i nostri requisiti.

Tieni presente questo che la lunghezza del nuovo array mappato sarà sicuramente uguale all'array originale.

Esiste un modo più breve di svolgere lo stesso compito usando la freccia o la funzione anonima all'interno di un metodo della mappa. Quindi, possiamo scrivere una funzione di callback all'interno di un metodo della mappa come questo

var newarr = arr.mappa ((element) =>
Elemento di ritorno * 10
)

Oppure, se vogliamo essere un professionista e renderlo più conciso. Possiamo farcela

var newarr = arr.mappa (e => e * 10)

Bene! Quindi, questa è stata la dimostrazione di base del metodo della mappa e diversi modi per scrivere la funzione di richiamata. Ma questa funzione è più utile, quando giochiamo con una serie di oggetti. Ecco dove accade la vera implementazione.

Utilizzo della mappa con una matrice di oggetti

In questo esempio, supponiamo che una serie di oggetti in cui ogni oggetto contiene le informazioni di un giocatore. Il nome del giocatore e il suo ID.

var arr = [
id: 12, nome: "James",
id: 36, nome: "Morgan",
id: 66, nome: "Jordan"
];

Ora, diciamo che vogliamo estrarre gli ID da ogni oggetto e avere una nuova serie di ID.
Ma, per capire, come il metodo della mappa è diverso e aiuta meglio del ciclo forea. Proveremo a entrambi (Metodo Map e Forech Loop) per svolgere lo stesso compito e imparare la differenza.

Quindi, prima, proveremo a estrarre ID usando il ciclo foreach e quindi usando il metodo della mappa.

var extractedids = [];
arr.foreach ((element) =>
restituire extractedids.Push (elemento.id);
)

Ora, se diamo un'occhiata agli ID estratti.

console.log (extractedids);

Li abbiamo separati in un array. Ma ora dimostriamo lo stesso output usando il metodo della mappa.

var extractedids = arr.mappa ((element) =>
Elemento di ritorno.id;
)
console.log (extractedids);

Osservando la differenza nel codice e lo stesso output, possiamo realizzare la vera differenza tra i due metodi (foreach e map). La sintassi e la separazione della preoccupazione.

Allo stesso modo, possiamo eseguire molte altre operazioni. Se dobbiamo giocare e ottenere alcuni dati dall'array di oggetti. Supponiamo che una serie di oggetti in cui ogni oggetto contiene due proprietà: nome e cognome.

var arr = [
FirstName: "John", LastName: "Doe",
FirstName: "Morgan", LastName: "Freeman",
FirstName: "Jordan", LastName: "Peterson"
];

Ora, vogliamo avere un array che contiene i nomi completi. Quindi, scriveremo una funzione di mappa come questa per soddisfare il nostro scopo

var fullname = arr.mappa ((persona) =>
Persona di ritorno.primo nome + " + persona.cognome
)
console.log (fullname);

Come puoi vedere, abbiamo un array separato con nomi completi. È fantastico.

Quindi, questi sono alcuni dei modi di base e diversi di come una funzione di mappa può essere utilizzata per soddisfare i nostri requisiti di sviluppo e aiuta nella vita di ogni sviluppatore JavaScript.

Conclusione

In questo articolo, abbiamo appreso il metodo Map () Map () più usato di JavaScript e abbiamo imparato alcuni dei diversi modi per utilizzare il metodo MAP. Questo articolo spiega il concetto del metodo della mappa in un modo così semplice e profondo che qualsiasi codificatore principiante può capirlo e utilizzarlo per i suoi bisogni. Quindi, continua a imparare, lavorare e ottenere esperienza in JavaScript con Linuxhint.com per avere una migliore presa su di esso. Grazie mille!