Comment inverser un tableau en React

par

Inverser un tableau en React #

Pour inverser un tableau dans React :

  1. Utilisez la syntaxe d’étalement (…) pour créer une copie superficielle du tableau.
  2. Appelez la fonction reverse() sur la copie.
  3. Stocker le résultat dans une variable.
export default function App() {
  const people = [
    {name: 'Alice', country: 'Austria'},
    {name: 'Bob', country: 'Belgium'},
    {name: 'Carl', country: 'Canada'},
  ];

  
  const reversed = [...people].reverse();

  return (
    <div>
      {reversed.map((person, index) => {
        return (
          <div key={index}>
            <h2>Name: {person.name}</h2>
            <h2>Country: {person.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

Nous avons utilisé la syntaxe
syntaxe d’étalement (…)
pour décompresser les valeurs du tableau dans un nouveau tableau, créant ainsi une copie superficielle.

Cela nous permet d’utiliser la fonction reverse() sans modifier le tableau d’origine.

Le site
Array.reverse
modifie le contenu du tableau d’origine à la place.

const arr = ['a', 'b', 'c'];

const reversed = arr.reverse();
console.log(reversed); 

console.log(arr);

Le site reverse() inverse un tableau en place et renvoie le résultat. Cette méthode
n’est peut-être pas le comportement que vous recherchez.

Remarquez que le tableau original stocké dans le fichier arr a également été inversé.

C’est la raison pour laquelle nous avons créé une copie peu profonde à l’avance – pour éviter de modifier le
tableau original.

En général, il est préférable d’éviter de modifier les tableaux et les objets en place, car cela rend votre code confus et difficile à suivre.

Alternativement, vous pouvez utiliser la méthode
Array.slice
de la méthode Array.

Pour inverser un tableau dans React :

  1. Appelez la fonction slice() sur le tableau pour créer une copie superficielle.
  2. Appelez la méthode reverse() sur la copie.
  3. Stocker le résultat dans une variable.
export default function App() {
  const people = [
    {name: 'Alice', country: 'Austria'},
    {name: 'Bob', country: 'Belgium'},
    {name: 'Carl', country: 'Canada'},
  ];

  
  const reversed = people.slice().reverse();

  return (
    <div>
      {reversed.map((person, index) => {
        return (
          <div key={index}>
            <h2>Name: {person.name}</h2>
            <h2>Country: {person.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

La première étape consiste à créer une copie superficielle du tableau à l’aide de la fonction
tableau.slice
pour créer une copie peu profonde du tableau.

const arr = ['a', 'b', 'c'];

const copy = arr.slice();
console.log(copy);

Lorsque la méthode slice est appelée sans fournir de paramètres, elle retourne une
copie superficielle du tableau d’origine.

Nous pouvons alors appeler la méthode reverse() sur la copie pour éviter de modifier le tableau
tableau original.

Laisser un commentaire