我的 React 之旅：第 18 天-js教程-PHP中文網

我的 React 之旅：第 18 天

Patricia Arquette

發布： 2024-12-15 07:58:14

原創

953 人瀏覽過

My React Journey: Day 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 之間的轉換

將 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.設定檔：