Javascript 中如何用 JSON 序列化及反序列化

在 JavaScript 中，JSON 序列化和反序列化分別是指將 JavaScript 對象轉換為 JSON 字符串（序列化），以及將 JSON 字符串解析為 JavaScript 對象（反序列化）。這可以使用內建的 JSON 對象輕鬆完成。

---

1. JSON 序列化：JSON.stringify()

語法

javascript

JSON.stringify(value, replacer, space)

• value：要序列化的 JavaScript 對象。
• replacer（可選）：一個函數或數組，用於過濾對象屬性。
• space（可選）：指定縮進的空格數量，用於格式化輸出的 JSON 字符串。

範例

javascript

const obj = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "traveling"],
  isStudent: false
};

// 基本序列化
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 輸出: {"name":"Alice","age":25,"hobbies":["reading","traveling"],"isStudent":false}

// 帶縮進的序列化（格式化）
const formattedJsonString = JSON.stringify(obj, null, 2);
console.log(formattedJsonString);
/*
輸出:
{
  "name": "Alice",
  "age": 25,
  "hobbies": [
    "reading",
    "traveling"
  ],
  "isStudent": false
}
*/

使用 replacer 過濾屬性

javascript

// 過濾某些屬性
const jsonStringWithFilter = JSON.stringify(obj, ["name", "age"]);
console.log(jsonStringWithFilter);
// 輸出: {"name":"Alice","age":25}

// 使用函數自定義過濾
const jsonStringWithFunction = JSON.stringify(obj, (key, value) => {
  if (key === "age") return undefined; // 過濾掉 age
  return value;
});
console.log(jsonStringWithFunction);
// 輸出: {"name":"Alice","hobbies":["reading","traveling"],"isStudent":false}

---

2. JSON 反序列化：JSON.parse()

語法

javascript

JSON.parse(text, reviver)

• text：要解析的 JSON 字符串。
• reviver（可選）：一個函數，用於轉換解析的結果。

範例

javascript

const jsonString = '{"name":"Alice","age":25,"hobbies":["reading","traveling"],"isStudent":false}';

// 基本反序列化
const obj = JSON.parse(jsonString);
console.log(obj);
// 輸出: { name: 'Alice', age: 25, hobbies: [ 'reading', 'traveling' ], isStudent: false }

使用 reviver 修改解析的值

reviver 函數接收兩個參數：key 和 value，可以用來轉換結果。

javascript

const objWithReviver = JSON.parse(jsonString, (key, value) => {
  if (key === "age") {
    return value + 1; // 年齡加 1
  }
  return value;
});
console.log(objWithReviver);
// 輸出: { name: 'Alice', age: 26, hobbies: [ 'reading', 'traveling' ], isStudent: false }

---

3. JSON 序列化與反序列化的實用範例

儲存和讀取數據

javascript

// 模擬數據儲存到 localStorage
const user = { id: 1, username: "Bob" };
localStorage.setItem("user", JSON.stringify(user));

// 從 localStorage 讀取數據
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser);
// 輸出: { id: 1, username: 'Bob' }

數據傳輸

序列化和反序列化經常用於網絡請求中：

• 序列化：將 JavaScript 對象轉換為 JSON 字符串，發送到伺服器。
• 反序列化：將伺服器返回的 JSON 字符串轉換為 JavaScript 對象。

javascript

// 模擬發送數據
const requestData = { message: "Hello" };
fetch("https://example.com/api", {
  method: "POST",
  body: JSON.stringify(requestData),
  headers: { "Content-Type": "application/json" }
});

// 模擬接收數據
fetch("https://example.com/api")
  .then(response => response.json()) // 自動進行反序列化
  .then(data => console.log(data));

---

注意事項

1. JSON 格式要求

   • JSON 的鍵名必須是雙引號包裹的字符串。
   • 僅支持基本類型：字符串、數字、布爾值、null、數組和對象。
   • 不支持函數、undefined、Symbol 等。

2. 循環引用問題

   • 如果對象中存在循環引用，JSON.stringify() 會拋出錯誤：

     javascript
     
     const obj = {};
     obj.self = obj;
     JSON.stringify(obj); // Uncaught TypeError: Converting circular structure to JSON
     

3. 安全性

   • 在解析不受信任的 JSON 字符串時，要防範惡意輸入。

---

總結

• 序列化：JSON.stringify() 將 JavaScript 對象轉換為 JSON 字符串。
• 反序列化：JSON.parse() 將 JSON 字符串轉換為 JavaScript 對象。

這些方法非常適合用於本地存儲、數據傳輸和動態處理數據。