1、JSON

JSONJavaScript Object Notation)(JavaScript对象表示法是存储和交换文本信息的语法是基于JavaScript的一个子集。数据格式简单易于读写占用带宽小类似 XML,但JSON 比 XML更小、更快,更易解析。

JSON不支持变量、函数、对象实例,只是一种数据的格式。数据在键值对中,数据由逗号分隔。


2、JSON数据类型

(1)简单数据类型:字符串、数值、布尔值,null(不支持JavaScript的 undefined)。

(2)对象:无序的键值对。

(3)数组:有序的值列表。


3、JSON对象与JavaScript对象的不同

(1)属性必须用双引号(最好不要用单引号,可能会出问题)。

(2)末尾无分号。

(3)不支持变量。


4、JSON数组与JavaScript数组的不同

(1)末尾无分号。

(2)不支持变量。

 

5、序列化

(1)JSON.stringify()方法

把JavaScript对象(JSON对象)序列化为JSON字符串的方法。默认情况下,输出的JSON字符串不包含任何空格字符或缩进,同时会忽略JavScript对象的函数和原型对象。

接收3个参数:过滤器、可选的过滤器(可以是函数,也可以是数组)、可选的字符串缩进数。

var person = {
	name: "Alice",
	age: 23,
	adult: true, 
	friends: ["Bruce", "Cindy"]
};
var jsonText1 = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
var jsonText2 = JSON.stringify(person, ["name", "friends"]);//Date对象在序列化后变成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
	case "friends":
		return value.join("|");//按指定分隔符将数组连接成一个字符串
	case "age":
		return value + 1;
	case "adult":
		return undefined;//返回undefined则删除此属性
	default:
		return value;//其他值正常显示
	}
});
var jsonText4 = JSON.stringify(person, null, 4);
alert(jsonText1);//{"name":"Alice","age":23,"adult":true,"friends":["Bruce", "Cindy"]}
alert(jsonText2);//{"name":"Alice","friends":["Bruce", "Cindy"]}
alert(jsonText3);//{"name":"Alice","age":24,"friends":["Bruce|Cindy"]}
alert(jsonText4);
/*
{
	"name":"Alice",
	"age":23,
	"adult":true,
	"friends":[
		"Bruce", 
		"Cindy"
	]
}
*/


(2)toJSON()方法

作为stringify()方法中第2个参数过滤器的补充。stringify()有时不能满足某些对象进行自定义序列化的需求,则给对象定义toJSON()方法。

序列化对象的顺序:

1)若存在toJSON()方法且能通过它取得有效的值,则调用这个方法。否则,返回对象本身。

2)如果提供了第2个参数,应用此函数过滤器,传入函数过滤器的值是第1步返回的值。

3)对第2步返回的每个值进行相应的序列化。

4)如果提供了第3个参数,执行相应的格式化。

var person = {
	name: "Alice",
	age: 23,
	adult: true,
	friends: ["Bruce", "Cindy"],
	toJSON:function(){
		return {"name":"Alice","id":23,"friends":["Bruce", "Cindy"]};
	}
};
var jsonText1 = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
var jsonText2 = JSON.stringify(person, ["adult", "id", "friends"]);//Date对象在序列化后变成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
	case "friends":
		return value.join("|");//按指定分隔符将数组连接成一个字符串
	case "id":
		return value - 1;
	case "age":
		return value + 1;//返回undefined则删除此属性
	default:
		return value;//其他值正常显示
	}
});
var jsonText4 = JSON.stringify(person, null, 4);
alert(jsonText1);//{"name":"Alice", "id":23, "friends":["Bruce", "Cindy"]};
alert(jsonText2);//{"id":23,"friends":["Bruce", "Cindy"]}
alert(jsonText3);//{"name":"Alice","id":22,"friends":["Bruce|Cindy"]}
alert(jsonText4);
/*
{
	"name":"Alice",
	"id":23,
	"friends":[
		"Bruce",
		"Cindy"
	]
}
*/


(3)eval()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第一种方法。

var JSText = eval('(' + '{"name":"Alice", "friends":["Bruce", "Cindy"]}' + ')');
alert(JSText.friends);//Bruce,Cindy 

注意:eval方法只能在非严格模式中进行使用,在use strict中是不允许使用这个方法的。


(4)jQuery.parseJSON()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第二种方法。

需要先引入jQuery的js文件。

var JSText = jQuery.parseJSON('{"name":"Alice", "friends":["Bruce", "Cindy"]}');
alert(JSText.friends);//Bruce,Cindy 

注意:从jQuery 3.0开始,不推荐使用jQuery.parseJSON()方法,要解析JSON字符串,请改用原生的JSON.parse()方法。


(5)JSON.parse()方法

把JSON字符串解析成JavaScript对象(JSON对象)的第三种方法。

接收2个参数:JSON字符串和可选的函数(在每个键值对上调用)。

eg1:

var JSText1 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}');
var JSText2 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}', function(key, value) {
	if (key == "friends")  
        	return value.join("&");  
    	else  
        	return value;  
});  
alert(JSText1.friends);//Bruce,Cindy 
alert(JSText2.friends);//Bruce&Cindy 

注意:第一个参数是JSON字符串,因此JSON对象需要用引号引住。

eg2:

var person = {
	name: "Alice",
	age: 23,
	birthday: new Date(1993, 12, 6)//保存了一个Date对象
};
var jsonText = JSON.stringify(person);//Date对象在序列化后变成了JSON字符串
alert(jsonText);//{"name":"Alice","age":23,"birthday":"1994-01-05T16:00:00:000Z"}
var JSText = JSON.parse(jsonText, function(key, value) {//解析在JSText中还原了Date对象,则JSText.birthdat属性中会保存一个Date对象
	if (key == "birthday")
		return new Date(value);
	else
		return value;
});
alert(JSText.birthday.getFullYear());//1994,已是Date对象,可以调用getFullYear()

本文转载:CSDN博客