如何在JavaScript中生成无重复随机值数组（React场景）

原实现的问题 #

• 多层嵌套的includes判断仅能有限次重试，当数组接近填满时重复概率极高，会导致最终数组长度不足
• 递归方案若未正确设置终止条件，易触发无限递归导致调用栈溢出
• 重复生成随机数的方式效率低下，尤其在数组元素较多时（比如你的42个元素场景）

推荐方案：Fisher-Yates 洗牌算法 #

这是生成无重复随机序列的经典高效算法，时间复杂度为O(n)，直接对索引数组进行原地洗牌，彻底避免重复判断与无效重试。

替换randomTechList函数 #

// arr =[img_src_0, img_src_1, img_src_2,...img_src_41]
export default function randomTechList(arr) {
  // 创建完整索引数组 [0,1,2,...,41]
  const indices = Array.from({ length: arr.length }, (_, i) => i);
  // Fisher-Yates 核心洗牌逻辑
  for (let i = indices.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    // 交换当前位置与随机位置的元素
    [indices[i], indices[j]] = [indices[j], indices[i]];
  }
  return indices;
}

React组件使用（无需修改原有映射逻辑） #

import Carousel from 'react-bootstrap/Carousel';
import { techList } from './img/techList.js';
import randomTechList from './globalFunctions/randomTechList.js';

export default function SlideShow() {
  let randomIdx = randomTechList(techList);
  return(
    <div className='openingCarusel'>
      <Carousel>
        {randomIdx.map((item, idx) => (
          <Carousel.Item interval={50} className="imgContainer" key={idx}>
            <img
              className="d-block w-10 openingIMG"
              src={techList[item]}
              alt={`slide_${idx}`}
              id={`slide_img_${idx}`}
            />
          </Carousel.Item>
        ))}
      </Carousel>
    </div>
  );
}

额外优化建议 #

• 若希望每次组件渲染都生成新的随机序列，可借助React Hooks控制：

  // 每次组件渲染都重新生成随机序列
  const [randomIdx] = useState(() => randomTechList(techList));
  // 仅当techList变化时重新生成
  const randomIdx = useMemo(() => randomTechList(techList), [techList]);
  

• 原代码中Math.floor(Math.random() * max) + 1会跳过索引0，导致第一张图片永远无法被选中，洗牌算法已修复该问题。

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