Array.
Renvoie un nouveau tableau avec les éléments dans l’ordre inverse, sans modifier l’original.
- Renvoie
- Un nouveau tableau avec les éléments dans l’ordre inverse.
- Modifie l’original
- Non
Exemple
#const levels = [1, 2, 3, 4]
const reversed = levels.toReversed()
console.log(reversed)
console.log(levels)Définition et utilisation
#La méthode toReversed() crée une copie du tableau avec les éléments rangés du dernier au premier. Contrairement à reverse(), elle ne touche pas à l’original, vous pouvez donc inverser sans risque des données utilisées ailleurs dans le programme.
Elle appartient à la famille des méthodes copiantes, ajoutées dans la norme ES2023 avec toSorted(), toSpliced() et with(). Chacune a un équivalent mutant, mais au lieu de modifier le tableau existant, elle en renvoie un nouveau.
La copie est superficielle : les objets qu’elle contient ne sont pas clonés, donc les deux tableaux pointent vers les mêmes objets. Les emplacements vides d’un tableau creux deviennent undefined dans la copie.
Syntaxe
#array.toReversed()Plus d’exemples
#const history = ['Leçon 1', 'Leçon 2', 'Leçon 3']
const newestFirst = history.toReversed()
console.log(newestFirst[0])
console.log(history[0])
history.reverse()
console.log(history[0])const students = [{ name: 'Léa' }, { name: 'Lucas' }]
const reversed = students.toReversed()
reversed[0].name = 'Noah'
console.log(students[1].name)
console.log(reversed === students)Les tableaux sont différents, mais l’objet de Lucas est le même dans les deux. La modification de son champ dans la copie est donc visible aussi dans l’original.
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
#- Dans l’état de composants React, utilisez
toReversed()plutôt quereverse(). Modifier le tableau d’origine dans l’état est une cause fréquente d’un affichage qui ne se met pas à jour. - Dans du code plus ancien,
[...array].reverse()etarray.slice().reverse()donnent le même effet.
Entrées associées
#- Array.prototype.reverse()Inverse l’ordre des éléments du tableau sur place.
- Array.prototype.toSorted()Renvoie une copie triée du tableau, 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.with()Renvoie une copie du tableau dans laquelle l’élément à l’indice donné a une nouvelle valeur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.