.map()

Il metodo .map() crea un nuovo array popolato con i risultati della chiamata di una funzione fornita su ogni elemento nell'array chiamante.

Sintassi

// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function (element) { /* … */ })
map(function (element, index) { /* … */ })
map(function (element, index, array) { /* … */ })
map(function (element, index, array) { /* … */ }, thisArg)

Parametri

callbackFn : Una funzione da eseguire per ogni elemento nell'array. Il suo valore restituito viene aggiunto come singolo elemento nel nuovo array. La funzione viene chiamata con i seguenti argomenti:

element : L'elemento corrente in fase di elaborazione nell'array.

index : L'indice dell'elemento corrente in fase di elaborazione nell'array.

array : è stato chiamato l'array map().

thisArg - opzionale :  Un valore da utilizzare come this durante l'esecuzione di callbackFn 

Return

Un nuovo array in cui ogni elemento è il risultato della funzione di callbackFn

Descrizione

Il metodo .map() è un metodo iterativo. Chiama una funzione di callbackFn fornita una volta per ogni elemento di un array e costruisce un uovo array dai risultati. callbackFn viene richiamato solo per glia array che hanno valori assegnati. Non viene richiamato per gli slot vuoti negli array sparsi.

Il metodo .map() è un metodo di copia. Tuttavia la funzione fornita come callbackFn può modificare l'array. Si notil, tuttavia, che la lunghezza dell'array viene salvata prima della prima chiamata di callbackFn. Perciò:

  • callbackFn non visiterà alcun elemento aggiunto oltre la lunghezza iniziale dell'array quando è iniziata la chiamata a map().
  • Le modfiche agli inidici già modificati non causano il richiamo di callbackFn su di essi.
  • Se un elemento dell'array esesitente, non ancora visitato viene modificato da callbackFn, il suo valore passato sarà il valore nel momento in cui l'lemento viene visitato. Gli elementi eliminati non vengono visitati.

Esempi

Esempio 1

Il seguente esempio prende un array di numeri e crea un nuovo array contentenente le radici quadrate dei numeri nel primo array.  Il metodo Math.sqrt() restituisce la radice quadrata di un numero.

const numeri = [1, 4, 9, 16, 25, 36, 49];
const roots = numeri.map((num) => Math.sqrt(num));

console.log(roots); // roots =  [1, 2, 3, 4, 5, 6, 7]
console.log(numeri) // numeri rimane invariato: [1, 4, 9, 16, 25, 36, 49]

Riformattare un array

Con il seguente esempio riformattiamo un array di oggetti creando un nuovo array contenente le informarmazioni riformattate.

const arr1 = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

const formatArray = arr1.map(({ key, value }) => ({ [key]: value }));

console.log(formatArray); // [{1 : 10} , {2 : 20} , {3 : 30}]
console.log(arr1); // [{key:1 , value: 10} , {key:2 , value: 20} , {key:3 , value: 30}]

Contenuti