深入理解JavaScript系列11:根本沒有“JSON對象”這回事

darryrzhong 發布于2019-08-19 17:23 / 2284人閱讀

摘要：更多資料如果你想了解更多關于的資料，下面的連接對你絕對有用關于本文本文轉自大叔的深入理解系列。深入理解系列文章，包括了原創，翻譯，轉載，整理等各類型文章，原文是大叔的一個非常不錯的專題，現將其重新整理發布。

前言

寫這篇文章的目的是經常看到開發人員說：把字符串轉化為JSON對象，把JSON對象轉化成字符串等類似的話題，所以把之前收藏的一篇老外的文章整理翻譯了一下，供大家討論，如有錯誤，請大家指出，多謝。

正文

本文的主題是基于ECMAScript262-3來寫的，2011年的262-5新規范增加了JSON對象，和我們平時所說的JSON有關系，但是不是同一個東西，文章最后一節會講到新增加的JSON對象。

英文原文：http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/

我想給大家澄清一下一個非常普遍的誤解，我認為很多JavaScript開發人員都錯誤地把JavaScript對象字面量（Object Literals）稱為JSON對象（JSON Objects），因為他的語法和JSON規范里描述的一樣，但是該規范里也明確地說了JSON只是一個數據交換語言，只有我們將之用在string上下文的時候它才叫JSON。

定義

JSON（JavaScript Object Notation）是一種由道格拉斯·克羅克福特構想設計、輕量級的數據交換語言，以文字為基礎，且易于讓人閱讀。盡管JSON是Javascript的一個子集，但JSON是獨立于語言的文本格式，并且采用了類似于C語言家族的一些習慣。

詳細定義:https://zh.wikipedia.org/wiki/JSON

序列化與反序列化

兩個個程序（或服務器、語言等）需要交互通信的時候，他們傾向于使用string字符串因為string在很多語言里解析的方式都差不多。復雜的數據結構經常需要用到，并且通過各種各樣的中括號{}，小括號()，叫括號<>和空格來組成，這個字符串僅僅是按照要求規范好的字符。

為此，我們為了描述這些復雜的數據結構作為一個string字符串，制定了標準的規則和語法。JSON只是其中一種語法，它可以在string上下文里描述對象，數組，字符串，數字，布爾型和null，然后通過程序間傳輸，并且反序列化成所需要的格式。YAML和XML（甚至request params）也是流行的數據交換格式，但是，我們喜歡JSON，誰叫我們是JavaScript開發人員呢！

字面量

引用Mozilla Developer Center里的幾句話，供大家參考：

