原生JavaScript如何读取JSON文件数据并转为数组？

1. ES模块导入（浏览器/Node.js现代版本） #

如果你的JS文件以ES模块方式运行（浏览器中需在<script>标签添加type="module"），可以直接导入JSON：

import data from './data.json' assert { type: 'json' };
// data即为解析后的数组，可直接使用
console.log(data);

assert { type: 'json' }是ES2022标准语法，现代浏览器、Node.js 17及以上版本均支持。Node.js 14+环境中可省略断言，直接写import data from './data.json'。

2. Fetch API异步加载（浏览器环境） #

若无法使用ES模块，或需要兼容旧环境，可通过fetch异步加载并解析JSON：

fetch('./data.json')
  .then(res => res.json())
  .then(data => {
    // 在此处处理数组数据
    console.log(data);
  })
  .catch(err => console.error('加载失败:', err));

注意这种方式是异步的，数据需在回调或async/await中处理。

3. CommonJS require（Node.js环境） #

Node.js项目使用CommonJS规范时，直接用require同步加载：

const data = require('./data.json');
// data就是目标数组
console.log(data);

如果上述方法受环境限制无法使用，可考虑以下方案：

• 自动转成JS模块：写个简单的Node.js脚本，把JSON文件转成可直接导入的ES模块，无需手动修改内容：

  const fs = require('fs');
  const jsonStr = fs.readFileSync('./data.json', 'utf8');
  const jsContent = `export default ${jsonStr};`;
  fs.writeFileSync('./data.js', jsContent);
  

  运行脚本后生成data.js，之后直接通过import data from './data.js'使用。
• IndexedDB缓存（浏览器端）：若数据体积过大，可首次加载后将数组存入IndexedDB，后续直接从本地缓存读取，减少重复加载开销。
• 同步文件读取（Node.js）：通过fs模块手动读取并解析：

  const fs = require('fs');
  const data = JSON.parse(fs.readFileSync('./data.json', 'utf8'));
  

• CSV格式（适合表格类数据）：若数据结构为表格型，可转成CSV格式，再用JS解析库读取，但复杂嵌套数组场景不如JSON适配性好。

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