Javascript随机十六进制色板生成优化 咨询单循环生成三色值的方案

完全可以用单个循环同时生成3个独立的十六进制色值，不需要像现在这样写3段重复的循环逻辑。

核心优化思路 #

你当前的实现是为每个色值单独写一段6次迭代的循环，3个色值总共需要跑18次循环，存在大量重复逻辑。可以调整为：

1. 提前初始化3个以#开头的空hex字符串，存在数组里统一管理
2. 只跑1次外层6次的循环，每次迭代时同时给3个空字符串各拼接1位随机hex字符
3. 6次循环跑完后，3个色值就都满足6位hex的长度要求，总循环次数只有原来的1/3，生成的色值是完全独立的随机结果，和你之前分三个循环实现的效果没有区别

核心单循环代码示例 #

// 初始化3个待生成的色值字符串
let activeHexList = ["#", "#", "#"];
const hexValues = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];

// 单循环遍历6次，每次同时为3个色值生成1位字符
for (let i = 0; i < 6; i++) {
  // 遍历每个待生成的色值位置
  for (let colorIndex = 0; colorIndex < activeHexList.length; colorIndex++) {
    const randomDigitIndex = Math.floor(Math.random() * hexValues.length);
    activeHexList[colorIndex] += hexValues[randomDigitIndex];
  }
}

跑完这段循环后，activeHexList里的三个元素就是完整的独立hex色值，后续可以直接批量赋值给对应的DOM元素，不需要单独给每个色值写赋值代码。

其他可优化的细节 #

• 你当前的按钮文本判断逻辑是冗余的：无论分支条件是什么，最终设置的按钮文本都是Generate New Palette，完全可以删掉if判断，在点击事件触发时直接给按钮赋值文本即可
• 重复的DOM选择逻辑可以简化：不用单独为每个带编号的DOM元素写querySelector，可以通过类名统一选取所有hex文本节点、所有颜色块节点，存在数组里统一遍历渲染，后续如果要调整色板的颜色数量，只需要调整选取的元素数量，不需要修改核心逻辑
• 现有hex字符生成逻辑可以不用预定义数组：通过数值转换的方式也能拿到符合要求的hex字符，写法更简洁：Math.floor(Math.random()*16).toString(16).toUpperCase()，可以替代原来的hexValues数组
• 现在的DOM赋值写法可读性较差：把赋值结果直接作为变量传递的写法（比如let bodyColor1 = (hexCode01.innerHTML = activeHex1)）容易让读代码的人误解变量来源，建议拆成独立的赋值步骤，把生成好的色值先存到变量里，再分别赋值给文本节点和元素背景色

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