深入理解JSON对象

前面的话

  json(javascript object notation)全称是javascript对象表示法,它是一种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据。2001年由Douglas Crockford提出,目的是取代繁琐笨重的XML格式。本文将详细介绍关于json的内容

语法规则

  JSON的语法可以表示以下三种类型的值

【1】简单值

  简单值使用与JavaScript相同的语法,可以在JSON中表示字符串、数值、布尔值和null

  字符串必须使用双引号表示,不能使用单引号。数值必须以十进制表示,且不能使用NaN和Infinity

  [注意]JSON不支持JavaScript中的特殊值undefined

//合格的简单值
5
"hello world"
true
null
//不合格的简单值
+0x1
'hello world'
undefined
NaN
Infinity

【2】对象

  对象作为一种复杂数据类型,表示的是一组有序的键值对儿。而每个键值对儿中的值可以是简单值,也可以是复杂数据类型的值

  与javascript的对象字面量相比,json有三个不同的地方

  1、JSON没有变量的概念

  2、JSON中,对象的键名必须放在双引号里面

  3、因为JSON不是javascript语句,所以没有末尾的分号

  [注意]同一个对象中不应该出现两个同名属性

//合格的对象
{
"name":"huochai",
"age":29,
"school":{
"name":"diankeyuan",
"location":"beijing"
}
}
//不合格的对象
{ name: "张三", 'age': 32 }//属性名必须使用双引号
{};//不需要末尾的分号
{ "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {
return this.name;
}
} // 不能使用函数和日期对象

【3】数组

  数组也是一种复杂数据类型,表示一组有序的值的列表,可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单值、对象或数组

  JSON数组也没有变量和分号,把数组和对象结合起来,可以构成更复杂的数据集合

  [注意]数组或对象最后一个成员的后面,不能加逗号

JSON对象

  JSON之所以流行,是因为可以把JSON数据结构解析为有用的javascript对象

  ECMAScript5对解析JSON的行为进行了规范,定义了全局对象JSON

  [注意]IE7-浏览器不支持

  JSON对象有两个方法:stringify()和parse()。这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值

stringify()

  JSON.stringify()方法用于将一个值转为字符串。该字符串应该符合JSON格式,并且可以被JSON.parse()方法还原 

  默认情况下,JSON.stringify()输出的JSON字符串不包括任何空格字符或缩进

var jsonObj = {
"title":"javascript",
"group":{
"name":"jia",
"tel":12345
}
};
//{"title":"javascript","group":{"name":"jia","tel":12345}}
JSON.stringify(jsonObj);

具体转换

JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"
JSON.stringify([1, "false", false])// '[1,"false",false]'
JSON.stringify({ name: "张三" })// '{"name":"张三"}'

  stringify()方法把正则表达式和数学对象转换成空对象的字符串形式

JSON.stringify(/foo/) // "{}"
JSON.stringify(Math) // "{}"

  stringify()方法把日期对象和包装对象转换成字符串

JSON.stringify(new Boolean(true)) //"true"
JSON.stringify(new String('123')) //""123""
JSON.stringify(new Number(1)) //"1"
JSON.stringify(new Date()) //""2016-09-20T02:26:38.294Z""

  如果对象的成员是undefined或函数,这个成员会被省略

  如果数组的成员是undefined或函数,则这些值被转成null

JSON.stringify({
a: function(){},
b: undefined,
c: [ function(){}, undefined ]
});
// "{"c":[null,null]}"

  JSON.stringify()方法会忽略对象的不可遍历属性

var obj = {};
Object.defineProperties(obj, {
'foo': {
value: 1,
enumerable: true
},
'bar': {
value: 2,
enumerable: false
}
});
JSON.stringify(obj); // {"foo":1}]

参数

  JSON.stringify()除了要序列化的JavaScript对象外,还可以接收另外两个参数,这两个参数用于指定以不同的方式序列化JavaScript对象。第一个参数是个过滤器,可以是一个数组,也可以是一个函数;第二个参数是一个选项,表示是否在JSON字符串中保留缩进

【数组过滤器】

  当stringify()方法的第二个参数是一个数组时,这时相当于实现一个过滤器的功能

  【1】过滤器只对对象的第一层属性有效

var jsonObj = {
"title":"javascript",
"group":{
"a":1
}
};
//{"group":{"a":1}}
console.log(JSON.stringify(jsonObj,["group","a"]))

  【2】过滤器对数组无效

var jsonObj =[1,2];
JSON.stringify(jsonObj,["0"])//"[1,2]"

【函数参数】

  stringify()方法的第二个参数也可以是一个函数。传入的函数接收两个参数,属性(键)名和属性值

