2016年1月27日 星期三

[筆記] 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()


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


→回到此系列文章目錄

資料來源

Share:

0 意見:

張貼留言