React音频播放器洗牌：如何生成0-51无重复随机整数？

通用方案：生成指定范围无重复随机整数序列 #

要生成无重复的随机整数，最靠谱的方式是先创建包含目标范围所有数的数组，再用Fisher-Yates洗牌算法打乱顺序——这是公认的高效且公平的洗牌方式，不会出现重复值。

实现代码 #

function shuffleArray(array) {
  // 拷贝原数组，避免修改原始数据
  const arr = [...array];
  for (let i = arr.length - 1; i > 0; i--) {
    // 生成0到i的随机索引
    const j = Math.floor(Math.random() * (i + 1));
    // 交换当前元素和随机索引的元素
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

// 生成0到51的无重复随机序列示例
const randomUniqueNumbers = shuffleArray(Array.from({length: 52}, (_, i) => i));

React音频播放器洗牌功能适配 #

针对你的场景（生成0-51无重复随机数实现洗牌），可以直接把上述逻辑整合到React组件中：

组件实现示例 #

import { useState } from 'react';

function AudioPlayer() {
  // 初始化时生成洗牌后的ID序列
  const [shuffledSongIds, setShuffledSongIds] = useState(() => {
    const fullIds = Array.from({length: 52}, (_, i) => i);
    return shuffleArray(fullIds);
  });

  // 点击洗牌按钮时重新生成序列
  const handleShuffle = () => {
    const newIds = Array.from({length: 52}, (_, i) => i);
    setShuffledSongIds(shuffleArray(newIds));
  };

  // 后续播放逻辑可直接按顺序取用shuffledSongIds中的ID
  return (
    <div className="audio-player">
      <button onClick={handleShuffle}>随机播放</button>
      {/* 播放器其他UI与逻辑 */}
    </div>
  );
}

// 复用洗牌函数
function shuffleArray(array) {
  const arr = [...array];
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

为什么你之前的代码会出现重复？ #

你用Math.floor(Math.random() * 52)每次单独生成随机数，没有记录已使用过的值，相当于每次都是从0-51的全范围里随机选，自然会重复。这种方式只适合单次随机取值，不适合需要无重复序列的场景。

动态歌曲数量适配（可选） #

如果你的歌曲数量不是固定52，可根据实际歌曲列表生成：

// 假设songs是你的歌曲数据数组
const fullIds = songs.map(song => song.id);
const shuffledIds = shuffleArray(fullIds);

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