掌握 JavaScript 中的 JSON 處理：解析與字串化

JavaScript 中的 JSON 處理（解析和字串化）

JSON（JavaScript 物件表示法）是一種輕量級資料交換格式，易於人類閱讀和編寫，也易於機器解析和產生。 JavaScript 提供了內建方法用於將 JSON 字串解析為物件以及將物件轉換為 JSON 字串。

---

1.解析 JSON 字串

JSON.parse() 方法用於將 JSON 字串轉換為 JavaScript 物件。

文法

JSON.parse(text[, reviver]);

• text：要解析的 JSON 字串。
• reviver（可選）：在傳回解析物件之前對其進行轉換的函數。

範例

A.簡單解析

const jsonString = '{"name": "John", "age": 30}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // Output: John
console.log(parsedData.age);  // Output: 30

B.使用 Reviver 功能
reviver 函數可用於自訂解析過程。

const jsonString = '{"name": "John", "birthYear": 1990}';
const parsedData = JSON.parse(jsonString, (key, value) => {
  if (key === "birthYear") {
    return 2024 - value; // Convert birth year to age
  }
  return value;
});
console.log(parsedData.birthYear); // Output: 34

錯誤處理

始終將 JSON.parse() 包裝在 try...catch 區塊中以處理無效的 JSON。

const invalidJson = "{name: 'John', age: 30}"; // Invalid JSON (keys must be in quotes)
try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

---

2.字串化 JavaScript 物件

JSON.stringify() 方法將 JavaScript 物件轉換為 JSON 字串。

文法

JSON.stringify(value[, replacer[, space]]);

• value：要字元串化的物件。
• Replacer（可選）：用於過濾屬性的函數或陣列。
• 空格（可選）：新增縮排以提高可讀性。

範例

A.簡單的字串化

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // Output: {"name":"John","age":30}

B.使用替換函數
替換函數過濾或轉換物件的屬性。

const data = { name: "John", age: 30, password: "secret" };
const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // Exclude passwords
  return value;
});
console.log(jsonString); // Output: {"name":"John","age":30}

C.新增縮排
space 參數使用縮排格式化輸出。

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// Output:
// {
//   "name": "John",
//   "age": 30
// }

錯誤處理

物件中的循環參考會導致 JSON.stringify() 拋出錯誤。

const circularObject = {};
circularObject.self = circularObject;
try {
  JSON.stringify(circularObject);
} catch (error) {
  console.error("Cannot stringify circular object:", error.message);
}

---

3.實際用例

A.傳送資料給伺服器

在 HTTP 請求中傳送 JavaScript 物件之前將其轉換為 JSON 字串。

const data = { name: "John", age: 30 };
fetch("https://example.com/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

B.將資料儲存在本地儲存

使用 localStorage 以 JSON 格式儲存和擷取資料。

const data = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // Storing data

const userData = JSON.parse(localStorage.getItem("user")); // Retrieving data
console.log(userData.name); // Output: John

C.深度複製物件

使用 JSON 方法建立物件的深層副本（不適用於函數或循環參考）。

JSON.parse(text[, reviver]);

---

4. JSON 與 JavaScript 物件之間的差異

JSON	JavaScript Object
Text format (string)	In-memory data structure
Keys must be strings (quoted)	Keys can be strings or symbols
Cannot store methods/functions	Can store methods/functions

---

5.總結

• 使用 JSON.parse() 將 JSON 字串轉換為 JavaScript 物件。
• 使用 JSON.stringify() 將 JavaScript 物件轉換為 JSON 字串。
• JSON 對於 Web 應用程式中的資料交換至關重要，尤其是 API 和本機儲存。
• 解析或字串化 JSON 時始終處理錯誤。

掌握 JSON 處理是建立現代資料驅動的 Web 應用程式的重要技能。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握 JavaScript 中的 JSON 處理：解析與字串化的詳細內容。更多資訊請關注PHP中文網其他相關文章！