Skip to content
Freewebsolution
Menu
  • Home
  • angular
  • php
  • guide
  • laravel
  • react
  • corsi
Freewebsolution
Menu
metodo-map

Il metodo map di javascript: come utilizzarlo-#6

Posted on 12 Maggio 201913 Maggio 2019 by lucio
Category: Corso typescript, guide
4.742 views Tempo di lettura: 3 minuti

Il metodo map  si utilizza nel momento in cui abbiamo la necessità di gestire o modificare  i valori memorizzati negli array.

Per ogni elemento dell’Array sorgente viene richiamata una funzione di callback mediante una arrow function, vista in una delle lezioni precedenti.

In programmazione, un callback (o, in italiano, richiamo) è, in genere, una funzione, o un “blocco di codice” che viene passata come parametro ad un’altra funzione. In particolare, quando ci si riferisce alla callback richiamata da una funzione, la callback viene passata come argomento ad un parametro della funzione chiamante. In questo modo la chiamante può realizzare un compito specifico (quello svolto dalla callback) che non è, molto spesso, noto al momento della scrittura del codice.

Se invece ci si riferisce alla callback come funzione richiamata dal sistema operativo, di norma ciò si utilizza allo scopo di gestire particolari eventi: dal premere un bottone con il mouse, allo scrivere caratteri in un campo di testo. Ciò consente, quindi, a un programma di livello più basso, di richiamare una funzione (o servizio) definita a un livello più alto.

(fonte wikipedia)

Questa ne elabora il risultato e ne restituisce il valore modificato che popolerà un nuovo array.

Il metodo map e le “firme”

Le firme del metodo map variano in base al numero dei parametri che si passano alla funzione di callback:

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

nel suddetto esempio l’Array originario è costituito da una lista di nomi di immagini le quali dovranno essere modificate con l’aggiunta di un prefisso.

La funzione di callback è stata scritta con la notazione compatta:

(nomeimg) => {


return 'http://www.miosito.com/' + nomeimg;

}

L’Array di nome ArrayNew ha all’interno una serie di url relativi alle singole immagini dell’array originario.

Il callback può essere una funzione predefinita , anonima o personalizzata in JavaScript.L’array originario non viene mai modificato.

Ricordatevi di inserire sempre l’istruzione return nel corpo del callback nel caso in cui questo sia costituito da più istruzioni.

L’operatore map della libreria RXjs

Come visto in uno dei precedenti tutorial ,in Angular, spesso si utilizzano gli Observable, quindi all’interno della libreria Rxjs è stato introdotto un operatore di trasformazione map simile a quello usato in Javascript.

Quest’ultimo , a differenza del primo, non va ad agire all’interno di un array bensì va ad agire all’interno di un Observable.

La sintassi ci consente di trasformare ogni elemento emesso da un Observable, dove si può accedere ai dati o vi si può applicare una funzione di nostra scelta.

In Angular ogni qual volta che comunichiamo con un server esterno, applicando la classe HttpClient,otteniamo degli Observable (anche  il dato restituito, a sua volta, è un Observable).

Vediamo un esempio tratto dal corso “Angular dalla alla webApp“:

getAll():Observable<Device[]>{

return this.http.get<Device[]>(url)

.map(res => res['dati'])

.catch(this.errorhandler)

);

}

dove il risultato della chiamata http.get è un oggetto con dei dati che non sono noti ad Angular e, di conseguenza, dovrò sfruttare la classica notazione delle parentesi quadre per accedere alla proprietà restutuita dall’interrogazione della Url.

Lucio Ticali

Lucio Ticali - Insegnante su Udemy

Hi, I'm Lucio Ticali, author of this blog. I am a Full stack developer and Udemy Instructor with over 20 years of experience in the Information Technology sector.

Ultime da Freeweb

  • Creare un’applicazione di e-commerce con Laravel e Stripe
  • Come integrare Stripe con Laravel 11
  • Realizza il gioco del solitario con React e Laravel: Parte 1
  • Creare Interfacce Dinamiche con Laravel 11 e Livewire 3: Guida Passo-Passo
  • Come creare una Progressive Web App (PWA) con Laravel 11

Corsi da non perdere

React NodeJs FullStack

€ 9.99 / €12.99 Guida React e Nodejs

Ebook da non perdere

Laravel 11 dall'idea al codice

€ 9.99 / €21.99 laravel 11: dall'idea al codice

©Copyright 2025 - Freewebsolution. All rights reserved, Lucio Ticali Lucio ticali Udemy instructor instructor. Privacy-Informativa cookies