资讯专栏INFORMATION COLUMN

哎哟,这就是JSON

邱勇 / 2937人阅读

摘要:官方的说法,也不是特别的明了,只说明了这是一种轻量级的数据交换格式,且基于一个子集。的语法介绍常见数据结构有两种形式,其分别是名称值对的集合,类似中的对象。比如,则在中是行不通的。

写这篇文章的缘由

你了解JSON嘛?JSON是JavaScript中对象嘛?JSON可以存储function对象嘛?JSON的本质是什么呢?JSON能写注释嘛?
如果你都能答上来,那恭喜你,你对JSON了解的很测底,如果你有写不太明白,哪有必要和我一起来探讨JSON

我之前对JSON的概念也是一知半解,常常和JavaScript的Object对象混淆,所以就导致了很多种种的错误,特别是在研究NodeJS中,有一个叫package.json的文件专门用来存储json格式的数据。如果你在这个文件里面写注释,或者存储函数,最终解析这个文件时就会报错。

然后自己查阅了些相关的资料,得出些结论。现在拿出来和大家分享一下,同时,假如文章中有纰漏的地方,大家可以帮我指点纠正下。

JSON是什么

首先我们来看看官方是怎么描述JSON的:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。参考来源地址:http://www.json.org/json-zh.html。

官方的说法,也不是特别的明了,只说明了这是一种轻量级的数据交换格式,且基于JavaScript一个子集。这根本说明不了什么?不过我联想到了另外一种数据交换格式,那就是xml,这个格式特别在webService中被大量使用。xml是什么呢,其本质是一种DOM结构。对比一下,那json本质就是字符串了,不过这个字符串不是不同的字符串,它有一些列的语法和结构。下面我们就介绍下其语法。

JSON的语法介绍

常见JSON数据结构有两种形式,其分别是:

“名称/值”对的集合,类似JavaScript中的对象。

值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

首先来看第一种情况:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。

这和JavaScript中的对象字面量比较类似,但是本质上还是有些区别的。比如对象中的名称(或者称为key)是必须用双引号括起来的。单引号都不行,更别说忽略它了,虽然JavaScript中的对象中的名称值常常忽略双引号。比如

{
    name : "test",
    age  : 123,
    success : function(){
        //todo
    }
}

则在JSON中是行不通的。除了"名称(key)"值有限制外,对象中的"值(value)"也做了限制,比如在JavaScript中的对象字面量中的值可以随便赋值,不管是字符串、数组、函数、整形都是可以的。JSON中的取值可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array),

除此之外,这些值以外都会被解析出问题,像刚才头中提到的,如果给JSON的值赋值一个function是一个错误的行为。

接下来,看看值的有序列表(或者称为数组),数组是值的有序列表,一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔,并且值的限制情况在上面中已经提到。

差不多把语法介绍完了,总结一下,JSON其本质是一串有意义的字符串数据交互格式。呵呵,不知道我定义的正不正确。

JavaScript语言中JSON的解析和序列化

在JavaScript中经常是要对JSON进行处理的,比如提交一个数据前常常需要对其进行序列化处理,从后来拉过来的JSON数据,我们经常要对它进行解析然后得到一个JavaScript对象。可能由于大家经常使用一些JavaScript类库,这些库对JSON的操作做了封装,所以造成一种现象,那就是我们只会用,对齐本质,我们了解甚少。现在我们就抛开类库,了解其底层的本质。

早期的JSON解析器通过JavaScript中eval()函数来解析的。直到ECMA5对齐进行了规范,并且定义了一个全局的JSON对象用来对JSON进行解析和序列化。支持JSON这个全局对象的浏览器包括IE8+、FF3.5+、Safari4+、Chrome和Opera10.5+。对于不支持这个对象的浏览器比如IE6、IE7怎么做处理呢?

不用担心,JSON的发明者早就帮我们实现了兼容的代码,其地址为:https://github.com/douglascrockford/JSON-js。对于不支持原生的JSON对象的。我们可以引入这段代码解决兼容性的问题。

JSON有两个主要方法,用来解决JSON的序列化和解析,其分别是stringfyparse.让我们分别来看看它们的用法。

ECMA5定义的标准接口如下所示:

/**
@param {*} value
@param {Function} [replacer]
@param {Number|String} [space]
@static
*/
JSON.stringify = function(value,replacer,space) {};

其中对一个参数是必须滴,而且是我们要进行序列化的对象。示例代码如下所示:

var obj = {
    name : "hello",
    age  : 18
}

var jsonText = JSON.stringify(obj)    //输出:{"name":"hello","age":18}

第二个参数是可选项,可以是函数或者是数组。如果是数组,那么数组中指定是过滤项,以上面例子为例,进行如下调用:

var jsonText = JSON.stringify(obj,["name"])     //输出: {"name":"hello"}

如果是函数的话,回调函数里面的参数对应Javascript中对象里面的keyvalue值。示例如下:

var jsonText = JSON.stringify(obj,function(key,value){
    switch(key) {
        case "name": return value+" json";
        case "age" : return 20;
        default : return value;
    }
});
//输出 {"name":"hello json","age":20}

第三个参数也是可选的。用来进行字符串缩进,示例如下:

var jsonText = JSON.stringify(obj,null,4); //按4个空格缩进

//输出的结果不再是单行,而是下面的形式:
{
    "name" : "hello",
    "age" :  18
}

除了可以设置数字外,还可以用字符设置缩进,有兴趣大家可以尝试一下。

ECMA5对parse接口的定义如下:

/**
@param {string} jsonString
@param {Function} [reviver]
@static
*/
JSON.parse = function(jsonString,reviver) {};

该方法接受两个参数,其中第二个参数是可选的。

第一个参数的作用是待转换的JSON字符串。比如我们可以将上面的jsonText通过parse还原成原来的Javascript对象。

var obj = JSON.parse(jsonText); //obj为JavaScript对象。

第二个参数是一个函数,用来更加细微的控制转换过程。它接受两个参数,分别对应着JSON数据的键值对。调用示例如下:

   var obj = JSON.parse(jsonText,function(key,value){
        //todo
    }); 
帮助链接

JSON中文官网

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

转载请注明本文地址:https://www.ucloud.cn/yun/85466.html

相关文章

  • 关于 Django 开发的 11 件事

    摘要:在这里的脚本有,部署到预发布生产服务器,清理目录,压缩,备份数据库,在本地,等等。目录存储了所有数据库,,,,等等的配置文件。我使用做所有的排序任务,从发送邮件到从拉取数据。当我第一次开始开发和的时候,我使用,但是已经把所有事情移植进了。 本文原文是 11 Things I Wish I Knew About Django Development Before I Star...

    JayChen 评论0 收藏0
  • VueCli3.0中集成MockApi

    摘要:缺点需要增加本地的代码量,以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高,跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一:使用场景 哎哟,好烦啊,这个需求还么结束就来下一个需求,程序员不要排期的吗? 没办法啊,资本主义的XX嘴脸啊 来吧,技术评审我俩把接口...

    刘玉平 评论0 收藏0
  • Laravel 5.4 正式发布

    摘要:它的目的是提供正确的方式进行页面交互测试,所以可以使用去点击按钮或者链接填写表单甚至拖放。此外,提到测试运行比更快。此次因底层架构改变较大而重命名。这个功能受到的启发,能够将元素简化为可重用区域。 showImg(https://segmentfault.com/img/remote/1460000008212617); 转自 Laravel 社区:https://laravel-ch...

    Vultr 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<