Les navigateurs ont récemment acquis une nouvelle méthode interopérable que vous pouvez appeler sur des tableaux:
Array.prototype.with()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Cet article décrit son fonctionnement et explique comment l'utiliser pour mettre à jour un tableau. sans modifier le tableau d'origine.
Présentation de Array.prototype.with(index, value)
La méthode Array.prototype.with(index, value)
renvoie une copie du tableau
appelé avec le index
défini sur le nouveau value
que vous fournissez.
L'exemple suivant montre un tableau d'âges. Vous souhaitez créer une copie de le tableau tout en faisant passer le deuxième âge de 15 à 16 ans:
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)
Décomposition du code : ages.with(...)
renvoie une copie de la variable ages
.
sans modifier le tableau d'origine. ages.with(1, …)
remplace le deuxième élément
(index = 1
). ages.with(1, 16)
attribue le deuxième élément à 16
.
C'est ainsi que vous avez pu créer une copie du tableau avec une modification.
Cela est très utile lorsque vous voulez vous assurer que le tableau d'origine reste et cet article couvre certains cas d'utilisation. Mais, pour l’instant, regardez ce qui se serait produit si vous aviez utilisé la notation entre crochets:
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 🙁)
Comme vous pouvez le voir, la variable ages
a également été modifiée dans cet exemple. C'est
car lorsque vous attribuez ages = newAges
, JavaScript ne copie pas le tableau,
crée plutôt une référence à l'autre tableau. Ainsi, tout changement
dans l’un d’eux aura également
affecter l'autre car ils pointent
tous deux vers le même tableau.
Array.prototype.with() et immuabilité
L'immuabilité est au cœur de nombreux frameworks et bibliothèques frontend, pour nommer React (et redux) et Vue
De plus, d'autres bibliothèques et frameworks ne nécessitent pas nécessairement une immuabilité, mais encouragez-le pour de meilleures performances: Angular et Lit
Ainsi, les développeurs ont souvent dû utiliser d'autres méthodes qui renvoyaient des copies de tableaux ce qui sacrifiait la lisibilité du code:
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)
Voici un exemple de Codepen qui illustre comment .with()
peut être utilisé dans React en combinaison
avec useState pour mettre à jour de manière immuable un tableau d'éléments:
Étant donné que la méthode .with()
renvoie une copie du tableau, vous pouvez enchaîner plusieurs
les appels .with()
ou même d'autres méthodes de tableau. L'exemple suivant illustre
en incrémentant les deuxième et troisième âges du tableau:
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)
Autres nouvelles méthodes immuables
Trois autres méthodes sont récemment devenues interopérables:
Array.prototype.toReversed()
qui inverse le tableau sans modifier le tableau d'origine.Array.prototype.toSorted()
qui trie le tableau sans en modifiant le tableau d'origine.Array.prototype.toSpliced()
qui fonctionne comme.splice()
, mais sans modifier le tableau d'origine.
Selon MDN, ces trois méthodes consistent à copier vos homologues. Ces méthodes peuvent également être utilisées lorsque l'immuabilité est attendue ou de préférence.
En conclusion, les mises à jour immuables sont plus faciles à effectuer
à l'aide de l'une des quatre méthodes présentées dans cet article. Plus précisément,
La méthode .with()
facilite la mise à jour d'un seul élément du tableau.
sans modifier le tableau d'origine.