在 React 中以相反的顺序在数组上使用 map()

作者

在 React 中以相反的顺序对数组使用 map()

Use map() on an Array in Reverse Order in React

要map()在 React 中以相反的顺序在数组上使用该方法：

  1. 使用扩展语法 (…) 获取数组的副本。
  2. 使用该reverse()方法反转复制的数组。
  3. map()在反转数组上调用该方法。
应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bob', salary: 75},
    {id: 3, name: 'Carl', salary: 125},
  ];

  return (
    <div>
      {[...employees].reverse().map((employee, index) => {
        return (
          <div key={index}>
            <h2>Name: {employee.name}</h2>
            <h2>Salary: {employee.salary}</h2>

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

传播语法 (…)将

原始数组中的值解包到一个新数组中，创建一个浅表副本。

我们反转副本以避免改变原始数组并调用反转数组上的方法。 map()

Array.reverse方法就地更改原始数组的

内容。

应用程序.js
const arr = ['a', 'b', 'c'];

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

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

该reverse()方法原地反转数组并返回结果。这可能不是您要查找的行为。

请注意，存储在arr变量中的原始数组也被颠倒了。

这就是我们提前创建浅表副本的原因——以避免更改原始数组。

最后一步是对

反向数组使用Array.map方法。

另一种方法是使用
Array.slice
方法。

要map()在 React 中以相反的顺序在数组上使用该方法：

  1. 使用slice()方法获取数组的副本。
  2. 使用该reverse()方法反转复制的数组。
  3. Call the map() method on the reversed array.
App.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bob', salary: 75},
    {id: 3, name: 'Carl', salary: 125},
  ];

  return (
    <div>
      {employees
        .slice(0)
        .reverse()
        .map((employee, index) => {
          return (
            <div key={index}>
              <h2>Name: {employee.name}</h2>
              <h2>Salary: {employee.salary}</h2>

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

The first step is to use the
Array.slice
method to create a shallow copy of the array.

The only parameter we passed to the slice method is the start index – the index of the first element to be included in the new array.

By passing a start index of 0 and no end index, we create a shallow
copy of the original array, which we can reverse.

index.js
const arr = ['a', 'b', 'c'];

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

This achieves the same result as the example that used the spread syntax (…).

您选择哪种方法是个人喜好的问题。我会选择扩展语法 (…)，因为它更具可读性和直观性，尤其是当您的代码的读者不熟悉该slice方法所采用的参数时。

–