Array.
Renvoie une copie du tableau dans laquelle l’élément à l’indice donné a une nouvelle valeur.
- Renvoie
- Un nouveau tableau avec l’élément remplacé.
- Modifie l’original
- Non
Exemple
#const scores = [70, 85, 90]
const corrected = scores.with(1, 95)
console.log(corrected)
console.log(scores)
console.log(scores.with(-1, 100))Définition et utilisation
#La méthode with(index, value) est l’équivalent non mutant de l’affectation array[index] = value. Elle crée une copie du tableau, y remplace un élément et renvoie le résultat. L’original reste intact.
Elle gère les indices négatifs comme at() : with(-1, x) change le dernier élément de la copie. Un indice hors limites n’allonge pas le tableau, il lève une erreur RangeError, ce qui protège contre la création accidentelle d’emplacements vides.
Elle appartient à la famille des méthodes copiantes avec toSorted(), toReversed() et toSpliced(). Elle est surtout utile là où les données doivent rester immuables : dans l’état d’un composant React, dans des reducers Redux ou dans un historique avec une fonction « annuler ».
Syntaxe
#array.with(index, value)Paramètres
#index
nombre entier
Position de l’élément à remplacer. Les valeurs négatives comptent depuis la fin.value
valeur quelconque
Nouvelle valeur de l’élément.
Plus d’exemples
#const days = ['lun', 'mar', 'mer']
try {
days.with(5, 'sam')
} catch (error) {
console.log(error.name)
}
const copy = [...days]
copy[5] = 'sam'
console.log(copy.length)Une affectation classique à l’indice 5 a allongé la copie à six éléments et y a laissé des emplacements vides. with() signale une erreur dans cette situation.
const todos = [
{ title: 'Quiz HTML', done: false },
{ title: 'Projet CSS', done: false }
]
const updated = todos.with(0, { ...todos[0], done: true })
console.log(updated[0])
console.log(todos[0])Compatibilité des navigateurs
#Largement disponible · depuis 2023
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour changer un seul champ d’un objet dans un tableau, combinez
with()avec le spread :list.with(i, { ...list[i], done: true }). - N’appelez pas
with()dans une boucle pour changer plusieurs éléments. Chaque appel copie tout le tableau ; un seulmap()est préférable.
Entrées associées
#- Array.prototype.at()Renvoie l’élément à l’indice donné, y compris compté depuis la fin.
- Array.prototype.toReversed()Renvoie un nouveau tableau avec les éléments dans l’ordre inverse, sans modifier l’original.
- Array.prototype.toSpliced()Supprime, insère ou remplace des éléments dans une copie du tableau. L’original reste inchangé.
- Array.prototype.map()Crée un nouveau tableau avec les résultats de l’appel d’une fonction pour chaque élément.
- Spread (...)La syntaxe spread décompose un tableau, une chaîne ou un objet en éléments individuels : pour copier, fusionner et passer des arguments.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.