JavaScript Rubik's Cube scrambler生成重复移动的优化咨询

问题根源 #

你的代码里scramble变量只在脚本初始化时生成了一次随机数值，之后循环调用scramble_translator函数时，没有重新生成新的随机数，导致每次都用同一个值匹配移动指令，自然会输出重复的内容。

简洁修复方案 #

不需要创建20个变量，只需要把随机数生成逻辑移到函数内部，每次调用函数时都生成新的随机值即可。另外，用数组存储所有可能的魔方移动指令，可以彻底替代冗长的if-else判断，让代码更简洁易维护。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speedcubing Timer</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        * {
            padding:20px;
        }
    </style>
</head>
<body>
<h1>CubeTimer v1.0</h1>
    <div class="row">
        <div class="col-xs-5">
            <h1>Scramble</h1>
            <h3 id="scramble"></h3>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
// 把所有可能的移动指令存在数组里
const moves = ['R ', 'R\' ', 'U ', 'U\' ', 'L ', 'L\' ', 'F ', 'F\' ', 'D ', 'D\' ', 'B ', 'B\' '];

function generateScrambleMove() {
    // 每次调用函数时生成新的随机索引
    const randomIndex = Math.floor(Math.random() * moves.length);
    return moves[randomIndex];
}

const scrambleElement = document.getElementById('scramble');
// 循环生成20次随机移动并拼接
for (let i = 0; i < 20; i++) {
    scrambleElement.innerHTML += generateScrambleMove();
}
</script>
</body>
</html>

关键优化点 #

• 随机数生成时机：把随机数生成放在函数内部，确保每次调用都能得到新的随机值，避免重复。
• 数组替代条件判断：用数组存储所有移动指令，通过随机索引直接获取对应指令，比一堆if-else更简洁，后续要添加新指令也只需要修改数组即可。
• 元素缓存：提前获取scramble元素并缓存，避免循环里重复调用document.getElementById，提升性能。

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