JavaScript中二维数组赋值后为空的问题排查

核心问题 #

1. 表单提交默认行为未阻止：点击提交按钮后，浏览器会默认提交表单并刷新页面，导致FileReader的onload回调还没执行完成，页面就已重新加载，最终看不到任何输出。
2. 二维数组初始化与赋值逻辑错误：
   • 初始化二维数组时，内层j循环反复将table2D[i]重置为空数组，完全冗余，只需在外层i循环中初始化一次即可。
   • 赋值时的三层循环逻辑错误，会把table1D的每个元素依次覆盖整个二维数组，最终所有元素都会被table1D的最后一个元素（或空值，若数组长度不足）填充。

修正后的代码 #

JavaScript 部分

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");

myForm.addEventListener("submit", function(e) {
  // 阻止表单默认提交行为，避免页面刷新
  e.preventDefault();

  const input = csvFile.files[0];
  if (!input) return; // 避免未选择文件时触发错误

  const reader = new FileReader();

  reader.readAsText(input);
  reader.onload = function() {
    const text = reader.result;
    // 更贴合CSV格式的解析逻辑：先按行分割，再分割每行的列
    const rows = text.split(/\r?\n/);
    const table2D = rows.map(row => row.split(","));

    // 若需严格按固定行列数处理（确保CSV结构匹配），可替换为以下逻辑
    // const table1D = text.split(",");
    // const numberOfColumns = 46;
    // const table2D = [];
    // for(let i = 0; i < table1D.length; i += numberOfColumns) {
    //   table2D.push(table1D.slice(i, i + numberOfColumns));
    // }

    console.log(table2D);
    document.write(table2D[0][0] || "该位置无数据");
  };

  reader.onerror = function() {
    document.write("读取文件出错");
  };
});

HTML 部分

<form id="myForm">
  <input type="file" id="csvFile" accept=".csv" />
  <br />
  <input type="submit" value="Submit" />
</form>

关键修正点 #

• 添加e.preventDefault()阻止表单默认提交行为，确保FileReader能完整执行回调逻辑。
• 优化CSV解析逻辑：先按换行分割行，再分割每行的列，适配标准CSV的跨行结构。
• 简化二维数组生成逻辑，用map或切片方式直接生成，避免冗余循环。
• 增加未选择文件的判断，防止无文件时触发错误。

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