我的 React 之旅：第 18 天

大家好，今天本人给大家带来文章《我的 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 天》文章吧，也可关注golang学习网公众号了解相关技术文章。