js是如何读取json的

浅出：JavaScript 如何读取与解析 JSON 数据**

在当今的 Web 开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，几乎无处不在，它易于人阅读和编写，同时也易于机器解析和生成，JavaScript 作为 Web 开发的核心语言，与 JSON 有着天然的紧密联系，JavaScript 究竟是如何读取 JSON 的呢？本文将详细探讨这个过程。

什么是 JSON？

简单回顾一下 JSON，JSON 是基于 JavaScript 对象表示法的一个子集，它使用独立于语言的文本格式来存储和表示数据，其结构类似于 JavaScript 的对象和数组：

• 对象：无序的键/值对集合，以 包裹，键值对用 分隔，多个键值对用 分隔，键必须是字符串，值可以是字符串、数字、布尔值、null、数组或另一个对象。

  {
    "name": "张三",
    "age": 30,
    "isStudent": false
  }

• 数组：值的有序集合，以 [] 包裹，值之间用 分隔，值可以是任何有效的 JSON 数据类型。

  [ "apple", "banana", "cherry" ]

JavaScript 读取 JSON 的核心方法：JSON.parse()

JavaScript 提供了一个内置的全局对象 JSON，该对象包含了处理 JSON 数据的方法，最核心、最常用的读取（即解析） JSON 的方法就是 JSON.parse()。

JSON.parse() 的作用

JSON.parse() 方法用于将一个 JSON 字符串解析成对应的 JavaScript 值或对象，这个字符串必须符合 JSON 的格式规范。

语法

JSON.parse(text[, reviver])

• text: 必需，一个符合 JSON 格式的字符串。
• reviver: 可选，一个转换函数，该函数会在每个键值对解析之前被调用,可以用来转换或过滤解析后的值。

示例

假设我们有一个 JSON 字符串：

const jsonString = '{"name": "李四", "age": 25, "hobbies": ["reading", "music"]}';

使用 JSON.parse() 将其解析为 JavaScript 对象：

const jsObject = JSON.parse(jsonString);
console.log(jsObject); // 输出: { name: '李四', age: 25, hobbies: [ 'reading', 'music' ] }
console.log(jsObject.name); // 输出: 李四
console.log(jsObject.hobbies[0]); // 输出: reading

解析后，jsonString 这个字符串就变成了一个真正的 JavaScript 对象,我们可以通过点符号或方括号符号来访问其属性和元素。

处理嵌套 JSON 和数组

JSON 可以非常复杂，包含多层嵌套的对象和数组。JSON.parse() 同样能够很好地处理这些情况。

const complexJsonString = `
{
  "id": 101,: "JavaScript 高级程序设计",
  "author": {
    "firstName": "Nicholas",
    "lastName": "C. Zakas"
  },
  "published": true,
  "prices": {
    "USD": 49.99,
    "CNY": 349.00
  },
  "chapters": ["第一章", "第二章", "第三章"]
}
`;
const complexJsObject = JSON.parse(complexJsonString);
console.log(complexJsObject.author.firstName); // 输出: Nicholas
console.log(complexJsObject.prices.CNY);      // 输出: 349
console.log(complexJsObject.chapters[1]);      // 输出: 第二章

使用 reviver 函数

reviver 函数允许我们在解析过程中对数据进行转换，我们希望将日期字符串解析为 Date 对象：

const jsonStringWithDate = '{"event": "会议", "date": "2023-10-27T10:00:00Z"}';
const jsObjectWithDate = JSON.parse(jsonStringWithDate, (key, value) => {
  if (key === "date") {
    return new Date(value);
  }
  return value;
});
console.log(jsObjectWithDate.date); // 输出: 一个 Date 对象， Fri Oct 27 2023 18:00:00 GMT+0800 (中国标准时间)
console.log(typeof jsObjectWithDate.date); // 输出: object

从外部来源读取 JSON 数据

在实际开发中，JSON 数据通常不会直接写在代码里，而是来自外部来源,如：

1. 从 API 获取 JSON：这是最常见的情况，Web 服务器通常以 JSON 格式返回数据。
2. 从本地文件读取 JSON：.json 文件,或者从用户选择的本地文件中读取。

从 API 获取 JSON (使用 fetch)

现代 JavaScript 中，我们通常使用 fetch API 来从网络获取数据，包括 JSON 数据。fetch 返回一个 Promise，解析后得到 Response 对象，我们可以使用 response.json() 方法（注意：这也是一个 Promise）来解析响应体中的 JSON 数据。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 调用 response.json() 来解析 JSON 字符串
  })
  .then(data => {
    console.log(data); // 这里的 data 已经是解析后的 JavaScript 对象
    // 可以直接使用 data
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

从本地文件读取 JSON (例如使用 FileReader)

如果用户选择了本地的 JSON 文件，我们可以使用 FileReader API 来读取文件内容，然后使用 JSON.parse() 解析。

假设 HTML 中有一个文件输入元素：

<input type="file" id="jsonFileInput" accept=".json">

对应的 JavaScript 代码：

document.getElementById('jsonFileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function(e) {
      try {
        const jsonData = JSON.parse(e.target.result);
        console.log('从文件读取并解析的 JSON:', jsonData);
        // 使用 jsonData
      } catch (error) {
        console.error('解析 JSON 文件时出错:', error);
      }
    };
    reader.readAsText(file);
  }
});

错误处理

在使用 JSON.parse() 时，如果传入的字符串不符合 JSON 格式，它会抛出一个 SyntaxError 异常，在实际应用中，务必使用 try...catch 块来处理可能出现的错误。

const invalidJsonString = "{ name: '王五', age: 28 }"; // 键名没有用引号包裹，不符合 JSON 格式
try {
  const parsedData = JSON.parse(invalidJsonString);
  console.log(parsedData);
} catch (error) {
  console.error('解析 JSON 字符串失败:', error.message); // 输出: Unexpected token n in JSON at position 2 (因为 name 没有引号)
}

JavaScript 读取 JSON 的核心步骤可以归纳如下：

1. 获取 JSON 字符串：这可能来自 API 响应、本地文件、用户输入或其他数据源。
2. 使用 JSON.parse() 方法：将 JSON 字符串解析成 JavaScript 对象或值。
   • 确保传入的字符串是有效的 JSON 格式。
   • 使用 try...catch 进行错误处理，防止无效 JSON 导致程序中断。
3. 使用解析后的数据：一旦解析成功，就可以像操作普通的 JavaScript 对象和数组一样操作这些数据。

对于从网络获取的 JSON 数据，通常会结合 fetch API 和 response.json() 方法来完成获取和解析的过程，理解并熟练 JSON.parse() 的使用，是进行 Web 数据交互的基础技能，随着 JSON 的普及,这个方法的重要性也愈发凸显。