JSON 和數(shù)據操作

JSON （JavaScript 對象表示法） 是一種 輕量級數(shù)據格式，用于在服務器和 Web 應用程序之間交換數(shù)據。它受到不同編程語言的廣泛支持，是現(xiàn)代 Web 開發(fā)的關鍵組件。

JSON 的主要特性：
1.結構：

• 數(shù)據以鍵值對的形式存儲在對象中或作為值數(shù)組。
• 示例（對象）：

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

• 示例（數(shù)組）：

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

2.數(shù)據交換：

• JSON 通常用于在服務器和客戶端之間發(fā)送和接收數(shù)據。

JSON 和 JavaScript 之間的轉換

1. 將 JavaScript 轉換為 JSON 使用 JSON.stringify() 將 JavaScript 對象或數(shù)組轉換為 JSON 字符串。

示例：JavaScript 數(shù)組到 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 對象或數(shù)組。

示例：JSON 字符串到 JavaScript 數(shù)組

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 數(shù)據可以從服務器或本地文件動態(tài)獲取和操作。

1。獲取 JSON 文件
使用 fetch() API 請求 JSON 數(shù)據。

示例：獲取 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 數(shù)據
如果獲取的 JSON 是對象數(shù)組，您可以使用 .forEach() 等方法來迭代每個元素。

示例：迭代獲取的 JSON 數(shù)據

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.數(shù)據存儲：

• 輕量級數(shù)據庫（例如 Firebase、MongoDB）依賴于類似 JSON 的結構。

4.數(shù)據交換：

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

反思

我學到了什么：

• 如何將 JavaScript 對象/數(shù)組轉換為 JSON，反之亦然。
• 使用 fetch() 從外部文件或 API 請求 JSON 數(shù)據。
• 使用 .forEach() 迭代 JSON 數(shù)據。

每天的成長都是甜蜜的，盡管需要額外的紀律。

第18天被壓垮

以上是我的 React 之旅：第 18 天的詳細內容。更多信息請關注PHP中文網其他相關文章！