Node.js读取目录文件名在窗口表格显示undefined问题排查

你页面显示undefined是以下几个问题叠加导致的：

• 核心环境错误：fs是Node.js专属的文件系统模块，普通浏览器的JavaScript运行环境没有require方法，也不支持直接调用fs访问本地文件。代码运行到第一行const fs = require('fs')就直接抛出异常中断执行，你定义的outputHTML变量没有完成赋值，最后给innerHTML赋值时就会把undefined转成字符串显示在页面上。
• API调用错误：你用的fs.readdirSync是同步方法，本身不接收回调函数作为参数，传回调函数会导致方法无法正确返回文件名数组，就算在Node环境里运行，alllogs也会是undefined。
• 循环边界错误：数组下标从0开始计数，你写的循环条件i <= alllogs.length会多循环一次，最后一次循环取到的alllogs[i]超出数组范围，值就是undefined，会被拼到表格内容里。
• 路径风险：你写的相对路径.././logs/是相对于Node进程的启动目录，不是相对于script.js文件的存放目录，很容易出现找不到目录的报错。

根据你的运行场景二选一即可：

场景1：你在做Electron桌面端应用（可以使用Node.js API） #

1. 先确认Electron的BrowserWindow配置里开启了nodeIntegration: true、关闭了contextIsolation，否则渲染进程无法直接使用require。
2. 替换script.js的全部内容为以下代码：

const fs = require('fs');
const path = require('path');

// 用绝对路径定位logs目录，避免相对路径匹配错误
const logdirname = path.resolve(__dirname, '../logs/');
let outputHTML = '';
let alllogs = [];

try {
  // 同步readdir直接返回文件名数组，不需要传回调
  alllogs = fs.readdirSync(logdirname);
} catch (err) {
  console.error('读取目录失败:', err);
  outputHTML = `<p style="color: red">读取日志目录失败：${err.message}</p>`;
}

if (alllogs.length) {
  outputHTML += `<table border="1" cellpadding="8" cellspacing="0">`;
  // 修正循环边界，用<而不是<=，避免数组越界
  for (let i = 0; i < alllogs.length; i++) {
    outputHTML += `<tr><td>${alllogs[i]}</td></tr>`;
  }
  outputHTML += `</table>`;
} else {
  outputHTML += `<p>日志目录下没有找到文件</p>`;
}

3. index.html不需要改动，点击按钮即可正常渲染表格。

场景2：你做的是普通网页（运行在用户浏览器里） #

普通浏览器出于安全限制，不允许网页直接访问用户本地文件，必须用户手动授权选择目录才能读取，不需要单独的script.js文件，直接把index.html里的f函数替换为以下代码即可：

async function f() {
  const textEl = document.getElementById("text");
  try {
    // 唤起系统目录选择器，让用户手动选择logs目录
    const dirHandle = await window.showDirectoryPicker();
    const fileList = [];
    // 遍历目录下的所有文件
    for await (const entry of dirHandle.values()) {
      if (entry.kind === 'file') {
        fileList.push(entry.name);
      }
    }

    let outputHTML = '';
    if (fileList.length) {
      outputHTML += `<table border="1" cellpadding="8" cellspacing="0">`;
      for (let i = 0; i < fileList.length; i++) {
        outputHTML += `<tr><td>${fileList[i]}</td></tr>`;
      }
      outputHTML += `</table>`;
    } else {
      outputHTML = `<p>所选目录下没有文件</p>`;
    }
    textEl.innerHTML = outputHTML;
  } catch (err) {
    textEl.innerHTML = `<p style="color: red">读取目录失败：${err.message}</p>`;
  }
}

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