JavaScript之JSON
一、简介:Json是JavaScript中读取结构化数据更好的方式。因为Json数据可以直接传给eval(),而且不必创建DOM对象。Json是一种数据格式,不是一种编程语言,虽然具有相同的语法形式,带Json并不从属于JavaScript.而且,并不是只有JavaScript才使用Json,毕竟Json只是一种数据格式。很多编程语言都有针对Json的解析器和序列化器。
二、语法
Json的语法可以表示一下三种类型的值
1、简单值:使用与JavaScript相同的语法,可以在Json中表示字符串、数值、布尔值和null。注意:Json不支持JavaSciprt中的特殊值:undefined。
2、对象:对象作为一种复杂的数据类型,表示的是一组无序的键值对儿。而每个键值对中的值可以是简单值,也可以是复杂数据类型的值。
3、数组:数组也是一种复杂的数据类型,表示一组有序的值的列表,可以通过数值索引来访问其中的值。数组的值也可以是简单值、对象、数组。
2.1 简单值
简单值在Json中的表示可以是字符串、数值、布尔值和null!
注意:上面这些数据都和JavaScript中一样,只有字符串,在Js中字符串可以用单引号表示,但是在Json中字符串使用单引号会报错!
2.2 对象
Js中的对象,代码如下:
var person={
name:"张三",
age:23
};
var person={
"name":"张三",
"age":23
};
在JS中上面两种方法都可以表示对象,但是在Json中没有变量的概念。其次,没有末尾的分号(因为这不是JavaScipt语句,所以也不需要分号),
所以在Json的对象中,对象的属性必须是字符串(也就是说要加双引号),属性的值可以是简单值,数组,对象,所以在Json中的对象表现形式如下:
{
"name":"张三",
"age":23
}
注意:对象的属性名必须加双引号!
三、Json的解析与序列化
JSON之所以流行,拥有与JavaScript类似的语法并不是全部的原因,更重要的原因是,可以把Json数据结构解析为有用的JavaScipt对象。与XML数据解析成DOM文档而且从中提取数据麻烦相比,JSON可以解析为JavaScript对象的优势十分明显!代码如下:
[
{"title":"book_one",
"year":"2016"
},
{"title":"book_two",
"year":"2015"
},
{"title":"book_three",
"year":"2015"
},
]
下面需要取得第三本书的名字,通过Json转换为JavaScript对象的方式获取
books[2].title
通过XML解析成DOM元素,在获取:
document.getElementsByTagName("book")[2].getAttribute("title");
比较两种方法,就知道Json为什么会得到JavaSciprt开发人员的欢迎了!
早期的JSON解析器基本上是使用JavaScipt的eval()函数。由于Json是JavaScript语法的子集,因此eval()函数可以解析、解释并返回JavaScript对象和数组。在旧版本的浏览器中,使用Eval()对JSON数据结构求值存在风险,可能会执行一些恶意代码。对于不能支持原生JSON解析的浏览器,使用shim是最佳选择。地址: shim:https://github.com/douglascrockford/JSON-js;
3.1 JSON对象
ECMAScript 对解析JSON的行为进行了了规范,定了全局对象JSON;
支持两个方法:stringify()和parse()。在最简单的情况下,这两个方法风别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值。
1、stringify()
var book={
title:"book_title",
authors:["张三","李四"],
edition:3,
year:2016
}
var jsonText=JSON.stringify(book);
alert(jsonText);
输出:{"title":"book_title","authors":["张三","李四"],"edition":3,"year":2016}
这里需要注意,在默认情况下(也就是不提供第三个参数的情况下)JSON.stringify()输出的JSON字符串不包含任何的空格字符或缩进,但是如果你提供第三个参数,就是JSON字符串添加字符缩进的话,那么所返回的JSON字符串就会产生缩进,代码如下:
var book={title:"book_title",authors:["张三","李四"],edition:3,year:2016}
var jsonText=JSON.stringify(book,null,4);
alert(jsonText);
输出图如下:
结合上面没有提供第三个参数的情况下,发现给stringify()提供第三个参数的情况下,在每个级别上增加了4个空格,增加了JSON字符串的可读性!
还有一种情况,如下:
var book={title:"book_title",authors:["张三","李四"],edition:3,year:2016}
var jsonText=JSON.stringify(book,null,"--");
alert(jsonText);
输出图如下:
发现给stringify()提供第三个参数的情况下且为字符串的情况,它会解析字符串的长度,并在每个级别上增加了(字符串长度)个字符串!
JSON.stringify()除了接收第一个参数(要序列化的JavaScript对象外),还可以接收另外两个参数,这两个参数用于指定以不同的方式序列化JavaScript对象。第一个参数是过滤器,可以是一个数组,也可以是一个函数,第二个参数是一个数值或者字符串,用于表示是否在JSON字符串中保留缩进(这个参数在上面已经介绍了),下面是关于stringify()方法的过滤器参数,代码如下:
var book={title:"book_title",authors:["张三","李四"],edition:3,year:2016}
var jsonText=JSON.stringify(book,function(key,value){
switch (key){
case"authors":return value.join("$$")
case"edition":return 3+" version"
case"year":return "2016-10-19"
default:return value;
}
});
alert(jsonText);
输出图:
当stringify使用第二个参数时,有一个特殊情况,代码如下:
var book={title:"book_title",authors:["张三","李四"],edition:3,year:2016}
var jsonText=JSON.stringify(book,function(key,value){
switch (key){
case"authors":return value.join("$$")
case"edition":return undefined
case"year":return "2016-10-19"
default:return value;
}
});
alert(jsonText);
输出图:
当给edition属性赋了undefined值的时候,JSON.stringify()返回JSON字符串对象时,去除了属性值为undefined的属性!
有时候,JSON.stringify()还不能满足对某些对象进行自定义序列化的需求。在这些情况下,可以给对象定义toJSON()方法,返回其自身的JSON格式数据。原生的Date对象有一个toJSON()方法,能够将JavaScript的Date对象自动转换为日期字符串,代码如下:
var book={title:"book_title",authors:["张三","李四"],edition:3,year:2016,toJSON:function(){
return this.title;
}}
var jsonText=JSON.stringify(book);
alert(jsonText);
输出图:
根据这个输出,和上面所有JSON.stringify()方法的输出我们总结出一个规律,那就是:
JSON.stringify()的序列化顺序如下:
(1)如果被序列化的对象存在toJSON()方法而且能通过它取得有效的值,则调用该方法,如果该方法取不到有效的值,则返回对象本身。
(2)如果提供了第二个参数,应用这个函数过滤器。传入函数过滤器的值是第(1)步返回的值。
(3)对第(2)步返回的值进行序列化。
(4)如果提供了第三个参数,则按照对三个参数,对对象执行相应的格式化
2、parse()
var book={
title:"book_title",
authors:["张三","李四"],
edition:3,
year:2016
}
var jsonText=JSON.stringify(book);
alert(JSON.parse(jsonText));
输出:[object Object] ,firebug截图,监视查看对象如图:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaWeb——Maven基础之详细总结,从零开始搭建Maven工程,包含一些常见的坑org.eclipse.jdt.internal.compiler.classfmt.ClassFormatEx
- JavaWeb——Redis数据库之Jedis操作5种类型数据的使用总结与前端Ajax获取Redis缓存数据的案例实战(结合了MySQL数据库)
- Java——数据库编程JDBC之快速入门吐血总结及各关键对象详解(提供了JDBCUtils工具类)
- MySQL数据库——事务的操作(开启、回滚、提交)、特征、隔离级别基础总结
- MySQL数据库——数据库的设计(多表之间的关系与三大范式)与备份还原
- JavaWeb——JSP入门学习(JSP基本概念、JSP脚本、JSP内置对象)
- MySQL数据库——数据库CRUD之基本DML增删改表操作及DQL查表操作
- JavaWeb——AJAX异步技术实现方式与案例实战(原生的JS方式、使用JQuery方式)
- JavaWeb——一文带你入门Servlet(生命周期、注解配置方法、IDEA与tomcat的相关配置)
- JavaWeb——JQuery之基础案例实战(实现表格隔行换色、实现全选全不选、QQ表情选择、下拉列表选中条目左右选择功能)
- JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)
- JavaWeb——Filter过滤器快速入门与是否登录验证&过滤敏感词汇案例实战(Filter配置方式、执行流程、生命周期方法、过滤器链)
- JavaWeb——会话技术之Session快速入门与验证码登录案例实战(Session实现原理、使用细节、快速入门、Session的特点)
- Nginx配置文件服务器
- JavaWeb——会话技术之Cookie快速入门与案例实战(详细讲解了Cookie实现原理、Cookie使用细节、Cookie的特点及作用)