如何在JavaScript中读取分析本地JSON文件？JSON格式该怎么处理？

一、JSON文件格式：不需要强制加数组名称 #

你的JSON文件如果是纯数组格式（比如[{"name":"张三","role":"前端开发"},...]），这是完全合法的标准JSON，不需要额外添加数组名称。如果后续代码需要用对象包裹，也可以改成{"staff": [数组内容]}，两种格式都能正常解析，按需选择即可。

二、JavaScript读取JSON的两种场景 #

1. 浏览器前端环境（网页中） #

浏览器出于安全限制，不能直接读取本地文件，需要通过网络请求加载JSON文件，推荐用fetch API：

// 假设JSON文件名为staff.json，和当前JS文件同目录
fetch('staff.json')
  .then(res => {
    if (!res.ok) throw new Error('请求JSON失败');
    return res.json(); // 自动将JSON转为JS数组/对象
  })
  .then(data => {
    // 这里处理解析后的数据，比如遍历人员列表
    data.forEach(person => {
      console.log(`姓名：${person.name}，职责：${person.role}`);
    });
  })
  .catch(err => console.error('出错了：', err));

注意：直接用file://协议打开本地HTML会触发跨域，需要用本地服务器运行（比如VSCode的Live Server插件、http-server工具）。

2. Node.js环境（本地脚本/后端） #

Node.js可以直接操作本地文件，用内置的fs模块：

同步读取（适合小文件）

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

const jsonFile = path.join(__dirname, 'staff.json');
try {
  const jsonStr = fs.readFileSync(jsonFile, 'utf8');
  const data = JSON.parse(jsonStr); // 解析JSON字符串为JS对象/数组
  // 处理数据
  data.forEach(person => {
    console.log(`姓名：${person.name}，职责：${person.role}`);
  });
} catch (err) {
  console.error('读取或解析失败：', err);
}

异步读取（推荐，不阻塞进程）

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

async function loadStaffData() {
  try {
    const jsonFile = path.join(__dirname, 'staff.json');
    const jsonStr = await fs.readFile(jsonFile, 'utf8');
    const data = JSON.parse(jsonStr);
    // 处理数据
    data.forEach(person => {
      console.log(`姓名：${person.name}，职责：${person.role}`);
    });
  } catch (err) {
    console.error('出错了：', err);
  }
}

loadStaffData();

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