如何在 JavaScript 中通过循环向空数组写入值并动态显示结果-html教程-PHP中文网

如何在 JavaScript 中通过循环向空数组写入值并动态显示结果

本文详解如何在 Fisher-Yates 洗牌算法执行过程中，正确收集并展示索引 i 和随机索引 j 的历史值——关键在于数组初始化位置、赋值方式及 DOM 更新时机的协同处理。

本文详解如何在 fisher-yates 洗牌算法执行过程中，正确收集并展示索引 `i` 和随机索引 `j` 的历史值——关键在于数组初始化位置、赋值方式及 dom 更新时机的协同处理。

在 JavaScript 中，若想在循环（尤其是用于算法过程追踪的循环）中向空数组写入值，并最终将结果呈现在页面上，必须严格遵循三个核心原则：变量作用域合理、数组赋值语法正确、DOM 更新时机恰当。原代码失败的根本原因有三：

iValue1[i] = i 与 jValue1[i] = j 写法虽合法，但因数组初始为空且未预设长度，会导致稀疏数组（sparse array），例如 iValue1[11] = 11 会跳过前 11 个索引，join() 输出大量空位；
document.getElementById(...).innerHTML = ... 被置于函数外部，导致页面加载时立即执行（此时数组仍为空），而点击按钮后却未再次更新 DOM；
arsam2 未定义（应为 arsam1），且原始数组未做初始展示，用户无法感知起始状态。

✅ 正确做法是：

将 iValue1 和 jValue1 声明为全局变量（已满足）；
在 myFunction() 内部使用 push() 方法追加元素（更安全、语义清晰），避免稀疏问题；
所有 DOM 更新操作统一放在函数末尾，确保反映最新计算结果；
初始页面即显示原始数组，增强可调试性。

以下是优化后的完整示例代码：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载


<title>Fisher-Yates 跟踪演示</title><h1>Fisher-Yates 洗牌过程追踪</h1>
  <button onclick="myFunction()">▶ 开始随机化</button>
  <p id="demo">原始数组: [5, 10, 15, 18, 6, 3, 9, 23, 29, 17, 12, 40]</p>
  <p id="iValue">iValue1（迭代索引）: []</p>
  <p id="jValue">jValue1（随机索引）: []</p>

  <script>
    const arsam1 = [5, 10, 15, 18, 6, 3, 9, 23, 29, 17, 12, 40];
    let iValue1 = []; // 全局可累积
    let jValue1 = [];

    function myFunction() {
      // 重置追踪数组（可选：如需多次运行保持独立）
      iValue1 = [];
      jValue1 = [];

      // Fisher-Yates 核心循环（从后往前）
      for (let i = arsam1.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1)); // 0 到 i（含）的随机整数
        // 交换 arsam1[i] 与 arsam1[j]
        [arsam1[i], arsam1[j]] = [arsam1[j], arsam1[i]]; // 解构赋值，简洁安全
        // 记录本次迭代的 i 和 j
        iValue1.push(i);
        jValue1.push(j);
      }

      // ✅ 统一更新 DOM —— 确保显示最新状态
      document.getElementById("demo").innerHTML = 
        `洗牌后数组: [${arsam1.join(', ')}]`;
      document.getElementById("iValue").innerHTML = 
        `iValue1（迭代索引序列）: [${iValue1.join(', ')}]`;
      document.getElementById("jValue").innerHTML = 
        `jValue1（随机选择索引）: [${jValue1.join(', ')}]`;
    }
  </script>

? 关键注意事项：