我的 React 之旅：第 18 天

JSON 和数据操作

JSON （JavaScript 对象表示法） 是一种 轻量级数据格式，用于在服务器和 Web 应用程序之间交换数据。它受到不同编程语言的广泛支持，是现代 Web 开发的关键组件。

JSON 的主要特性：
1.结构：

• 数据以键值对的形式存储在对象中或作为值数组。
• 示例（对象）：

{
  "name": "Damilare",
  "age": 30,
  "isEmployed": true,
  "hobbies": ["Singing", "Reading", "Coding"]
}

• 示例（数组）：

["Dee", "Fred", "Inioluwa", "Iteoluwa"]

2.数据交换：

• JSON 通常用于在服务器和客户端之间发送和接收数据。

JSON 和 JavaScript 之间的转换

1. 将 JavaScript 转换为 JSON 使用 JSON.stringify() 将 JavaScript 对象或数组转换为 JSON 字符串。

示例：JavaScript 数组到 JSON

const names = ["Dee", "Fred", "Inioluwa", "Iteoluwa"];
const jsonString = JSON.stringify(names);

console.log(names);       // Original JS array
console.log(jsonString);  // JSON string

示例：JavaScript 对象到 JSON

const person = {
    name: "Damilare",
    age: 30,
    isEmployed: true,
    hobbies: ["Singing", "Reading", "Coding", "Helping"]
};
const jsonString = JSON.stringify(person);

console.log(person);      // Original JS object
console.log(jsonString);  // JSON string

2。将 JSON 转换为 JavaScript
使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 对象或数组。

示例：JSON 字符串到 JavaScript 数组

const jsonArray = `["Dee", "Fred", "Inioluwa", "Iteoluwa"]`;
const jsArray = JSON.parse(jsonArray);

console.log(jsonArray);   // JSON string
console.log(jsArray);     // JS array

示例：JSON 字符串到 JavaScript 对象

const jsonObject = `{
    "name": "Damilare",
    "age": 30,
    "isEmployed": true,
    "hobbies": ["Singing", "Reading", "Coding", "Helping"]
}`;
const jsObject = JSON.parse(jsonObject);

console.log(jsonObject);  // JSON string
console.log(jsObject);    // JS object

获取和操作 JSON 文件
JSON 数据可以从服务器或本地文件动态获取和操作。

1。获取 JSON 文件
使用 fetch() API 请求 JSON 数据。

示例：获取 JSON 文件

fetch("people.json")
    .then(response => response.json()) // Convert response to JS object/array
    .then(data => console.log(data));  // Log the JSON data

2。迭代 JSON 数据
如果获取的 JSON 是对象数组，您可以使用 .forEach() 等方法来迭代每个元素。

示例：迭代获取的 JSON 数据

fetch("people.json")
    .then(response => response.json())
    .then(people => {
        people.forEach(person => {
            console.log(person.name); // Access properties of each object
        });
    });

JSON 在应用程序中的用例：
1.配置文件：

• JSON 用于存储应用程序设置（例如 config.json）。

2.API：

• REST API 通常返回 JSON 作为响应格式。

3.数据存储：

• 轻量级数据库（例如 Firebase、MongoDB）依赖于类似 JSON 的结构。

4.数据交换：

• JSON 用于前端和后端之间的通信。

反思

我学到了什么：

• 如何将 JavaScript 对象/数组转换为 JSON，反之亦然。
• 使用 fetch() 从外部文件或 API 请求 JSON 数据。
• 使用 .forEach() 迭代 JSON 数据。

每天的成长都是甜蜜的，尽管需要额外的纪律。

第18天被压垮

以上是我的 React 之旅：第 18 天的详细内容。更多信息请关注PHP中文网其他相关文章！