iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
2
Modern Web

JavaScript基礎二三事系列 第 14

Day14 JSON與物件實體

今天來看看JSON

前端工程師在串接資料,常常是接後端發出的JSON檔案(API),再將其內容渲染到網頁上,那什麼是JSON呢?

JSON,全名JavaScript Object Notation
是受到JavaScript物件實體語法啟發的傳輸格式,比起使用XML傳輸資料,JSON格式在檔案大小上更為輕量,也是現在主流的傳輸格式。

一個JavaScript物件可以長這樣

    {name: 'Simon',isF2E: true}

而JSON會是這樣

    {'name':'Simon','isF2E':'true'}

看起來好像差不多?

物件的屬性名name,在JSON中被引號包起來變成'name',也就是說原本的屬性名到了JSON變成字串,JavaScript利用物件實體語法時,物件屬性名稱也可以是字串(對物件實體語法,屬性的引號'"可加可不加)

var object = {
	'name': 'Simon',
	'isF2E': true
}

這樣的JavaScript物件實體語法是OK的,但不是說物件的屬性名稱'name''isF2E'真的變成字串了,我們用console印出來看看。

console.log(object)

可以看到當用物件實體語法創造物件時,屬性名稱可以加上引號',實際創造出來時,物件屬性的引號'不見了!
相較之下,JSON格式的屬性名與值一定要加引號'成為字串,這裡要有個認知,雖然JSON是受到JavaScript啟發,但JSON和JavaScript是不一樣的東西

關於JSON,有興趣可以參考W3CMDN的介紹
 
另外JSON格式再傳輸時(前端到後端、後端到前端),有時也會以字串的形式處理。
來看看以下程式碼,假設前端從後端接到一個JSON字串

'{"name":"Simon","isF2E":"true"}'

前端AJAX接到後,現在要取值Simon來用

var data = '{"name":"Simon","isF2E":"true"}';
console.log(data.name+'挑戰第14天')

結果是

因為JSON被引號包著,現在是字串,這時JSON.parse()就派上用場

var data = '{"name":"Simon","isF2E":"true"}'
var data2 = JSON.parse(data);
console.log(data2.name+'挑戰第14天')


 
關於物件與JSON字串的轉換,有兩個重要函式:

JSON.stringify()

將JS物件轉為JSON字串 

JSON.parse();

將JSON字串轉為JS物件

而這裡用JSON.parse();函式來處理,讓JSON格式字串轉為JavaScript物件,如此一來前端接收到JSON資料就可以繼續用JavaScript處理其內容。
 
 
 
 
小結
今天我們認識了JSON格式,與JavaScript物件的差異。
題外話,前端開發者在串接JSON時,如果直接用瀏覽器點開,就會變成這樣:

JSON來源:政府開放資料戲劇表演資訊

這個時候可以使用Chrome的擴充套件JSONView,就會變成這樣

我個人比較習慣JSONView,不過JSON Editor Online這個網頁也可以達成類似的效果

視覺上是不是易讀多了呢?

今天的筆記內容可以參照Udemy課程:JavaScript 全攻略:克服JS 的奇怪部分4-33


上一篇
Day13 物件與物件實體
下一篇
Day15 函式就是物件
系列文
JavaScript基礎二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言