JSON 数据详解及实例代码分析
JSON 数据详解
一、json值的类型
1.简单值： 可以表示字符串，数值，布尔值，null不支持undefined（json的数值表示： 2 ）
2.对象： 一组有序的键值对，每个键值对的值可以是简单值，也可以是复杂数据类型。（json的字符串：“hello world”）。json字符串与JavaScript字符串的区别，json必须用双引号。
3.数组：一组有序值的列表，数组的值可以是简单值，也可以是复杂数据类型。
不支持变量，函数，以及对象实例
二、json对象与javascript对象
区别：
//javascript对象
var obj = {
name: "liu",
age: 33,
};
// json对象
{
"name": "liu",
"age": 33,
}
- 没有声明变量（json中没有变量的说法）
- 没有末尾分号（）
- json中属性也要加双引号
三、字符串与json对象转换
1、JSON.parse()。parse把字符串解析成原生javascript值（javascript对象）；每个属性名都必须用双引号
var str = '{"name":"huangxiaojian","age":"23"}';
console.log(JSON.parse(str)); //Object { name: "huangxiaojian", age: "23" }
接收另一个参数，为区别JSON.stringify()的过滤函数（过滤器）， 因而叫还原函数。如下：
var book = {
title: "hello",
author: [ "apple" ],
year: 300,
releaseDate: new Date(2016)
};
var jsonText = JSON.stringify( book )
var bookCopy = JSON.parse( jsonText, function( key, value ) {
if (key == "releaseDate" ) {
return new Date( value );
} else {
return value;
}
} );
console.log( bookCopy.releaseDate.getFullYear() );
以上代码book对象，有个releaseDate属性，保存Date对象，经过序列化后变成有效的JSON数据字符串，然后经过解析又在bookCopy中还原为一个Date对象，当遇到releaseDate键值时，会基于相应的值创建一个新的Date对象，结果就是bookCopy.releaseDate属性中保存一个新的Date对象。
2、JSON.stringify( object, selector, retract ) 对象，过滤器（数组或函数），保留缩进。
JSON.stringify()把json对象序列化为字符串。（忽略函数、原型）
var a = {a:1,b:2};
console.log(JSON.stringify(a)); //{"a":1,"b":2}不包含任何空格字符或缩进
3、JSON.stringify()第二个参数，过滤器为数组
过滤器：可以使数组(如果是数组，就把数组中有的属性保留)，也可以是函数(如果是函数，传两个参数：属性和属性值)。
var person = {
name: "liu",
age: 33,
eat: [ "apple" ],
sex: "man"
}
var jsonText = JSON.stringify( person, ["eat", "age" ] )
console.log( jsonText ) //{"eat":["apple"],"age":33}
4、JSON.stringify()第二个参数为函数
函数：函数的两个参数()。switch中参数是属性名(必须字符串)。如果是undefined则忽略属性，（这个value参数是整个序列化后的对象）
特别注意，value在《javascript高级程序设计第三版》中表述和我的不同。可能是我的理解有问题，但是我测试了，结果也是序列化后的值。谁能解决了可以告诉我。（page：566~567）
var person = {
"name": "liu",
"age": 33,
"eat": [ "apple" ],
"sex": "man"
}
var jsonText = JSON.stringify( person, function( key, value ) {
// console.log( value )
switch("eat") {
case "eat":
return [3,4,5,5,5].join(",");
case "age":
return 33;
case "sex":
return undefined;
default:
return value;
}
} )
console.log( jsonText ) //"3,4,5,5,5"
5、缩进，最大缩进为10。超过10 会转换为10
var person = {
"name": "liu",
"age": 33,
"eat": [ "apple" ],
"sex": "man"
}
var jsonText = JSON.stringify( person, null, 4 )
console.log( jsonText )
/////////////////////////结果，带有格式////////////////////
{
"name": "liu",
"age": 33,
"eat": [
"apple"
],
"sex": "man"
}
//特别的缩进方式
var jsonText = JSON.stringify( person, null, "---" )
console.log( jsonText )
/////////////////////////结果，带有格式////////////////////
{
---"name": "liu",
---"age": 33,
---"eat": [
------"apple"
---],
---"sex": "man"
}
6、toJSON（）方法，返回自身的json数据格式。
var date = new Date()
console.log( date.toJSON() )
//person自身没有json数据格式，这是错的。
var person = {
"name": "liu",
"age": 33,
"eat": [ "apple" ],
"sex": "man"
}
console.log( person.toJSON() )
7、为对象添加toJSON()方法，返回字符串则是字符串格式，对象则是对象格式，单个数值就是数值格式。
var person = {
"name": "liu",
"age": 33,
"eat": [ "apple" ],
"sex": "man",
"toJSON": function () {
return this.age
}
}
console.log( person.toJSON() ) // 33
toJSON()可以做过滤器补充
8、假设一个对象传入JSON.stringify(),序列化该对象的顺序
- 存在toJSON（）方法，且能获取有效值，则调用该方法，否则按默认顺序序列化。
- 如果提供了第二个参数，应用这个函数过滤器，传入函数过滤器的值是第1步的返回值。
- 对第2步返回的每个值进行序列化。
- 如果提供了第三个参数，执行相应的格式化。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
下面小编就为大家带来一篇js从数组中删除指定值(不是指定位置)的元素实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
万物皆对象，所以，任何事物都是有特征(属性)和动作(方法)的，一般拿到一份需求分档，或者你浏览一个网页看到一个画面的时候，脑子里就要有提炼出来的属性和方法的能力，那你才是合格的2017-09-09
本篇文章主要是对js中call与apply的用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家介绍了通过babel操作AST精准插入配置代码的全流程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2022-02-02
我们常说JavaScript原生支持json，因为我们可以认为json就是对JavaScript的Object对象的灵活应用。2010-05-05
这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
本文是司徒正美的《javascript框架设计》一书第一章种子模块的读书笔记，记录了一下自认为比较重要的东西，分享给大家2014-12-12
本篇文章是对ajax请求get与post的区别进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要为大家详细介绍了JS实现简单移动端鼠标拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
js关闭浏览器窗口，不弹出提示框。支持ie6+，火狐，谷歌等浏览器，下面以一个示例为大家详细介绍下具体的实现方法，感兴趣的朋友可以参考下2013-09-09
最新评论