[JS奇怪的世界]No.25 JSON與物件實體

發表於 2019-05-18 分類於克服JS奇怪的部分系列

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

接下來將會講解大家常對 JSON 的錯誤理解，那 JSON是什麼呢?JSON 是 JavaScript Object Notation，它是由 JavaScript 物件實體所啟發產生的，當我們在建立物件實體的時候，其實也就是在建立 JSON ↓

JSON與物件實體

var objectLiteral = {
 firstname: 'mary',
 isAProgrammer: true,
};
console.log(objectLiteral);

那早期的資料再傳送的格式大概都像這樣 ↓

<object>
 <firstname>mary</firstname>
 <isAProgrammer>true</isAProgrammer>
</object>

那這樣子傳送其實當資料越來越多的時候，會有非常嚴重的問題，檔案會太大，因為裡面有太多不需要的符號及多餘的且重複符號這些都會影響速度，所以才會延伸出這樣子的作法 (JSON) ↓

{
 firstname: 'mary',
 isAProgrammer: true,
};

那就是因為這個原因導致，所以我們現在都使用 JSON 來接收及傳送資料，但 JSON 格式會稍微有點不太一樣，，首先屬性必須要包在引號內 ↓

{
 'firstname': 'mary',
 'isAProgrammer': true,
};

課程上有說明 JSON 在物件實體語法是有效的，但不是所有物件實體語法在 JSON 有效，因為 JSON 是一個比較嚴格的檔案，所以 JSON 並不是 JavaScript 的一部分，但是 JSON 在 JavaScript 裡面非常受歡迎，所以 JavaScript 有兩個語法可以讓它轉換成 JSON 格式及物件(Object)實體語法。

例如將物件實體語法轉換成 JSON，使用 JSON.stringify() ↓

var objectLiteral = {
 firstname: 'mary',
 isAProgrammer: true,
};
console.log(JSON.stringify(objectLiteral));

JSON.stringify() 就會將物件實體語法的屬性加上引號 ↓

1	'{"firstname": "mary", "isAProgrammer": true}'

JSON stringify

那 JSON 轉換成物件實體語法呢?則是使用 JSON.parse() ↓

1 2	var jsonValue = JSON.parse('{ "firstname": "mary","isAProgrammer": true }'); console.log(jsonValue);

那它就會轉換成這樣 ↓

var myValue = {
 firstname: 'mary',
 isAProgrammer: true
};

JSON parse

圖源

JavaScript 全攻略:克服 JS 奇怪的部分