如何在 React 中反转数组

作者

在 React 中反转数组

How to Reverse an Array in React

在 React 中反转数组：

  1. 使用扩展语法 (…) 创建数组的浅表副本。
  2. reverse()在副本上调用方法。
  3. 将结果存储在变量中。
应用程序.js
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>
  );
}

我们使用
扩展语法 (…)
将数组的值解包到一个新数组中，创建一个浅拷贝。

这使我们能够在reverse()不修改原始数组的情况下使用该方法。

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.slice
方法。

在 React 中反转数组：

  1. 调用slice()数组上的方法来创建一个浅拷贝。
  2. reverse()在副本上调用方法。
  3. 将结果存储在变量中。
应用程序.js
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.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>
  );
}

第一步是使用
Array.slice
方法创建数组的浅表副本。

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

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

当在slice不提供任何参数的情况下调用该方法时，它会返回原始数组的浅表副本。

然后我们可以reverse()在副本上调用该方法以避免改变原始数组。

–

发表评论