圖片來源: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 = { }這個{ }這個複製下來而已!但要特別注意的地方是:
- JSON就是一組字串。
- 在使用{ }建立物件時,屬性名稱是可以有引號也可以沒有的,但在JSON格式中,該屬性名稱一定要有引號。
- 若物件中的值為function,是無法透過JSON傳遞的。
將物件轉成JSON格式
在JavaScript中,要將物件改為JSON格式非常容易,只要使用內建的函式JSON.stringify()就可以了,例如我原本的物件名稱是person,我只需要輸入如下的指令,就可以將物件轉成JSON格式了。
轉換出來的JSON字串:
將JSON格式轉成物件
在JavaScript中,要將JSON格式轉回物件也非常簡單,同樣是透過內建的函式JSON.parse()
它就再次被轉換回物件了:
→回到此系列文章目錄