JSON 代表 JavaScript Object Notation。它用於描述 JavaScript 物件。它是一種資料共享格式，使用鍵值對來指定資料值。所有主流瀏覽器都支援 JSON 物件。本教學要求您熟悉 JavaScript 以及 JSON 物件的操作。要熟悉 JSON，您可以查看我們的 JSON 資料共享格式概述。您也可以查看如何 在 JavaScript 中使用 JSON.
JSON 格式也用於跨網路傳輸資料。為此，資料需要進行序列化和反序列化。當資料為 JSON 格式時，會使用 stringify 方法將其轉換為字串。要將資料轉換回物件格式以進行操作，則使用 parse 方法。本教學將 介紹使用 JSON.parse() 和 JSON.stringify() 的步驟。讓我們開始吧！
JSON.parse()
此方法用於將 JSON 字串轉換為 JSON 物件，以便可以透過程式進行操作。傳入的字串必須是有效的 JSON 字串，否則會拋出異常。此字串可以從任何 Web 服務或遠端應用程式接收。
此方法接受兩個參數：一個 字串 和一個 回呼 函式，可用於在將字串轉換為物件之前對其進行操作。假設我們從 Web 服務收到一條訊息，指示操作的狀態、訊息和狀態碼。以下是將字串轉換為物件的簡單範例。
程式碼：
|
1 2 3 |
let json_string = '{"message":"Done with success", "status":200, "code":200}' let server_obj = JSON.parse(json_string); console.log(server_obj) |
輸出：
|
1 |
{message: 'Done with success', status: 200, code: 200} |
一個常見的問題是在字串末尾添加了逗號，因此如果傳遞給它的字串含有尾隨逗號， JSON.parse() 就會拋出錯誤。如果您需要操作這些值，可以傳入 回呼函式作為第二個參數。
程式碼：
|
1 2 3 4 5 6 7 8 9 |
let string = '{"name":"XYZ","email":"xyz@example.com"}'; let obj = JSON.parse(string, (key, value) => { if (typeof value === 'string') { return value.toUpperCase(); } return value; }); console.log(obj) |
輸出：
|
1 |
{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'} |
JSON.stringify()
這個 stringify 方法的作用與 parse 方法完全相反。在這裡，傳入的是 JSON 物件，而傳回值是一個字串。例如，可以將此字串傳遞給其他遠端 Web 服務，然後再次解析為 JSON 物件以進行操作。
程式碼：
|
1 2 3 |
let obj = {message:"Done with success", status:200, code:200} let str = JSON.stringify(obj); console.log(str); |
輸出：
|
1 |
{"message":"Done with success","status":200,"code":200} |
stringify 方法可以接受兩個參數： replacer和 spacer 方法。 replacer 方法可用於替換或排除字串中的任何值。
程式碼：
|
1 2 3 4 5 6 7 8 9 |
let obj = {message:"Done with success", status:200, code:200} let str = JSON.stringify(obj, (key, value) => { if (status === 200) { return undefined; } return value; }); console.log(str) |
輸出：
|
1 |
{"message":"成功完成","status":200,"code":200} |
當 spacer 參數被提供時，陣列或物件的每個元素都會被放置在單獨的一行中，並進行縮排以表示其在物件和陣列階層結構中的深度。下面是一個說明這一點的簡單程式碼片段。
程式碼：
|
1 2 3 |
let obj = {message:"成功完成", status:200, code:200} let str = JSON.stringify(obj, null, "---"); console.log(str) |
輸出：
|
1 2 3 4 5 |
{ ---"message": "成功完成", ---"status": 200, ---"code": 200 } |
結論
在本教學中，我們介紹了兩個處理 JSON 格式內容的實用方法。JSON 物件無處不在，當使用 JavaScript 建構現代應用程式時，這些方法非常有用。欲了解更多資訊，請查看我們部落格上的以下教學課程:
祝您編寫程式愉快！
留言
目前尚無留言。成為第一個留言的人吧。