在ReactJS中如何从最后一个元素开始倒序遍历数组？

实现倒序遍历的几种方案 #

方案1：浅拷贝后反转数组再遍历 #

reverse()方法会直接修改原数组，因此先通过扩展运算符或者slice()做浅拷贝，再反转后调用map即可，不会影响原数组的原有顺序：

{[...allThrows].reverse().map((handThrow, reverseArrayIndex) => {
  // 若需要获取对应元素在原数组的下标，可通过 allThrows.length - 1 - reverseArrayIndex 计算得到
  // 此处保留你的原有业务逻辑
})}

如果明确后续不会再用到原数组的正序顺序，也可以直接调用allThrows.reverse().map()，但该操作会改变原数组顺序，非常不推荐，容易引发其他位置的逻辑异常。

方案2：手动控制下标遍历，无额外数组拷贝 #

如果不想做数组拷贝，也可以通过Array.from生成倒序下标序列，直接从原数组取对应元素：

{Array.from({length: allThrows.length}, (_, i) => {
  const originalIndex = allThrows.length - 1 - i
  const handThrow = allThrows[originalIndex]
  // 此处保留你的原有业务逻辑，originalIndex就是原数组从大到小的下标
})}

也可以用传统for循环倒序遍历，把渲染结果存到新数组后直接使用：

const reversedRenderList = []
for (let i = allThrows.length - 1; i >= 0; i--) {
  const handThrow = allThrows[i]
  reversedRenderList.push(/* 此处填写你的渲染逻辑 */)
}

// 渲染时直接使用生成好的数组即可
{reversedRenderList}

内容的提问来源于stack exchange，提问作者satchel