Gli incantesimi trasformativi di Elyse

In JavaScript, la classe Array ha molti metodi integrati potenti per trasformare gli array. Questi metodi rendono molto più semplice convertire un array in un altro rispetto a un semplice ciclo for o a una manipolazione più diretta.

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

Qui sotto trovi alcuni dei metodi più usati per trasformare gli array. L'elenco completo dei metodi disponibili è nella documentazione MDN.

map (puro)

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 (puro)

Crea un array filtrando quello attuale, 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 (puro)

Riduce l'array a un unico valore usando una funzione che prende come parametri un accumulatore e l'elemento attuale dell'array. Questa funzione stabilisce come l'elemento attuale 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 gli 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 (puro)

Dati un indice di inizio e uno di fine, crea un sotto-array a partire dall'array passato come parametro.

L'elemento all'indice di fine non verrà incluso. Inoltre, tutti i parametri sono opzionali: l'indice di inizio ha come valore predefinito 0 e quello di fine ha come valore predefinito 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.

Prende 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 poi applicando il confronto tra stringhe (vedi Confronto). L'ordinamento avviene in-place, il che significa che l'array originale viene modificato. sort restituisce anche l'array modificato, cosa comoda se vuoi concatenarci altri metodi.

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

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

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

Ecco un esempio di come 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 } ]