求助：将生成多随机数并赋值的重复代码优化为数组实现

嗨，我看到你现在的代码已经能实现生成5个随机数并展示的功能，但重复的变量声明和DOM操作确实可以用数组大幅简化！先给你说下之前尝试的解构赋值为什么没生效——let [picker1, picker2, picker3, picker4, picker5] = Math.floor(Math.random() * 10) + 1 这种写法里，等号右边只返回单个随机数值，没办法解构出5个变量，得先生成包含5个随机数的数组才行。

下面是优化后的完整代码，我会一步步给你拆解说明：

优化后的JavaScript代码 #

function pick5() {
    'use strict';
    // 一行生成包含5个1-10随机数的数组
    const pickers = Array.from({ length: 5 }, () => Math.floor(Math.random() * 10) + 1);
    
    // 循环数组，批量给对应输入框赋值
    pickers.forEach((num, index) => {
        const resultInput = document.getElementById(`result${index + 1}`);
        resultInput.value = num;
    });

    return false;
}

function init() {
    'use strict';
    document.getElementById('generate').onclick = pick5;
}

window.onload = init;

对应的HTML代码 #

<div>
    <button type="button" id="generate">Pick 5!</button>
</div>
<div>
    <input type="number" readonly id="result1" aria-label="result1">
    <input type="number" readonly id="result2" aria-label="result2">
    <input type="number" readonly id="result3" aria-label="result3">
    <input type="number" readonly id="result4" aria-label="result4">
    <input type="number" readonly id="result5" aria-label="result5">
</div>
<script src="js/pick5.js"></script>

关键优化点说明 #

• 生成随机数数组：用Array.from({length:5}, 回调函数)，第一个参数指定数组长度为5，第二个参数的回调会为每个数组元素生成1-10的随机数，替代了原来5次重复的变量声明。
• 批量DOM操作：用forEach循环遍历随机数数组，通过模板字符串result${index+1}动态获取对应id的输入框，然后赋值，替代了原来5次重复的赋值操作。

如果之后你想调整生成的随机数数量，只需要修改Array.from里的length值，再对应调整HTML里的输入框数量就行，维护起来会方便很多！

内容来源于stack exchange