JSON 细微探究

转自 https://apriltail.com/2017/03/25/json-ru-guo-ni-yuan-yi-yi-ceng-yi-ceng-bo-kai-wo-de-xin-ni-hui-fa-xian-zhe-li-shui-hen-shen-shen-ru-li-jie-json/ 原文有删改

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

---

• 先从一个问题开始：

var friend={  
    firstName: 'Good',
    'lastName': 'Man',
    'address': undefined,
    'phone': ["1234567",undefined],
    'fullName': function(){
        return this.firstName + ' ' + this.lastName;
    }
};

复制粘贴到浏览器控制台上，按下回车键，将会输出以下的字符串：

{"firstName":"Good","lastName":"Man","phone":["1234567",null]}

可以看到，函数fullName 被完全忽略，phone 数组的第二项undefined 变成了 null

• 一般的说法，JSON(JavaScript Object Notation) 是 JavaScript 的一个子集，不过这二者之间还是有些区别的。

对比内容	JSON	JavaScript 对象
键名	必须是加双引号	可以不加、加单引号、加双引号
属性值	只能是数值(10进制)、字符串（双引号）、布尔值、null、数组、以及符合JSON要求的对象 不能是函数(function)、NAN、Infinity、-Infinity、undefined	爱啥啥
逗号	最后一个属性值后面不能有逗号，否则报错	可以
数值	前导0不能用，小数点后必须有数字	没限制

• 关于 JSON 的三个函数

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

一共有三个参数，第一个参数为基本使用法，就不说了，第二个参数可以是函数，也可以是一个数组

1. 如果第二个参数是一个函数，那么序列化过程中的每个属性都会被这个函数转化和处理
2. 如果第二个参数是一个数组，那么只有包含在这个数组中的属性才会被序列化到最终的JSON字符串中
3. 如果第二个参数是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
});

var otherfriend = ['Jack',"Rose'];

JSON.stringify(otherfriend,function(k,v){
    console.log(k,v)
})
// 输入一个 Array数组：["Jack", "Rose"]

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. 是1-10的某个数字，代表用几个空白字符

2. 是字符串的话，就用该字符串代替空格，最多取这个字符串的前10个字符

3. 没有提供该参数 等于 设置成null 等于 设置一个小于 1 的数

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

//直接转化是这样的：
//{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":"7654321"}}

var friendAfter=JSON.stringify(friend,null,4);  
console.log(friendAfter);  
/*
{
    "firstName": "Good",
    "lastName": "Man",
    "phone": {
        "home": "1234567",
        "work": "7654321"
    }
}
*/

var friendAfter=JSON.stringify(friend,null,"HAHAHAHA");  
console.log(friendAfter);  
/*
{
HAHAHAHA"firstName": "Good",  
HAHAHAHA"lastName": "Man",  
HAHAHAHA"phone": {  
HAHAHAHAHAHAHAHA"home": "1234567",  
HAHAHAHAHAHAHAHA"work": "7654321"  
HAHAHAHA}  
}
*/

var friendAfter=JSON.stringify(friend,null,"WhatAreYouDoingNow");  
console.log(friendAfter);  
/* 最多只取10个字符
{
WhatAreYou"firstName": "Good",  
WhatAreYou"lastName": "Man",  
WhatAreYou"phone": {  
WhatAreYouWhatAreYou"home": "1234567",  
WhatAreYouWhatAreYou"work": "7654321"  
WhatAreYou}  
}
*/

JSON.stringify 还会 “自作聪明”地做些额外的事情：

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

JSON.stringify({x: undefined, y: function(){return 1;}, z: Symbol("")});  
//出现在非数组对象的属性值中被忽略："{}"
JSON.stringify([undefined, Object, Symbol("")]);  
//出现在数组对象的属性值中，变成null："[null,null,null]"

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，而遍历的原则也是一样的，等这个复合属性遍历完成，那么再完成对这个属性的遍历返回。

有两点需要注意：

1. 如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。
2. 你可以注意到上面例子最后一组输出看上去没有key，其实这个key是一个空字符串，而最后的object是最后解析完成对象，因为到了最上层，已经没有真正的属性了。

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);  
//出si了，返回的是：'"{"msg":"Go Die"}"',说好的忽略函数呢

其实Date类型可以直接传给JSON.stringify做参数，其中的道理就是，Date类型内置了toJSON方法。