浅谈JSON与与JS相关的JSON函数

本文内容主要引用在微信公众号上看到的一片文章，因为自己对Json了解不是很深入，所以就整理出这篇博文与大家分享！

一、 JSON是一种格式，基于文本，优于轻量，用于交换数据

1.一种数据格式

数据的传递是一样的，但是你可以看到形式是可以各式各样的，这就是各种不同格式化后的数据，JSON是其中一种表示方式。

2.基于文本的数据格式

JSON是基于文本的数据格式，相对于基于二进制的数据，所以JSON在传递的时候是传递符合JSON这种格式(至于JSON的格式是什么我们第二部分再说)的字符串，我们常会称为“JSON字符串”。

3.轻量级的数据格式

在JSON之前，有一个数据格式叫 xml，现在还是广泛在用，但是JSON更加轻量，如 xml需要用到很多标签，像上面的例子中，你可以明显看到 xml格式的数据中标签本身占据了很多空间，而JSON比较轻量，即相同数据，以JSON的格式占据的带宽更小，这在有大量数据请求和传递的情况下是有明显优势的。

4.被广泛地用于数据交换

轻量已经是一个用于数据交换的优势了，但更重要的JSON是易于阅读、编写和机器解析的，即这个JSON对人和机器都是友好的，而且又轻，独立于语言（因为是基于文本的），所以JSON被广泛用于数据交换。

以前端JS进行ajax的POST请求为例，后端PHP处理请求为例：

前端构造一个JS对象，用于包装要传递的数据，然后将JS对象转化为JSON字符串，再发送请求到后端；
后端PHP接收到这个JSON字符串，将JSON字符串转化为PHP对象，然后处理请求。

可以看到，相同的数据在这里有3种不同的表现形式，分别是前端的JS对象、传输的JSON字符串、后端的PHP对象，JS对象和PHP对象明显不是一个东西，但是由于大家用的都是JSON来传递数据，大家都能理解这种数据格式，都能把JSON这种数据格式很容易地转化为自己能理解的数据结构，这就方便啦，在其他各种语言环境中交换数据都是如此。

二、 JSON和JS对象之间的“八卦”

1. 两个本质不同的东西为什么那么密切

"JSON"全名"JavaScript Object Notation"，所以它的格式（语法）是基于JS的，但它就是一种格式，而JS对象是一个实例，是存在于内存的一个东西。

此外，JSON是可以传输的，因为它是文本格式，但是JS对象是没办法传输的，在语法上，JSON也会更加严格，但是JS对象就很松了。那么两个不同的东西为什么那么密切，因为JSON毕竟是从JS中演变出来的，语法相近。

2. JSON格式别JS对象语法表现上严格在哪

键名： JSON必须加双引号，JS对象可允许不加、加单引号、加双引号
属性值： JSON只能是数值（10进制）、字符串（双引号）、布尔值和null，也可以是数组或者符合JSON要求的对象，不能是函数、NaN, Infinity, -Infinity和undefined。
数值： JSON前导0不能用，小数点后必须有数字，JS无限制。

3. 一个有意思的地方，JSON不是JS的子集

var code = '"\u2028\u2029"';
JSON.parse(code); // works fine
eval(code); // fails

上述代码这两个字符 \u2028和 \u2029分别表示行分隔符和段落分隔符，JSON.parse可以正常解析，但是当做js解析时会报错。

三、 JS中与JSON相关的几个函数

1. 将JS数据结构转化为JSON字符串 —— JSON.stringify

JSON.stringify(value[, replacer [, space]])

**1.1** 基本使用 —— 仅需一个参数

 JSON.stringify({"name":"Good Man","age":18})返回一个字符串 "{"name":"GoodMan","age":18}"。

1.2 第二个参数可以是函数，也可以是一个数组

如果第二个参数是一个函数，那么序列化过程中的每个属性都会被这个函数转化和处理。
如果第二个参数是一个数组，那么只有包含在这个数组中的属性才会被序列化到最终的JSON字符串中。
如果第二个参数是null，那作用上和空着没啥区别，但是不想设置第二个参数，只是想设置第三个参数的时候，就可以设置第二个参数为null。

** 第二个参数为函数**

var friend={
	"firstName": "Good",
	"lastName": "Man",
	"phone":"1234567",
	"age":18
};

