我的 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中文網其他相關文章！