如何反转数组或按降序执行map操作？reverse函数无效求助

问题原因 #

你用Array(10).fill(1)生成的数组里所有元素都是1，调用reverse()后数组内容和原数组完全一致，所以视觉上看不出变化——并不是reverse()函数失效了。

解决方案 #

1. 实现数组反转并渲染

先生成包含唯一标识（比如索引值）的数组，再执行反转，这样反转后的数组顺序会明显变化：

<tbody>
  {Array.from({ length: 10 }, (_, i) => i).reverse().map((num) =>
    <ObjectRow key={num} />
  )}
</tbody>

Array.from({ length: 10 }, (_, i) => i)会生成数组[0, 1, 2, ..., 9]，反转后变成[9, 8, 7, ..., 0]，再通过map渲染组件就能看到顺序反转的效果。

2. 直接按降序执行map操作

不需要反转数组，直接生成降序的索引序列来渲染：

<tbody>
  {Array.from({ length: 10 }, (_, i) => 9 - i).map((num) =>
    <ObjectRow key={num} />
  )}
</tbody>

或者用自执行函数结合for循环生成元素列表：

<tbody>
  {(() => {
    const rows = [];
    for (let i = 9; i >= 0; i--) {
      rows.push(<ObjectRow key={i} />);
    }
    return rows;
  })()}
</tbody>

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