Phenquestions
L'array metodo della mappa è usato per costruire un nuovo array mappato basato sul valore restituito dalla funzione di callback per ogni elemento.
var mappedArray = array.map(callbackFunction, thisValue)Il richiama è la funzione che verrà chiamata ogni volta per un singolo elemento e restituirà un valore che verrà memorizzato 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 facoltativo 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 "this" nella funzione di callback. In caso contrario, verrà passato "undefined".
Javascript fornisce il ciclo for... in e il ciclo foreach per scorrere gli elementi e manipolare gli array. Ma perché abbiamo bisogno di un metodo di mappa a parte questo?? Ci sono due ragioni principali per questo. Uno è la separazione delle preoccupazioni e il secondo è la facile sintassi per svolgere tali compiti. Quindi, proviamo alcuni esempi diversi per dimostrare lo scopo e il giusto uso di esso.
Esempi
Prima di tutto, faremo una semplice dimostrazione in cui abbiamo un semplice array di numeri su cui cercheremo di eseguire qualsiasi semplice operazione aritmetica su ogni singolo elemento.
var arr = [4, 8, 16, 64, 49];Ora, prima di applicare il metodo map su questo array. Scriveremo prima una funzione di callback a cui possiamo chiamare nella nostra funzione map in cui, diciamo, vogliamo moltiplicare ogni elemento per 10 e avere un nuovo array.
funzione moltiplica (elemento)var newElement = elemento * 10;
ritorna newElement;
Tutto è impostato per applicare il metodo della mappa sull'array e ottenere i risultati richiesti.
var newArr = arr.mappa (moltiplica);Ora, se diamo un'occhiata al "newArr",
console.log(nuovoArr);Possiamo vedere l'ultimo array mappato nell'output secondo i nostri requisiti.
Tieni presente che la lunghezza del nuovo array mappato sarà sicuramente uguale all'array originale.
Esiste un modo più breve per eseguire la stessa attività utilizzando la freccia o la funzione anonima all'interno di un metodo mappa. Quindi, possiamo scrivere una funzione di callback all'interno di un metodo map come questo
var newArr = arr.map((elemento) =>elemento di ritorno * 10
)
Oppure, se vogliamo essere un professionista e renderlo più conciso. Possiamo farcela
var newArr = arr.mappa(e => e * 10)Tutto a posto! Quindi, questa è stata la dimostrazione di base del metodo map e dei diversi modi per scrivere la funzione di call back. Ma questa funzione è più utile quando stiamo giocando con una serie di oggetti. È lì che avviene la vera implementazione.
Utilizzo di Map con un array di oggetti
In questo esempio, supponiamo un array di oggetti in cui ogni oggetto contiene le informazioni di un giocatore. Nome del giocatore e il suo ID.
var arr = [id: 12, nome: "James",
id: 36, nome: "Morgan",
id: 66, nome: "Giordania"
];
Ora, diciamo che vogliamo estrarre gli ID da ogni oggetto e avere un nuovo array di ID.
Ma, per capire, come il metodo della mappa è diverso e aiuta meglio del ciclo foreach. Proveremo entrambi (metodo mappa e ciclo foreach) per fare lo stesso compito e imparare la differenza.
Quindi, per prima cosa, proveremo ad estrarre gli ID usando il ciclo foreach e poi usando il metodo map.
var estratti ID = [];arr.forEach((elemento) =>
restituisce gli ID estratti.push(elemento.id);
)
Ora, se diamo un'occhiata agli ID estratti.
console.log(ID estratti);
Li abbiamo separati in un array. Ma ora dimostriamo lo stesso output usando il metodo map.
elemento di ritorno.identificazione;
)
console.log(ID estratti);
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 delle preoccupazioni.
Allo stesso modo, possiamo eseguire molte altre operazioni. Se dobbiamo giocare e ottenere alcuni dati dall'array di oggetti. Supponiamo un array di oggetti in cui ogni oggetto contiene due proprietà: nome e cognome.
var arr = [firstName: "John", lastName: "Doe",
firstName: "Morgan", lastName: "Freeman",
nome: "Giordania", cognome: "Peterson"
];
Ora, vogliamo avere un array che contenga i nomi completi. Quindi, scriveremo una funzione mappa come questa per raggiungere il nostro scopo
var fullName = arr.map((persona) =>persona di ritorno.nome + " + persona.cognome
)
console.log(nome completo);
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 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 del metodo map() più utilizzato di javascript per gli array e abbiamo appreso alcuni dei diversi modi di utilizzare il metodo map. Questo articolo spiega il concetto del metodo mappa in un modo così facile e profondo che qualsiasi programmatore principiante può capirlo e utilizzarlo secondo le sue esigenze. Quindi, continua ad imparare, lavorare e acquisire esperienza in javascript con linuxhint.com per avere una migliore comprensione su di esso. Grazie mille!