var friendAfter=JSON.stringify(friend,function(key,value){
	if(key==="phone")
 	    return "(000)"+value;
	else if(typeof value === "number")
    	return value + 10;
	else return value; //如果你把这个else分句删除，那么结果会是undefined
});

console.log(friendAfter);//输出：{"firstName":"Good","lastName":"Man","phone":"(000)1234567","age":28}

这第二个参数若是数组

var friend={
	"firstName": "Good",
	"lastName": "Man",
	"phone":"1234567",
	"age":18
};
//注意下面的数组有一个值并不是上面对象的任何一个属性名
var friendAfter=JSON.stringify(friend,["firstName","address","phone"]);
console.log(friendAfter);//{"firstName":"Good","phone":"1234567"}
//指定的“address”由于没有在原来的对象中找到而被忽略

1.3 第三个参数用于美化输出，不建议使用

1.4 注意事项（重要）

键名不是双引号的（包括没有引号或者是单引号），会自动变成双引号；字符串是单引号的，会自动变成双引号
最后一个属性后面有逗号的，会被自动去掉
非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中
这个好理解，也就是对非数组对象在最终字符串中不保证属性顺序和原来一致
布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值，也就是你的什么new String("bala")会变成"bala"，new Number(2017)会变成2017
undefined、任意的函数以及 symbol 值（symbol详见ES6对symbol的介绍）出现在非数组对象的属性值中：在序列化过程中会被忽略出现在数组中时：被转换成 null
NaN、Infinity和-Infinity，不论在数组还是非数组的对象中，都被转化为null
所有以 symbol 为属性键的属性都会被完全忽略掉，即便replacer 参数中强制指定包含了它们
不可枚举的属性会被忽略

**2. 将JSON字符串解析为JS数据结构 —— JSON.parse**

JSON.parse(text[, reviver])

值得注意的是这里有一个可选的第二个参数，这个参数必须是一个函数，这个函数作用在属性已经被解析但是还没返回前，将属性处理后再返回。

var friend={
	"firstName": "Good",
	"lastName": "Man",
	"phone":{"home":"1234567","work":["7654321","999000"]}
};

//我们先将其序列化
var friendAfter=JSON.stringify(friend);
//'{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":["7654321","999000"]}}'

//再将其解析出来，在第二个参数的函数中打印出key和value
JSON.parse(friendAfter,function(k,v){
	console.log(k);
	console.log(v);
	console.log("----");
});
/*
firstName
Good
----
lastName
Man
----	
home
1234567
----
0
7654321
----
1
999000
----
work
[]
----
phone
Object
----

Object
----
*/

仔细看一下这些输出，可以发现这个遍历是由内而外的，可能由内而外这个词大家会误解，最里层是内部数组里的两个值啊，但是输出是从第一个属性开始的，怎么就是由内而外的呢？

这个由内而外指的是对于复合属性来说的，通俗地讲，遍历的时候，从头到尾进行遍历，如果是简单属性值（数值、字符串、布尔值和null），那么直接遍历完成，如果是遇到属性值是对象或者数组形式的，那么暂停，先遍历这个子JSON，而遍历的原则也是一样的，等这个复合属性遍历完成，那么再完成对这个属性的遍历返回。

本质上，这就是一个深度优先的遍历。

注意：如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。

3. 影响 JSON.stringify 的神奇函数 —— object.toJSON

如果你在一个JS对象上实现了toJSON方法，那么调用JSON.stringify去序列化这个JS对象时，JSON.stringify会把这个对象的toJSON方法返回的值作为参数去进行序列化。

var info={
	"msg":"I Love You",
	"toJSON":function(){
    	var replaceMsg=new Object();
    	replaceMsg["msg"]="Go Die";
    	return replaceMsg;
	}
};

JSON.stringify(info);
//返回的是：'"{"msg":"Go Die"}"'

### 引用文章：

posted @ 2017-09-15 15:45 Lorin-Yang 阅读(5273) 评论(0) 编辑收藏举报

刷新页面返回顶部

秋裤布里克

浅谈JSON与与JS相关的JSON函数

一、 JSON是一种格式，基于文本，优于轻量，用于交换数据

二、 JSON和JS对象之间的“八卦”

三、 JS中与JSON相关的几个函数

公告