JSON.stringify({a:1,b:2}, function(key, value){
if (typeof value === "number") {
value = 2 * value;
}
return value;
})
// "{"a":2,"b":4}"

  属性名只能是字符串,而在值并非键值对儿结构的值时,键名可以是空字符串

  这个函数参数会递归处理所有的键

  下面代码中,对象o一共会被f函数处理三次。第一次键名为空,键值是整个对象o;第二次键名为a,键值是{b:1};第三次键名为b,键值为1

JSON.stringify({a: {b: 1}}, function (key, value) {
console.log("["+ key +"]:" + value);
return value;
})
// []:[object Object]
// [a]:[object Object]
// [b]:1
// '{"a":{"b":1}}'

  函数返回的值就是相应键的值。如果函数返回了undefined或没有返回值,那么相应的属性会被忽略

JSON.stringify({ a: "abc", b: 123 }, function (key, value) {
if (typeof(value) === "string") {
return undefined;
}
return value;
})
// '{"b": 123}'

【缩进】

  stringify()方法还可以接受第三个参数,用于增加返回的JSON字符串的可读性

  如果是数字,表示每个属性前面添加的空格(最多不超过10个)

  如果是字符串(不超过10个字符),则该字符串会添加在每行前面

/*"{
"p1": 1,
"p2": 2
}"*/
JSON.stringify({ p1: 1, p2: 2 }, null, 2);
//"{"p1":1,"p2":2}"
JSON.stringify({ p1: 1, p2: 2 }, null, 0);
/*"{
|-"p1": 1,
|-"p2": 2
}"*/
JSON.stringify({ p1:1, p2:2 }, null, '|-');

toJSON()

  有时候,JSON.stringify()还是不能满足对某些对象进行自定义序列化的需求。在这些情况下, 可以通过对象上调用toJSON()方法,返回其自身的JSON数据格式

JSON.stringify({
toJSON: function () {
return "Cool"
}
})
// ""Cool""
var o = {
foo: 'foo',
toJSON: function() {
return 'bar';
}
};
JSON.stringify({x: o});// '{"x":"bar"}'

  如果toJSON()方法返回undefined,此时如果包含它的对象嵌入在另一个对象中,会导致该对象的值变成null。而如果包含它的对象是顶级对象,结果就是undefined

JSON.stringify({
toJSON: function () {
return undefined
}
})
//undefined

  Date对象部署了一个自己的toJSON方法,自动将Date对象转换成日期字符串

JSON.stringify(new Date("2016-08-29"))
// "2016-08-29T00:00:00.000Z"

  toJSON方法的一个应用是,可以将正则对象自动转为字符串

RegExp.prototype.toJSON =RegExp.prototype.toString;
JSON.stringify(/foo/)// ""/foo/""

  toJSON()可以作为函数过滤器的补充,因此理解序列化的内部顺序十分重要。假设把一个对象传入JSON.stringify(),序列化该对象的顺序如下

  1、如果存在toJSON()方法而且能通过它取得有效的值,则调用该方法。否则,按默认顺序执行序列化

  2、如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第一步返回的值

  3、对第二步返回的每个值进行相应的序列化

  4、如果提供了第三个参数,执行相应的格式化

parse()

  JSON.parse方法用于将JSON字符串转化成对象

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null
var o = JSON.parse('{"name": "张三"}');
o.name // 张三

  如果传入的字符串不是有效的JSON格式,JSON.parse方法将报错

//Uncaught SyntaxError: Unexpected token u in JSON at position 0(…)
JSON.parse("'String'") //Uncaught SyntaxError: Unexpected token u in JSON at position 0(…)
JSON.parse("undefined")

  JSON.parse()方法也可以接收一个函数参数,在每个键值对儿上调用,这个函数被称为还原函数(reviver)。该函数接收两个参数,一个键和一个值,返回一个值

  如果还原函数返回undefined,则表示要从结果中删除相应的键;如果返回其他值,则将该值插入到结果中

var o = JSON.parse('{"a":1,"b":2}', function(key, value) {
if (key === ''){
return value;
}
if (key === 'a') {
return value + 10;
}
});
o.a // 11
o.b // undefined

  在将日期字符串转换为Date对象时,经常要用到还原函数

var book = {
"title": "javascript",
"date": new Date(2016,9,1)
}
var jsonStr = JSON.stringify(book);
//'{"title":"javascript","date":"2016-09-30T16:00:00.000Z"}''
console.log(jsonStr) var bookCopy = JSON.parse(jsonStr,function(key,value){
if(key == 'date'){
return new Date(value);
}
return value;
})
console.log(bookCopy.date.getFullYear());//2016
 

eval()

  实际上,eval()类似于JSON.parse()方法,可以将json字符串转换为json对象

