Di recente, i browser hanno adottato un nuovo metodo interoperabile che è possibile richiamare sugli array:
Array.prototype.with()
Questo articolo illustra come funziona questo metodo e come utilizzarlo per aggiornare un array senza modificare l'array originale.
Introduzione a Array.prototype.with(index, value)
Il metodo Array.prototype.with(index, value)
restituisce una copia dell'array di cui è
chiamata con il index
impostato sul nuovo value
da te specificato.
L'esempio seguente mostra un array di età. Vuoi creare una nuova copia di l'array cambiando la seconda età da 15 a 16:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Suddivisione del codice: ages.with(...)
restituisce una copia della variabile ages
senza modificare l'array originale. ages.with(1, …)
sostituisce il secondo elemento
(index = 1
). ages.with(1, 16)
assegna il secondo elemento a 16
.
Ecco come è stato possibile creare una nuova copia dell'array con una modifica.
Ciò è particolarmente utile per assicurarsi che l'array originale rimanga senza modifiche e questo articolo illustra alcuni casi d'uso a questo proposito. Ma per il momento dai un'occhiata a cosa sarebbe successo se avessi utilizzato la notazione tra parentesi:
const ages = [10, 15, 20, 25];
const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)
Come puoi vedere, anche la variabile ages
è stata modificata in questo esempio. Ovvero
perché quando assegni ages = newAges
, JavaScript non copia l'array ma
crea un riferimento all'altro array. Quindi, qualsiasi modifica in una
influenzano l'altra, in quanto entrambe puntano allo stesso array.
Array.prototype.with() e imutability
L'immutabilità è al centro di molti framework e librerie di frontend, per citare alcune: React (e redux) e Vue
Inoltre, altri framework e librerie non richiedono necessariamente l'immutabilità, incoraggiali per migliorare le prestazioni: Angular e Lit
Spesso gli sviluppatori dovevano usare altri metodi che restituivano copie di array che ha compromesso la leggibilità del codice:
const ages = [10, 15, 20, 25];
const newAges = ages.map((age, index) => {
if (index === 1) {
return 16;
}
return age;
});
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)
Ecco un esempio di codepen di come .with()
può essere utilizzato in React in combinazione
con useState per aggiornare in modo immutabile un array di elementi:
Poiché il metodo .with()
restituisce una copia dell'array, puoi concatenare più elementi
.with()
o anche altri metodi di array. L'esempio seguente dimostra
incrementando la seconda e la terza età dall'array:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)
console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Altri nuovi metodi immutabili
Di recente sono diventati interoperabili altri tre metodi:
Array.prototype.toReversed()
che inverte l'array senza modificare il valore array originale.Array.prototype.toSorted()
che ordina l'array senza a modificare l'array originale.Array.prototype.toSpliced()
che funziona come.splice()
ma senza modificare l'array originale.
Questi tre metodi sono, secondo MDN, la versione di copia controparti. Questi metodi possono essere utilizzati anche laddove è prevista l'immutabilità preferito.
In conclusione, gli aggiornamenti immutabili possono essere ottenuti più facilmente in
JavaScript con uno dei quattro metodi presentati in questo articolo. In particolare,
il metodo .with()
semplifica l'aggiornamento di un singolo elemento dell'array
senza modificare l'array originale.