字面值：字面值是由語法表達式定義的常量；或，通過由一定字辭組成的語詞表達式定義的常量。 (Literals

字符串字面值可以包含有零個或多個字符，由雙引號（"）對或單引號（‘）對包圍。字符串被限定在同種引號之間；也即，必須是成對單引號或成對雙引號。(Strings Literals)

對象字面值是封閉在花括號對({})中的一個對象的零個或多個"屬性名-值"對的（元素）列表。(Object Literals)

何時是JSON，何時不是JSON？

JSON是設計成描述數據交換格式的，他也有自己的語法，這個語法是JavaScript的一個子集。
{ "prop": "val" } 這樣的聲明有可能是JavaScript對象字面量也有可能是JSON字符串，取決于在什么上下文使用它，如果是用在string上下文（用單引號或雙引號引住，或者從text文件讀取）的話，那它就是JSON字符串，如果是用在對象字面量上下文中，那它就是對象字面量。

// 這是JSON字符串
var foo = "{ "prop": "val" }";

// 這是對象字面量
var bar = { "prop": "val" };

而且要注意，JSON有非常嚴格的語法，在string上下文里{ "prop": "val" } 是個合法的JSON，但{ prop: "val" }和{ "prop": "val" }卻是不合法的。所有屬性名稱和它的值都必須用雙引號引住，不能使用單引號。另外，即便你用了轉義以后的單引號也是不合法的，詳細的語法規則可以到這里查看。

放到上下文里來看

大家伙可能嗤之以鼻：難道JavaScript代碼不是一個大的字符串？

當然是，所有的JavaScript代碼和HTML（可能還有其他東西）都是字符串，直到瀏覽器對他們進行解析。這時候.js文件或者inline的JavaScript代碼已經不是字符串了，而是被當成真正的JavaScript源代碼了，就像頁面里的innterHTML一樣，這時候也不是字符串了，而是被解析成DOM結構了。

再次說一下，這取決于上下文，在string上下文里使用帶有大括號的JavaScript對象，那它就是JSON字符串，而如果在對象字面量上下文里使用的話，那它就是對象字面量。

真正的JSON對象

開頭已經提到，對象字面量不是JSON對象，但是有真正的JSON對象。但是兩者完全不一樣概念，在現代的瀏覽器里JSON對象已經被原生的內置對象了，目前有2個靜態方法：JSON.parse()用來將JSON字符串反序列化成對象，JSON.stringify()用來將對象序列化成JSON字符串。老版本的瀏覽器(如ie6)不支持這個對象，但你可以通過json2.js或者json3.js來實現同樣的功能。

如果還不理解，別擔心，參考一下的例子就知道了：

// 這是JSON字符串，比如從AJAX獲取字符串信息
var my_json_string = "{ "prop": "val" }";
 
// 將字符串反序列化成對象
var my_obj = JSON.parse( my_json_string );
 
alert( my_obj.prop == "val" ); //  提示 true, 和想象的一樣!
 
// 將對象序列化成JSON字符串
var my_other_json_string = JSON.stringify( my_obj );

另外，Paul Irish提到Douglas Crockford在JSON RFC里用到了“JSON object”，但是在那個上下文里，他的意思是“對象描述成JSON字符串”不是“對象字面量”。

更多資料

如果你想了解更多關于JSON的資料，下面的連接對你絕對有用：

JSON specification

JSON RFC

JSON on Wikipedia

JSONLint - The JSON Validator

JSON is not the same as JSON

關于本文

本文轉自TOM大叔的深入理解JavaScript系列。聲明一下，本人所有整理的文章均不是照搬全抄，加入自己的理解和詳細的注解，以及修改了一些語病錯字等。

【深入理解JavaScript系列】文章，包括了原創，翻譯，轉載，整理等各類型文章，原文是TOM大叔的一個非常不錯的專題，現將其重新整理發布。謝謝大叔。如果你覺得本文不錯，請幫忙點個推薦，支持一把，感激不盡。

更多優秀文章歡迎關注我的專欄

GPU云服務器云服務器深入理解系列 javascript深入系列深入理解javascript 沒有json對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78494.html

H5學習

摘要：為此決定自研一個富文本編輯器。本文，主要介紹如何實現富文本編輯器，和解決一些不同瀏覽器和設備之間的。對ES6Generator函數的理解 Generator 函數是 ES6 提供的一種異步編程解決方案，語法行為與傳統函數完全不同。 JavaScript 設計模式 ② 巧用工廠模式和創建者模式我為什么把他們兩個放在一起講？我覺得這兩個設計模式有相似之處，有時候會一個設計模式不能滿...

aristark 2019-08-22 11:21 評論0 收藏0
JavaScript對象和JSON

摘要：，指的對象表示法，它本身是個字符串，是一種數據交換格式，并非對象。字符串必須使用雙引號表示，不能使用單引號。數組或對象最后一個成員的后面，不能有逗號。不合法的會在解析成對象時，出現錯誤。替代方法對象下雖然提供了完整的字符串和對象的轉換方法。 JSON(JavaScript Object Notation)，指JavaScript的對象表示法，它本身是個字符串，是一種數據交換格式，并非對...

wuyumin 2019-08-21 15:29 評論0 收藏0
React系列---React（一）初識React

摘要：系列一初識系列二組件的和系列三組件的生命周期是推出的一個庫，它的口號就是用來創建用戶界面的庫，所以它只是和用戶界面打交道，可以把它看成中的視圖層。系列一初識系列二組件的和系列三組件的生命周期 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 評論0 收藏0
瀏覽器事件模型中捕獲階段、目標階段、冒泡階段實例詳解

摘要：目標階段真正點擊的元素的事件發生了兩次，因為在上面的代碼中，既在捕獲階段綁定了事件，又在冒泡階段綁定了事件，所以發生了兩次。所以很明顯用直接綁定的事件發生在了冒泡階段。如果對事件大概了解，可能知道有事件冒泡這回事，但是冒泡、捕獲、傳播這些機制可能還沒有深入的研究實踐一下，我抽時間整理了一下相關的知識。本文主要對事件機制一些細節進行討論，過于基礎的事件綁定知識方法沒有介紹。特別少...

mylxsw 2019-08-21 10:38 評論0 收藏0