深入理解JavaScript系列11:根本没有“JSON对象”这回事

darryrzhong 发布于2019-08-19 17:23 / 2281人阅读

摘要：更多资料如果你想了解更多关于的资料，下面的连接对你绝对有用关于本文本文转自大叔的深入理解系列。深入理解系列文章，包括了原创，翻译，转载，整理等各类型文章，原文是大叔的一个非常不错的专题，现将其重新整理发布。

前言

写这篇文章的目的是经常看到开发人员说：把字符串转化为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对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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