如何在 React 中反转数组

在 React 中反转数组:

  1. 使用扩展语法 (...) 创建数组的浅表副本。
  2. 在副本上调用 reverse() 方法。
  3. 将结果存储在变量中。
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 方法改变了原数组的内容。

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. 将结果存储在变量中。
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>
  );
}

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

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

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

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

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

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 如何在 React 中反转数组