JavaScript中JSON.stringify() 和 JSON.parse() 如何使用

# JavaScript中JSON.stringify() 和 JSON.parse() 如何使用

## 目錄
1. [JSON簡介](#json簡介)
2. [JSON.stringify() 方法詳解](#jsonstringify-方法詳解)
   - [基本用法](#基本用法)
   - [替換函數](#替換函數)
   - [縮進和格式化](#縮進和格式化)
   - [處理特殊對象](#處理特殊對象)
3. [JSON.parse() 方法詳解](#jsonparse-方法詳解)
   - [基本用法](#基本用法-1)
   - [reviver函數](#reviver函數)
4. [常見使用場景](#常見使用場景)
5. [注意事項和陷阱](#注意事項和陷阱)
6. [性能考慮](#性能考慮)
7. [總結](#總結)

## JSON簡介

JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，它基于ECMAScript的一個子集，采用完全獨立于語言的文本格式來存儲和表示數據。JSON已經成為現代Web開發中最常用的數據格式之一，特別是在前后端數據交互中。

JSON具有以下特點：
- 易于人閱讀和編寫
- 易于機器解析和生成
- 基于JavaScript語法，但獨立于語言
- 支持嵌套結構

在JavaScript中，JSON對象提供了兩個核心方法：
- `JSON.stringify()`：將JavaScript值轉換為JSON字符串
- `JSON.parse()`：將JSON字符串解析為JavaScript值

## JSON.stringify() 方法詳解

### 基本用法

`JSON.stringify()` 方法將一個JavaScript對象或值轉換為JSON字符串。

```javascript
const obj = {
  name: "John",
  age: 30,
  isAdmin: true,
  hobbies: ["reading", "swimming"]
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 輸出: {"name":"John","age":30,"isAdmin":true,"hobbies":["reading","swimming"]}

替換函數

JSON.stringify() 可以接受一個替換函數作為第二個參數，用于控制哪些屬性應該被包含在結果中或如何轉換值。

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined; // 過濾掉所有字符串類型的值
  }
  return value;
}

const obj = {
  name: "John",
  age: 30,
  isAdmin: true
};

const jsonString = JSON.stringify(obj, replacer);
console.log(jsonString);
// 輸出: {"age":30,"isAdmin":true}

縮進和格式化

第三個參數用于控制結果字符串的縮進：

const obj = {
  name: "John",
  age: 30,
  isAdmin: true
};

// 使用數字指定空格數
console.log(JSON.stringify(obj, null, 2));
/*
輸出:
{
  "name": "John",
  "age": 30,
  "isAdmin": true
}
*/

// 使用字符串作為縮進
console.log(JSON.stringify(obj, null, "--"));
/*
輸出:
{
--"name": "John",
--"age": 30,
--"isAdmin": true
}
*/

處理特殊對象

JSON.stringify() 在處理某些特殊對象時有一些限制：

1. 函數和Symbol值：會被忽略或在數組中轉換為null
2. undefined：在對象屬性中會被忽略，在數組中會轉換為null
3. Date對象：會調用toJSON()方法轉換為字符串
4. 循環引用：會拋出錯誤

const specialObj = {
  func: function() {}, // 被忽略
  sym: Symbol("foo"),  // 被忽略
  undef: undefined,    // 被忽略
  date: new Date(),    // 轉換為ISO字符串
  nan: NaN,            // 轉換為null
  infinity: Infinity   // 轉換為null
};

console.log(JSON.stringify(specialObj));
// 輸出: {"date":"2023-05-20T12:00:00.000Z","nan":null,"infinity":null}

JSON.parse() 方法詳解

基本用法

JSON.parse() 方法將一個JSON字符串解析為JavaScript值或對象。

const jsonString = '{"name":"John","age":30,"isAdmin":true}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 輸出: John

reviver函數

JSON.parse() 可以接受一個reviver函數作為第二個參數，用于在返回之前轉換解析結果。

const jsonString = '{"name":"John","age":30,"isAdmin":true}';

const obj = JSON.parse(jsonString, (key, value) => {
  if (key === "age") {
    return value + 1; // 將age增加1
  }
  return value;
});

console.log(obj.age); // 輸出: 31

常見使用場景

1. 數據存儲

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

// 從localStorage讀取
const storedUser = JSON.parse(localStorage.getItem("user"));

2. 深拷貝對象

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));

original.b.c = 3;
console.log(copy.b.c); // 仍然是2

3. API請求和響應處理

// 發送數據
fetch("/api/user", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "John" })
});

// 接收數據
fetch("/api/user/1")
  .then(response => response.json()) // 內部使用JSON.parse()
  .then(data => console.log(data));

4. 配置文件處理

const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  features: ["search", "filter"]
};

// 保存配置
fs.writeFileSync("config.json", JSON.stringify(config, null, 2));

// 讀取配置
const loadedConfig = JSON.parse(fs.readFileSync("config.json"));

注意事項和陷阱

1. 循環引用問題

const obj = { name: "John" };
obj.self = obj; // 創建循環引用

try {
  JSON.stringify(obj); // 拋出錯誤: TypeError: Converting circular structure to JSON
} catch (e) {
  console.error(e);
}

解決方案：使用庫如flatted或手動處理循環引用。

2. 日期對象處理

const obj = { date: new Date() };
const jsonString = JSON.stringify(obj);
const parsedObj = JSON.parse(jsonString);

console.log(typeof parsedObj.date); // "string"，不是Date對象

解決方案：手動轉換或使用reviver函數：

const parsedObj = JSON.parse(jsonString, (key, value) => {
  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)) {
    return new Date(value);
  }
  return value;
});

3. 函數和Symbol丟失

const obj = { 
  func: () => console.log("hello"),
  sym: Symbol("foo")
};
const jsonString = JSON.stringify(obj); // "{}"

4. 大數字精度問題

JavaScript中所有數字都以雙精度浮點數表示，可能導致大整數精度丟失：

const bigNum = { num: 12345678901234567890 };
const jsonString = JSON.stringify(bigNum);
const parsed = JSON.parse(jsonString);
console.log(parsed.num); // 12345678901234567000

性能考慮

1. 大型對象處理：對于非常大的對象，JSON.stringify() 和 JSON.parse() 可能會消耗較多內存和時間。
2. 頻繁調用：避免在循環或高頻觸發的函數中頻繁調用這些方法。
3. 替代方案：對于性能敏感的場景，考慮使用二進制格式如Protocol Buffers或MessagePack。

總結

JSON.stringify() 和 JSON.parse() 是JavaScript中處理JSON數據的核心方法，它們提供了強大的數據序列化和反序列化能力。通過理解它們的各種參數和選項，開發者可以更靈活地控制數據的轉換過程。

關鍵點回顧： - JSON.stringify() 將JavaScript值轉換為JSON字符串，支持替換函數和格式化 - JSON.parse() 將JSON字符串解析為JavaScript值，支持reviver函數 - 注意處理特殊對象類型和循環引用問題 - 在數據存儲、API通信和配置管理等場景中廣泛應用

掌握這些方法的使用技巧和注意事項，將大大提高你在JavaScript開發中處理數據的效率和可靠性。 “`

這篇文章大約3600字，詳細介紹了JSON.stringify()和JSON.parse()的使用方法、參數選項、常見場景、注意事項和性能考慮。內容采用Markdown格式，包含代碼示例和清晰的章節劃分，適合作為技術文檔或博客文章。