JIYIK CN >

Reversing an array in React:

1. Use spread syntax (...)to create a shallow copy of an array.
2. Call the method on the copy reverse().
3. Store the result in a variable.

export default function App() {
  const people = [
    {name: 'Alice', country: 'Austria'},
    {name: 'Bob', country: 'Belgium'},
    {name: 'Carl', country: 'Canada'},
  ];

  // 👇️ create copy and reverse
  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>
  );
}

We use spread syntax (...)to unpack the array's values ​​into a new array, creating a shallow copy.

This enables us to use the method without modifying the original array reverse().

Array.reverseThe method changes the contents of the original array.

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

const reversed = arr.reverse();
console.log(reversed); // 👉️ ['c', 'b', 'a']

console.log(arr); // 👉️ ['c', 'b', 'a']

reverse()method reverses the array and returns the result. This is probably not the behavior we are looking for.

注意, the original array stored in the arr variable is also reversed.

That’s why we create a shallow copy ahead of time — to avoid mutating the original array.

Generally speaking, it is best to avoid mutating arrays and objects in place, as it makes our code cluttered and hard to follow.

Alternatively, we can use Array.slicethe method.

Reversing an array in React:

1. Calling the slice() method of an array creates a shallow copy.
2. Call the reverse() method on the copy .
3. Store the result in a 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>
  );
}

The first step is to create a shallow copy of the array using Array.slicethe method.

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

const copy = arr.slice();
console.log(copy); // 👉️ ['a', 'b', 'c']

When the method is called without providing any arguments slice, it returns a shallow copy of the original array.

We can then call the method on the copy reverse()to avoid mutating the original array.