七日打卡 - 使用 JS 读取和解析 JSON 类型数据

2023-12-06 22:31:10

如今，JavaScript 作为一种广泛使用的编程语言，在前端开发中扮演着举足轻重的角色。它不仅可以操控网页元素，还可以处理复杂的数据结构，其中包括 JSON（JavaScript Object Notation）数据。JSON 是一种轻量级的、基于文本的数据交换格式，广泛应用于服务器与客户端之间的数据传输。

要使用 JavaScript 读取和解析 JSON 数据，您可以按照以下步骤操作：

获取 JSON 数据

首先，您需要获取要解析的 JSON 数据。这可以通过多种方式实现，例如从服务器端获取、从本地文件读取或直接在 JavaScript 代码中定义 JSON 对象。

// 从服务器端获取 JSON 数据
fetch('data.json')
  .then(response => response.json())
  .then(data => console.log(data));

// 从本地文件读取 JSON 数据
fetch('file.json')
  .then(response => response.json())
  .then(data => console.log(data));

// 在 JavaScript 代码中定义 JSON 对象
const data = {
  "name": "John Doe",
  "age": 30,
  "occupation": "Software Engineer"
};

解析 JSON 数据

一旦您获取了 JSON 数据，就可以使用 JavaScript 的内置方法 JSON.parse() 将其解析为 JavaScript 对象。

const data = JSON.parse('{
  "name": "John Doe",
  "age": 30,
  "occupation": "Software Engineer"
}');

console.log(data); // 输出：{ name: 'John Doe', age: 30, occupation: 'Software Engineer' }

使用 JSON 数据

解析后的 JSON 数据可以像其他 JavaScript 对象一样使用。您可以访问它的属性，对其进行操作，或者将其转换为其他格式。

const name = data.name; // 输出：John Doe
const age = data.age; // 输出：30
const occupation = data.occupation; // 输出：Software Engineer

console.log(`Name: ${name}, Age: ${age}, Occupation: ${occupation}`); // 输出：Name: John Doe, Age: 30, Occupation: Software Engineer