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
}
}
*/
