如何在 JavaScript 中读取 JSON 文件？

---

在 JavaScript 中读取 JSON 文件有三种有效的方法，分别是使用 fetch()、import 语句和 require()。请查看本文，其中包含示例和输出以及方法解释。

JSON（JavaScript 对象表示法） 是一种轻量级的数据交换格式，易于人类阅读和编写，也易于机器解析和生成。在本文中，我们将探讨在 JavaScript 中读取 JSON 文件的三种不同方法。

读取 JSON 文件的方法

• 使用 fetch() 方法
• 使用 import 语句
• 使用 require 模块

每种方法都有其使用场景和注意事项，因此让我们深入探讨每种方法。

JSON 文件

这将是我们的 JSON 文件 (data.json)。我们将在所有三种方法中使用此文件。

{
    "users":[
      {
          "site":"Tutorialspoint",
          "user": "Simple and Easy Learning"
      }
    ]
  }

使用 fetch() 方法

fetch() 方法是在 JavaScript 中发出网络请求的现代方法。它在浏览器中得到广泛支持，并且可以使用 polyfill 在 Node.js 中使用。

fetch() 方法返回一个 Promise，该 Promise 解析为表示请求响应的 Response 对象。然后，我们可以使用 json() 方法将响应主体解析为 JSON。

示例

// File name data.json in the same directory
fetch('./data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

输出

如果 JSON 文件不在服务器上，则会抛出如下所示的错误。因此，我们建议您在 JSON 文件位于服务器上时使用此方法。

使用 import 语句

import 语句是 ECMAScript 6 (ES6) 的一部分，允许您直接将 JSON 文件作为模块导入。这种方法在现代浏览器和 Node.js（版本 13.2.0 及更高版本，使用 --experimental-json-modules 标志）中受支持。

使用 import 语句时，JSON 文件作为模块导入，其内容会自动解析为 JavaScript 对象。

示例

// Add "type": "module" to your package.json or use .mjs extension
import data from './data.json' assert { type: 'json' };

console.log(data);

输出

如果您没有在 package.json 中添加 "type": "module" 或使用 .mjs 扩展名，则此方法将无法工作。

使用 require 模块

require 函数通常在 Node.js 中用于导入模块，包括 JSON 文件。它在浏览器环境中不可用。

当您使用 require 导入 JSON 文件时，Node.js 会自动解析 JSON 并将其作为 JavaScript 对象返回。

示例

const data = require('./data.json');
console.log(data);

输出

结论

在 JavaScript 中读取 JSON 文件的每种方法都有其优势。

• fetch() 方法用途广泛，适用于浏览器环境中的本地和远程 JSON 文件。
• import 语句提供了一种现代的、符合 ES6 标准的方法来导入 JSON，将其视为一个模块。
• require 函数是 Node.js 环境中的一种简单方法，可以自动为您解析 JSON。

选择最适合您的项目需求和环境的方法。请记住处理潜在的错误，尤其是在处理文件 I/O 或网络请求时。