eval('(' + '{"a":1}'+')').a;//1
JSON.parse('{"a":1}').a;//1

  但是,eval()可以执行不符合JSON格式的代码,有可能会包含恶意代码

eval('(' + '{"a":alert(1)}'+')').a;//弹出1
JSON.parse('{"a":alert(1)}').a;//报错

  所以,还是要尽量少使用eval()

-转载

关于json 的那些知识点的更多相关文章

  1. 5月16 JSON的一些知识点及AJAX的应用

    什么是JSON? JSON(JavaScript Object Notation)是一种轻量级的数据交换语言,以文字为基础,(文本数据交换格式).JSON简单说就是javascript中的对象和数组, ...

  2. 11 —— 回顾 JSON 相互转换的知识点

    /** * json 转换的两种方式 * * 一,转为字符串 (序列化的过程) * JSON.stringify() * * 二,json 转化为字符串 (反序列化的过程) * JSON.parse( ...

  3. 序列化 json 模块

    什么是序列化? 将python中的列表,字典,元组,集合转换成字符串的过程就叫做序列化,反之叫做反序列化. 我们把变量从内存中变成可存储或传输的过程称之为序列化,序列化之后,就可以把序列化后的内容写入 ...

  4. JS与 JSON(一个菜鸟的不正经日常)

    今天学习了json的一些知识, 1 . 什么是json 1.1  JSON 英文全称 JavaScript Object Notation. 1.2  JSON 是一种轻量级的数据交换格式,用于存储和 ...

  5. ASP.NET-使用json

    数据格式 vat strJson =' {"name":"jingya","Age":88} '; // 数字不用写双引号 JSON.par ...

  6. 最轻量级的前端Mvc框架backbone

    最轻量级的前端Mvc框架backbone依赖最轻量级的库understore backbone并非将前端再次切分为mvc,而是分为了七大模块,分别是:Events.Model.Collection.R ...

  7. Web前端2019面试总结

    基础知识点   1.水平垂直居中 子绝父相,子盒子设置绝对定位,设置top:50%;left:50%,margin-top:-50%;margin-left:-50%; 子绝父相,子盒子设置绝对定位, ...

  8. node.js 使用 superagent 与 cheerio 完成简单爬虫

    目标 建立一个 lesson3 项目,在其中编写代码. 当在浏览器中访问 http://localhost:3000/ 时,输出 CNode(https://cnodejs.org/ ) 社区首页的所 ...

  9. day 51 js-2 函数,对象,正则 (定时器示例)

    本文转载自cnblogs.liwenzhou-----哪吒博客 先来一个定时器让我们看看函数的效果: <script src="/js/jquery-3.2.1.min.js" ...

随机推荐

  1. C++Lua配置

    1.先从lua官网下载lua新版本http://www.lua.org/,我这里以lua-5.3.0.tar.gz为例,大小不到300kb 2.解压后出现如下图 3.在vs2013新建工程静态库类型( ...

  2. ACM题目————Find them, Catch them

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  3. easyui enableFilter combobox级联 combotree

    //网格过滤         function datagridFilter(dg){             dg.datagrid('enableFilter');             dg. ...

  4. River Hopscotch(二分POJ3258)

    River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9263 Accepted: 3994 Descr ...

  5. yum mysql on centos 7

    参考:https://www.linode.com/docs/databases/mysql/how-to-install-mysql-on-centos-7 centos 7上没有办法使用yum i ...

  6. cmake用法(转)

    转自:http://blog.csdn.net/dbzhang800/article/details/6314073 新工作中使用到了cmake,所以找点资料学习一下,这篇讲的确实不错,转过来保存一下 ...

  7. UML中的用例(Use Case)概念分析及StarUML实例

    在UML中use case似 乎最簡單的,用例建模的最主要功能就是用来表达系统的功能性需求或行为,依我的理解用例建模可分为用例图和用例描述.用例图由参与者(Actor).用例 (Use Case).系 ...

  8. COM技术の组件

    什么是COM COM,Component Object Mode即组件对象模型.之所以称之为“模型”,是表明COM是一种编程规范(非具体代码),通过这种规范我们能够编写出语言无关的,可扩展的,内部变化 ...

  9. log4j.properties详解与例子

    在项目中的classes 中新建立一个log4j.properties文件即可: 在实际编程时,要使Log4j真正在系统中运行事先还要对配置文件进行定义.定义步骤就是对Logger.Appender及 ...

  10. static变量在php和java中的生命周期

    1. java的static变量伴随着java虚拟机的退出而消亡,java虚拟机运行期间,static变量一直存在 2. php的static变量只针对一次请求(一次php文件的执行),php文件执行 ...