如何一次性为6个方块设置不同随机颜色？求简化JS代码方案

第一步：简化随机RGB生成逻辑 #

原代码可以合并简化，减少冗余代码：

// 直接生成可用于样式的RGB字符串，无需返回数组
const getRandomRGB = () => {
  const randomNum = () => Math.floor(Math.random() * 256);
  return `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`;
};

如果追求极致简洁，也可以写成一行（可读性稍弱，适合偏好紧凑写法的场景）：

const getRandomRGB = () => `rgb(${Array.from({length:3}, () => Math.floor(Math.random()*256)).join(', ')})`;

第二步：批量为方块设置颜色 #

假设你的方块都带有统一类名（比如square），可以通过DOM选择器批量获取元素后，一次性完成颜色设置：

// 获取所有方块元素
const squares = document.querySelectorAll('.square');

// 遍历每个方块，设置随机背景色
squares.forEach(square => {
  square.style.backgroundColor = getRandomRGB();
});

特殊场景适配 #

如果你的方块是按ID命名（比如square-1到square-6），可以用循环生成选择器来处理：

for(let i = 1; i <= 6; i++) {
  document.getElementById(`square-${i}`).style.backgroundColor = getRandomRGB();
}

确保DOM加载完成后执行 #

为了避免DOM未加载完成就执行代码的问题，可以把逻辑放在DOMContentLoaded事件监听里：

document.addEventListener('DOMContentLoaded', () => {
  const getRandomRGB = () => `rgb(${Array.from({length:3}, () => Math.floor(Math.random()*256)).join(', ')})`;
  document.querySelectorAll('.square').forEach(sq => sq.style.backgroundColor = getRandomRGB());
});

这样仅需少量代码就能完成6个方块的随机颜色批量设置，避免了重复编写相同逻辑的冗余代码。

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