Trasformazioni degli array in

Informazioni su Trasformazioni degli array

In JavaScript, la classe Array ha molti metodi integrati potenti per trasformare gli array. Questi metodi rendono la conversione di un array in un altro molto più semplice di quanto sarebbe con un semplice ciclo for o una manipolazione più diretta.

Alcuni metodi sono puri, nel senso che non modificano l'array originale. Ne restituiscono invece uno nuovo. Altri metodi, invece, modificano l'array su cui vengono chiamati e non restituiscono l'array modificato.

Qui di seguito sono presentati alcuni dei metodi più usati per trasformare gli array. Un elenco completo dei metodi disponibili si trova nella documentazione MDN.

map (pura)

Crea un nuovo array trasformando ogni elemento in base a una funzione passata come argomento. Queste funzioni di callback sono spesso scritte come funzioni arrow.

let arr = [1, 2, 3, 4];

const newArr = arr.map((value) => value - 1);
console.log(newArr);
// => [0, 1, 2, 3]
console.log(arr);
// => [1, 2, 3, 4]

Vale la pena notare che l'array risultante avrà sempre la stessa lunghezza di quello originale.

filter (pura)

Crea un array filtrando quello corrente, data una funzione di filtro (che restituisce true se l'elemento va mantenuto e false se va rimosso).

let arr = [1, 2, 3, 4];

arr.filter((value) => value % 2 === 0);
// => [2, 4]

reduce (pura)

Riduce l'array a un unico valore usando una funzione che accetta come parametri un accumulatore e l'elemento corrente dell'array. Questa funzione indica come l'elemento corrente deve essere unito all'accumulatore e restituisce l'accumulatore che verrà usato all'iterazione successiva.

let arr = [1, 2, 3, 4];

// Get the sum of elements
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
// => 10

// Classify the numbers by whether they are odd or not
arr.reduce(
  (accumulator, currentValue) => {
    if (currentValue % 2 === 0) {
      accumulator.even.push(currentValue);
    } else {
      accumulator.odd.push(currentValue);
    }

    return accumulator;
  },
  { even: [], odd: [] },
);
// => { even: [2, 4], odd: [1, 3] }

reverse

Inverte l'ordine degli elementi di un array.

const arr = [1, 2, 3, 4];

arr.reverse();
// => [4, 3, 2, 1]

Questo metodo modifica l'array su cui viene chiamato.

slice (pura)

Dati un indice iniziale e uno finale, crea un sotto-array a partire dall'array su cui viene chiamato.

L'elemento in corrispondenza dell'indice finale non viene incluso. Inoltre, tutti i parametri sono opzionali: l'indice iniziale è 0 per impostazione predefinita, mentre l'indice finale è la lunghezza dell'array.

const arr = [1, 2, 3, 4];

arr.slice(1, 2); // [2]
arr.slice(1); // [2, 3, 4]
// You can also use negative numbers, that represent the indexes
// starting from the end of the array
arr.slice(-2); // [3, 4]

splice

Rimuove o sostituisce e/o aggiunge nuovi elementi di un array. Accetta i seguenti parametri:

• l'indice dell'elemento da cui iniziare a modificare l'array
• il numero di elementi da eliminare
• gli elementi da inserire nell'array (opzionale)

splice restituisce gli elementi che sono stati rimossi.

const arr = ['1', '2', '5', '6'];

// Insert an element at index 2
arr.splice(2, 0, '3');
console.log(arr);
// => ['1', '2', '3', '5', '6']

// Remove 2 elements, starting at index 3 and insert 2 elements
const removed = arr.splice(3, 2, '4', '5');
console.log(removed);
// => ['5', '6']
console.log(arr);
// => ['1', '2', '3', '4', '5']

// Remove 1 element at index 1
arr.splice(1, 1);
console.log(arr);
// => ['1', '3', '4', '5']

sort

Per impostazione predefinita, sort ordina gli elementi di un array convertendoli prima in stringhe e applicando poi il confronto tra stringhe (vedi il concetto di confronto). L'ordinamento avviene sul posto, il che significa che l'array originale viene modificato. sort restituisce anche l'array modificato, cosa comoda se vuoi concatenare altri metodi ad esso.

const arr = ['c', 'a', 'z', 'b'];
const result = arr.sort();
console.log(result);
// => ['a', 'b', 'c', 'z']
console.log(arr);
// => ['a', 'b', 'c', 'z']

const arr = [3, 1, 2, 10];
arr.sort();
// => [1, 10, 2, 3]
// Because the string '10' comes before '2' in dictionary order.

Per personalizzare il comportamento dell'ordinamento, puoi passare come argomento una funzione di confronto. La funzione di confronto viene chiamata con due argomenti, che sono due elementi dell'array. Deve quindi restituire quanto segue:

• un numero negativo se il primo argomento va ordinato prima del secondo
• un numero positivo se il primo argomento va ordinato dopo il secondo
• 0 se l'ordine degli elementi deve rimanere lo stesso

Con questo, il problema dell'ordinamento dei numeri si risolve passando la funzione di confronto corretta.

const arr = [3, 1, 2, 10];
arr.sort((a, b) => a - b);
// => [1, 2, 3, 10]
// "a - b" is negative when b is greater than a, positive when
// a is greater than b and 0 when they are equal.

Ecco un esempio di come si può usare una funzione di confronto personalizzata per ordinare un array di oggetti.

const arr = [
  { name: 'Lydia', age: 7 },
  { name: 'Anne', age: 34 },
  { name: 'Holger', age: 59 },
];

arr.sort((item1, item2) => {
  if (item1.name < item2.name) {
    return -1;
  }
  if (item1.name > item2.name) {
    return 1;
  }
  return 0;
});
// => [ { name: 'Anne', age: 34 }, { name: 'Holger', age: 59 },
// { name: 'Lydia', age: 7 } ]

Dal 2019, la specifica del linguaggio stabilisce che l'ordinamento deve essere stabile, ma non ci sono garanzie riguardo alle prestazioni (complessità in tempo e spazio).