将JSON文件对象数组存入JavaScript数组时返回空数组的问题及解决

问题原因 #

这问题我之前也踩过坑！核心问题出在Node.js的异步机制上：fs.readFile是异步非阻塞的IO方法，它不会等待文件读取完成再继续执行后续代码。

看你的原代码：

const displayTask = () => { 
  let text = []; 
  fs.readFile(fileConfig, (err, data) => { 
    if (err) throw err; 
    const content = JSON.parse(data); 
    for (let task in content) { 
      text.push(task); 
    } 
  }); 
  // 这里会先于readFile的回调执行！
  console.log(text); 
};

当console.log(text)执行时，fs.readFile的回调函数还没被触发（文件还没读完），所以text还是初始的空数组，自然输出[]。

正确解决方案 #

你找到的用async/await + Promise包装的方法是非常标准的异步处理方式，它能让异步代码看起来像同步代码一样顺序执行：

const displayTask = async() => { 
  return await new Promise((resolve, reject) => { 
    fs.readFile(fileConfig, (err, data) => { 
      if(err) reject(err); // 建议用reject处理错误，比直接throw更符合Promise规范
      const text = JSON.parse(data); 
      console.log(text); 
      resolve(text); // 可以把解析后的数据通过resolve返回，方便外部调用
    }) 
  }) 
};

• 用Promise把异步的fs.readFile包装起来，读取完成后通过resolve通知异步操作结束
• async/await让函数等待Promise完成后再继续执行，确保你能拿到完整的解析后的数据

补充方案：同步读取（谨慎使用） #

如果你的场景是读取小文件，且不怕阻塞主线程，也可以用同步版本的fs.readFileSync：

const displayTask = () => { 
  try {
    const data = fs.readFileSync(fileConfig);
    const content = JSON.parse(data);
    const text = Object.keys(content); // 替代for...in循环更简洁高效
    console.log(text);
    return text;
  } catch (err) {
    console.error(err);
  }
};

⚠️ 注意：同步读取会阻塞Node.js的事件循环，在服务端等高性能场景不建议使用。

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