JSON(JavaScript Object Notation)

什麼是 JSON？

JSON是一種輕量級的數據交換格式。它設計簡單、易於讀寫且易於機器解析和生成。雖然它基於JavaScript語法，但事實上，JSON是獨立於任何語言，並且被大多數編程語言廣泛支持的。JSON主要用於在客戶端（如瀏覽器）和服務器之間傳遞結構化數據，尤其在網頁應用中，這是一個非常常見的格式。

JSON 的應用場景

1.Web 開發中的數據傳輸
當瀏覽器從服務器請求數據時，通常以 JSON 格式接收數據，因為它易於解析和操作。

2.API
RESTful API通常使用JSON作為數據交換格式，無論是GET（獲取數據）還是POST（提交數據）。

3.配置文件
JSON 常用於應用程序的配置文件中，因為它結構化且易於讀取。例如，Node.js 應用中的 package.json 文件。

4.本地存儲
在瀏覽器中，localStorage和sessionStorage都只支持字符串，因此在存儲對象時，必須先將其轉換為JSON字符串。當需要從本地存儲中讀取數據時，則需將其解析回JavaScript對象。

JSON 的基本結構

JSON 是由鍵值對組成的。它可以表示兩種主要的數據結構：
1.物件（Object）：無序的鍵值對集合。
2.陣列（Array）：有序的值集合。

物件

1.由{}包裹。
2.由鍵-值對組成，鍵必須是字符串，並且用雙引號包裹。

{
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "address": {
    "city": "New York",
    "zipcode": "10001"
  }
}

// name、age、isStudent、address是鍵，它們的值分別是 "Alice"、25、false 和一個嵌套的對象。

陣列

1.由[]包裹。
2.數組中的元素可以是任意數據類型，包括對象和其他數組。

{
  "name": "Alice",
  "courses": ["Math", "Science", "History"]
}

// courses 是鍵，其值是一個包含三個字符串的數組。

JSON 支持的數據類型

JSON 僅支持以下幾種基本數據類型：

• 字符串 (String)：使用雙引號括起來的文本。
• 數字 (Number)：整數或浮點數，不使用引號。
• 布爾值 (Boolean)：true 或 false。
• 陣列 (Array)：有序的值列表，使用方括號包圍。
• 物件 (Object)：無序的鍵值對集合，使用花括號包圍。
• null：空值，表示沒有值。

{
  "title": "Introduction to JSON",
  "published": true,
  "views": 1234,
  "ratings": null,
  "tags": ["JavaScript", "JSON", "API"]
}

** JSON 不支持的數據類型

• 函數 (Function)：JSON 不支持函數。
• 日期 (Date)：日期需要以字符串格式表示，因為JSON不支持Date對象。

JSON的使用

JSON主要用於將數據從服務器傳遞到客戶端，或在客戶端和本地存儲之間傳遞。

JSON 與 JavaScript 對象之間的轉換

在JavaScript中，可以使用內建的JSON對象來將JSON字符串與JavaScript對象相互轉換。

用JSON.stringify()

JSON.stringify()用於將JavaScript對象或數組轉換為JSON格式的字符串。這在需要將對象發送到服務器或保存到本地存儲時非常有用。

const user = {
  name: "Alice",
  age: 25,
  isStudent: false,
  courses: ["Math", "Science"],
  address: {
    city: "New York",
    zipcode: "10001"
  }
};

const jsonString = JSON.stringify(user);
console.log(jsonString);

// 輸出: 
// {"name":"Alice","age":25,"isStudent":false,"courses":["Math","Science"],"address":{"city":"New York","zipcode":"10001"}}

JSON.parse()

JSON.parse() 用於將JSON字符串轉換回JavaScript對象。這在從服務器接收JSON格式的數據並將其用於應用邏輯時非常有用。

const jsonString = '{"name":"Alice","age":25,"isStudent":false,"courses":["Math","Science"],"address":{"city":"New York","zipcode":"10001"}}';

const user = JSON.parse(jsonString);
console.log(user.name);  // 輸出: Alice
console.log(user.courses);  // 輸出: ["Math", "Science"]

// 在解析JSON字符串後，數據變成了一個JavaScript對象，可以對其進行操作。