JS如何实现点击按钮获取打乱数组后的首个元素

首先修正现有代码的两个基础问题：一是现有数组只存了1_{8，需要补全为1}30的数值；二是补全数组打乱、取首元素的逻辑，点击按钮即可触发对应效果。

实现要点 #

• 数组初始化：直接生成1到30的连续整数数组，替换原有测试数组
• 随机打乱：采用Fisher-Yates洗牌算法做公平随机，不要用sort(() => Math.random()-0.5)的写法，这种方式打乱的结果概率分布不均，随机性不达标
• 点击逻辑：按钮触发show()函数时执行打乱，直接取打乱后数组的第一个元素即可，结果可以输出到控制台或者页面上

完整代码 #

直接替换现有代码即可运行：

<button onclick="show()">
    click
</button>
<!-- 可选：加容器直接在页面显示结果，不需要可以删掉 -->
<p>取出的随机元素：<span id="output"></span></p>

<script>
// 初始化1~30的数组
const cars = Array.from({length: 30}, (_, index) => index + 1);

// 数组打乱方法
function shuffle(arr) {
    const result = [...arr]; // 浅拷贝不修改原数组，不需要保留原数组顺序可以删这行直接操作arr
    for (let i = result.length - 1; i > 0; i--) {
        const randomPos = Math.floor(Math.random() * (i + 1));
        [result[i], result[randomPos]] = [result[randomPos], result[i]];
    }
    return result;
}

// 按钮绑定的触发函数
function show() {
    const shuffledCars = shuffle(cars);
    const firstValue = shuffledCars[0];
    // 控制台打印结果
    console.log('打乱后数组：', shuffledCars);
    console.log('第一个元素：', firstValue);
    // 页面渲染结果，不需要可以删掉
    document.getElementById('output').textContent = firstValue;
}
</script>

调整说明 #

• 如果不需要保留原数组1~30的固定顺序，可以删掉shuffle方法里的浅拷贝逻辑，直接在原数组上做交换操作即可
• 如果不需要页面展示结果，把对应的p标签和DOM操作代码删掉就行，结果会正常输出到浏览器开发者工具的控制台
• 如果只是做简单演示不在意随机性偏差，也可以简化打乱逻辑，但正式场景不推荐

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