將 JavaScript 物件轉換為 JSON

1. 使用 console.log(jsObject) 檢視 JavaScript 物件
2. 使用 JSON.stringify() 將 JSON 物件轉換為字串
3. 使用自定義編寫的程式碼將 JavaScript 物件轉換為 JSON
4. 從 JSON 字串取回 JavaScript 物件

JSON 是一種常用的資料傳輸格式，用於在 javascript 中表示物件。在大多數客戶端-伺服器通訊中，我們使用 JSON 格式作為標準格式來傳輸資料。JSON 表示法易於使用和解釋，因為它是 JavaScript 物件的人類可讀格式。將 javascript 物件轉換為 JSON 格式很容易。我們可以通過以下方式進行轉換。

使用 console.log(jsObject) 檢視 JavaScript 物件

console.log 函式用於將訊息輸出到 Web 控制檯。我們可以使用 Web 瀏覽器的開發人員工具檢視訊息。conosle.log() 函式接受物件、訊息甚至子字串。因此，它最適合幫助我們理解 JavaScript 物件的外觀。當我們 console.log 一個變數儲存一個物件時，我們得到它的視覺化 JSON 表示。以下程式碼使用 console.log 描述了 javascript 物件的表示形式。

var a = {};
a.id = 1;
a.name = "icy-cream";
a.flavor = "vanilla";   
console.log(a);

輸出：

{id: 1, name: "icy-cream", flavor: "vanilla"}

在上面的程式碼中，console.log(a) 輸出物件 a 的 JSON 格式。我們將在所有瀏覽器中為 javascript 物件收到相同的 JSON 表示，因為所有瀏覽器都支援 conosle.log()，包括不友好的 Internet Explorer。通過 console.log() 選項，我們只能檢視物件的 JSON 表示，不能對其進行編輯或將其用於其他程式設計資料處理，而只能在 Web 控制檯中檢視。

使用 JSON.stringify() 將 JSON 物件轉換為字串

獲取 javascript 物件的 JSON 表示的另一種方法是使用 JSON.stringify() 方法。我們可以使用 JavaScript 物件的 JSON 格式，並使用 JSON.stringify() 方法將其分配給變數。JSON.stringify() 轉換 javascript 物件並將物件的 JSON 值作為字串資料返回。

語法

JSON.stringify(<JSObject>)

引數

該函式將 JavaScript 物件作為引數，接受 replacer 函式和 space count 作為可選引數。

• 我們將目標 JavaScript 物件轉換為 JSON 作為 JSON.stringify() 函式的第一個引數。
• 我們使用 replacer 函式來更改 JSON 物件。使用它，我們可以在將物件轉換為 JSON 格式之前指定我們希望從物件中過濾掉的屬性。
• space count 引數是一個數字或字串值，指定要放入輸出 JSON 字串中的空格字元數，以使其成為人類可讀的格式。

返回值

JSON.stringify() 返回 JavaScript 物件的字串 JSON 格式。

用法

讓我們使用上一節中使用的相同物件。但是這一次，我們將使用 JSON.stringify() 將其轉換為 JSON 字串。參考以下程式碼。

var a = {};
a.id = 1;
a.name = "icy-cream";
a.flavor = "vanilla";
console.log(JSON.stringify(a));
console.log(JSON.stringify(a, null, 0));
console.log(JSON.stringify(a, null, 5));

輸出：

{"id":1,"name":"icy-cream","flavor":"vanilla"}
{"id":1,"name":"icy-cream","flavor":"vanilla"}
{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}

在 JSON.stringify() 函式的第三個引數中使用一個數字，我們可以得到一個可讀性更好的 JSON 字串作為輸出。該方法將通過在 JSON 的每個鍵值對之前新增指定數量的空格來格式化 JSON。例如，在 JSON.stringify(a, null, 5) 中，物件 a 的 id 引數放置在五個空格字元之後。

使用自定義編寫的程式碼將 JavaScript 物件轉換為 JSON

如果我們要編寫用於將 JavaScript 物件轉換為 JSON 格式的程式碼，我們將不得不使用 Object.keys() 函式。Object.keys() 是一種 javascript 方法，它提取物件的 keys 並返回一個包含 keys 的陣列。因此，使用我們的自定義程式碼，我們將 javascript 物件的 keys 和 values 組合在一起，並將它們包含在 {} 大括號內，以獲得 javascript 物件的 JSON 表示。讓我們看看下面的程式碼。

var a = {};
a.id = 1;
a.name = "icy-cream";
a.flavor = "vanilla";
var keys = Object.keys(a);
var JSONOut = "{";
for (let i = 0; i < keys.length; i++) {
   JSONOut = JSONOut + `"${keys[i]}":"${a[keys[i]]}",`;
}
JSONOut = JSONOut + "}";
console.log(JSONOut);

輸出：

{"id":"1","name":"icy-cream","flavor":"vanilla",}

從 JSON 字串取回 JavaScript 物件

在大多數 Web 應用程式中，我們將 javascript 物件作為 JSON 字串儲存到資料庫中，以便稍後使用它們來呈現相同的 UI。我們可以將 JSON 作為 JSON string 儲存在資料庫中。我們如何使用 REST API 取回 JSON 或與從資料庫中提取的 JSON 字串相對應的 JavaScript 物件？JavaScript 有 JSON.parse() 方法用於將 JSON 轉換回 JavaScript 物件。參考以下程式碼。

var response = `{
     "id": 1,
     "name": "icy-cream",
     "flavor": "vanilla"
}`
console.log(JSON.parse(response));
var a = JSON.parse(response);
a.id = 20;
console.log(a);

輸出：

{id: 1, name: "icy-cream", flavor: "vanilla"}
{id: 20, name: "icy-cream", flavor: "vanilla"}

使用上面的程式碼，我們通過 JSON.parse() 方法將 JSON 字串轉換回 JavaScript 物件，並將其分配給一個變數。更改同一 JavaScript 物件的 id 屬性的值也會更改屬性值。因此，我們可以將字串 JSON 轉換為有效的 javascript 物件，我們可以在程式碼中以程式設計方式處理該物件。請注意，我們可以使用波浪號字元來接受具有多個換行符的字串。