在 React 中反转数组
How to Reverse an Array in React
在 React 中反转数组:
- 使用扩展语法 (…) 创建数组的浅表副本。
reverse()
在副本上调用方法。- 将结果存储在变量中。
应用程序.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 中反转数组:
- 调用
slice()
数组上的方法来创建一个浅拷贝。 reverse()
在副本上调用方法。- 将结果存储在变量中。
应用程序.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()
在副本上调用该方法以避免改变原始数组。