JavaScript中如何打乱for循环生成HTML元素的顺序 实现随机序列输出

• 方法一：打乱索引数组后遍历（推荐）
  原理：使用Fisher-Yates洗牌算法打乱和dlArray等长的索引数组，再遍历打乱后的索引生成HTML，可保证随机概率均匀，所有元素不重复不遗漏。
  实现代码：

// 第一步：生成索引数组并打乱
const indices = Array.from({length: dlArray.length}, (_, idx) => idx);
// Fisher-Yates 洗牌算法
for (let i = indices.length - 1; i > 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [indices[i], indices[j]] = [indices[j], indices[i]];
}

// 第二步：遍历打乱后的索引生成HTML
for (let i = 0; i < indices.length; i++) {
  const arrayIdx = indices[i]; // 打乱后的原数组下标
  const id = arrayIdx + 1; // 保持原有id生成规则，序号从1开始
  html +='\t\t\t\t\t\t<tr>\n'
  html += '\t\t\t\t\t\t<td id="row';
  html += id;
  html +='">\n';
  html += '\t\t\t\t\t\t\t<div id="t';
  html += id;
  html +='" class="ltarget">'
  html +='</div>\n' 
  html +='\t\t\t\t\t\t</td >\n'
  html += '\t\t\t\t\t\t<td id="d'
  html += id
  html +='">\n'
  html +=`\t\t\t\t\t\t\t${dlArray[arrayIdx]}\n`;
  html +='\t\t\t\t\t\t\t</td >\n' 
  html +='\t\t\t\t\t\t</tr>\n';
}

• 方法二：随机抽取数组元素直到为空
  原理：每次从数组中随机取出一个元素拼接HTML后删除该元素，直到数组所有元素都被取出，逻辑更简单易读。
  实现代码：

// 浅拷贝原数组避免修改原始dlArray，不需要保留原数组可直接操作dlArray
const tempArray = [...dlArray];
let idCounter = 1;
while (tempArray.length > 0) {
  // 生成当前数组范围内的随机下标
  const randomIdx = Math.floor(Math.random() * tempArray.length);
  const currentItem = tempArray.splice(randomIdx, 1)[0];
  const id = idCounter++;
  // 拼接HTML的逻辑和原有代码完全一致
  html +='\t\t\t\t\t\t<tr>\n'
  html += '\t\t\t\t\t\t<td id="row';
  html += id;
  html +='">\n';
  html += '\t\t\t\t\t\t\t<div id="t';
  html += id;
  html +='" class="ltarget">'
  html +='</div>\n' 
  html +='\t\t\t\t\t\t</td >\n'
  html += '\t\t\t\t\t\t<td id="d'
  html += id
  html +='">\n'
  html +=`\t\t\t\t\t\t\t${currentItem}\n`;
  html +='\t\t\t\t\t\t\t</td >\n' 
  html +='\t\t\t\t\t\t</tr>\n';
}

注意：两种方法都默认保持了原有id的生成规则，如果需要让id和原数组的元素下标绑定，仅需调整方法二中的id生成逻辑为对应原数组的下标即可。

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