[筆記] JavaScript中物件(object)和JSON格式的轉換

圖片來源：JavaScript 101

在上一篇文章中（[筆記] JavaScript中的物件建立(Object) - Part 2），說明了如何使用object literal syntax來建立物件（也就是使用{ }來建立物件），這裡來談談JSON和object literal syntax的關係。

什麼是JSON

在網頁資料處理的過程中，我們常常將資料從一端傳到另一端（例如，從伺服器端傳到客戶端），這時候我們就需要一些共通的格式來方便包裝資料和解讀資料。

假設我們現在要傳遞一個物件的資料，這個物件長這樣：

XML

過去相當常用的一種資料格式是XML（EXtensible Markup Language）格式，它的型式大概會長的像這樣子：

在XML格式中，會用一個又一個角括弧把屬性名稱包起來，中間放值，最後再放封閉的角括弧（詳細的XML格式說明可參考：W3Schools XML Tutorial）。

JSON

然而XML格式雖然可以傳遞資料，但這麼做似乎顯得不夠簡便，因為光是屬性名稱就必須要打兩次，當我們的資料量很大的時候，可能會使得檔案變得很大，影響到傳遞的時間，因此後來就有人發現，我們何不使用類似JavaScript中object literal syntax的方式來傳遞資料呢？

於是就出現了JSON

JSON的全名是JavaScript Object Notation，之所以取做這個名稱，只要是因為它是從JavaScript中建立物件用的Object literal syntax演變而來（關於更詳細的JSON說明可參考：W3Schools JSON Tutorial）。

但是JSON 和 JavaScript的Object literal syntax還是有不同的地方，這點是非常需要留意的。

讓我們先來把我的上面的物件轉成JSON格式來看看：

JSON格式和JavaScript中使用{ }建立物件的樣子真的非常相似，幾乎就是把var xxx = { }這個{ }這個複製下來而已！但要特別注意的地方是：

1. JSON就是一組字串。
2. 在使用{ }建立物件時，屬性名稱是可以有引號也可以沒有的，但在JSON格式中，該屬性名稱一定要有引號。
3. 若物件中的值為function，是無法透過JSON傳遞的。

將物件轉成JSON格式

在JavaScript中，要將物件改為JSON格式非常容易，只要使用內建的函式JSON.stringify()就可以了，例如我原本的物件名稱是person，我只需要輸入如下的指令，就可以將物件轉成JSON格式了。

轉換出來的JSON字串：

將JSON格式轉成物件

在JavaScript中，要將JSON格式轉回物件也非常簡單，同樣是透過內建的函式JSON.parse()

它就再次被轉換回物件了：

→回到此系列文章目錄

資料來源

[Udemy] JavaScript: Understanding the Weird Parts