Come usare operatore Map di JavaScript

Come usare operatore Map di JavaScript

Ultimo aggiornamento: 7 giorni fa

Un'operazione comune quando si devono gestire dati memorizzati all'interno di un array, è quella di modificarne i valori. Per questo ci viene in aiuto il metodo map() della classe Array. Grazie al metodo, per ogni elemento dell'arra sorgente, viene richiamata una funzione di callback, tramite la notazione che sfrutta il simbolo freccia "arrow", che elabora il dato e ne restituisce il valore modificato, il quale servirà per popolare un nuovo array.

Il metodo presenta diverse "firme", a seconda di quanti parametri si vogliono passare in ingresso alla funzone di callback ma nella forma più semplice, può essere scritta in questo modo:

let vecchioArray = ['file1.jpg', 'file2.png', 'file3.png'];
let nuovoArray = vecchioArray.map((nomeimg) => {
  return 'http://www.miosito.com/' + nomeimg;
});

Ho ipotizzato che l'array sorgente sia costituito da una lista di nome di immagini che dovranno essere modificate con l'aggiunta di un prefisso. Come puoi osservare, la funzione di callback è stata inserita con la notazione compatta:

(nomeimg) => {
  return 'http://www.miosito.com/' + nomeimg;
}

Il nuovo array di nome "nuovoArray", avrà all'interno una serie di url completi relativi alle singole immagini dell'array originario. Il callback può essere una funzione predefinita in JavaScript, una funzione anonima, così come una funzione personalizzata. Una cosa interessante da osservare è che l'array originario non viene modificato.

NB: E’ importante inserire l’istruzione return nel corpo del callback.

Ohps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

Hai tempo per leggere? Angular

Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo. Prenotalo cliccando l'immagine qui sotto

Categoria: Angular