JS學習筆記#12 | JSON.parse 與 JSON.stringify

Volodymyr Dobrovolskyy on Unsplash

JSON.parse

將 JSON 格式的字串解析成 JavaScript 的物件。

語法：

JSON.parse(jsonString)

範例：

const jsonString = '{"name": "Alice", "age": 25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 輸出: Alice
console.log(obj.age);  // 輸出: 25

用途：

• 將後端返回的 JSON 格式資料轉換成 JavaScript 可操作的物件。
• 在本地存儲中讀取 JSON 資料（例如 localStorage 或 sessionStorage）。

JSON.stringify

將 JavaScript 的物件或陣列轉換成 JSON 格式的字串。

語法：

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

範例：

const obj = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 輸出: '{"name":"Alice","age":25}'

用途：

• 將物件或陣列轉換成 JSON 字串，方便儲存到本地存儲中或傳輸到伺服器。
• 日誌或除錯時，將物件轉換成易讀的字串。

操作流程：儲存與解析 Array 至 LocalStorage 或 SessionStorage

// 1. 定義原始資料
const data = [1, 2, 3, 4, 5];

// 2. 將資料轉換為 JSON 字串
const jsonString = JSON.stringify(data);

// 3. 儲存至 LocalStorage
localStorage.setItem('myArray', jsonString);

// 4. 從 LocalStorage 取回 JSON 字串
const retrievedString = localStorage.getItem('myArray');

// 5. 將 JSON 字串解析回陣列
const parsedArray = JSON.parse(retrievedString);

// 6. 檢查取回的結果
console.log(parsedArray); // 輸出: [1, 2, 3, 4, 5]

補充說明: JSON.stringify() 可以帶的參數

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

參數說明：

• value：要轉換的值，例如物件、陣列等。
• replacer（可選）：用於過濾或修改值的函數或陣列。
• space（可選）：用於美化輸出的字串，指定縮排空格數。

replacer（過濾或修改值的函數或陣列）

• 可以是函數：接受每個屬性的 key 和 value，並返回序列化後的值（或 undefined 以排除該屬性）。

const obj = { name: "Alice", age: 25, secret: "hidden" };

const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === "secret") return undefined; // 排除 secret 屬性
  if (typeof value === "number") return value * 2; // 數值加倍
  return value; // 其他值保持原樣
});

console.log(jsonString); 
// 輸出: '{"name":"Alice","age":50}'

• 可以是陣列：指定只序列化的屬性名稱。

const obj = { name: "Alice", age: 25, secret: "hidden" };

const jsonString = JSON.stringify(obj, ["name", "age"]);
console.log(jsonString); 
// 輸出: '{"name":"Alice","age":25}'

space（美化輸出的縮排空格數或樣式）

• 可以是數字：指定每層的縮排空格數。

const obj = { name: "Alice", age: 25, address: { city: "Wonderland", zip: 12345 } };

const jsonString = JSON.stringify(obj, null, 2); // 每層縮排 2 個空格
console.log(jsonString);
/*
輸出:
{
  "name": "Alice",
  "age": 25,
  "address": {
    "city": "Wonderland",
    "zip": 12345
  }
}
*/

• 可以是字串：用指定字串填充每層的縮排（例如 '\t' 或 '-'）。

const jsonString = JSON.stringify(obj, null, "--"); // 使用 "--" 進行縮排
console.log(jsonString);
/*
輸出:
{
--"name": "Alice",
--"age": 25,
--"address": {
----"city": "Wonderland",
----"zip": 12345
--}
}
*/

replacer 和 space 的結合使用

const obj = { name: "Alice", age: 25, address: { city: "Wonderland", zip: 12345 } };

const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === "age") return undefined; // 排除 age 屬性
  return value;
}, 4); // 每層縮排 4 個空格

console.log(jsonString);
/*
輸出:
{
    "name": "Alice",
    "address": {
        "city": "Wonderland",
        "zip": 12345
    }
}
*/