基于文本，优于轻量，用于交换数据——json解析(下篇)

通过上篇内容，我们已经一层一层剥开了json这颗洋葱，这期我们将对JS和json最后得关系开展话题，结束此次json解析之旅。

一、这几个JS中的JSON函数，what？

在JS中我们主要会接触到两个和JSON相关的函数，分别用于JSON字符串和JS数据结构之间的转化：

一个叫JSON.stringify，它很机智，机智到你写的不符合JSON格式的JS对象都能帮你处理成符合JSON格式的字符串，所以你得知道它到底干了什么，免得它只是自作聪明，然后让你Debug long time；

另一个叫JSON.parse，用于转化json字符串到JS数据结构，它很严格，你的JSON字符串如果构造地不对，是没办法解析的。

而它们的参数不止一个，虽然我们经常用的时候只传入一个参数。

此外，还有一个toJSON函数，我们较少看到，但是它会影响JSON.stringify。

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

这个函数的函数签名是这样的：

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

下面将分别展开带1~3个参数的用法，最后是它在序列化时做的一些“机智”的事，要特别注意。

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

这个大家都会使用，传入一个JSON格式的JS对象或者数组，JSON.stringify({“name”:”Good Man”,”age”:18})返回一个字符串”{“name”:”Good Man”,”age”:18}”。

可以看到本身我们传入的这个JS对象就是符合JSON格式的，用的双引号，也没有JSON不接受的属性值，那么如果像开头那个例子中的一样，how to play？不急，我们先举简单的例子来说明这个函数的几个参数的意义，再来说这个问题。

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":"[phone]","age":28}

如果制定了第二个参数是函数，那么这个函数必须对每一项都有返回，这个函数接受两个参数，一个键名，一个是属性值，函数必须针对每一个原来的属性值都要有新属性值的返回。

那么问题来了，如果传入的不是键值对的对象形式，而是方括号的数组形式呢？，比如上面的friend变成这样：friend=[“Jack”,”Rose”]，那么这个逐属性处理的函数接收到的key和value又是什么？如果是数组形式，那么key是索引，而value是这个数组项，你可以在控制台在这个函数内部打印出来这个key和value验证。

这第二个参数若是数组

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”由于没有在原来的对象中找到而被忽略

如果第二个参数是一个数组，那么只有在数组中出现的属性才会被序列化进结果字符串，只要在这个提供的数组中找不到的属性就不会被包含进去，而这个数组中存在但是源JS对象中不存在的属性会被忽略，不会报错。

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

指定缩进用的空白字符，可以取以下几个值：

• 是1-10的某个数字，代表用几个空白字符
• 是字符串的话，就用该字符串代替空格，最多取这个字符串的前10个字符
• 没有提供该参数 等于 设置成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}}*/

博主想说如果你真想这么用，我绝对不会拦你，哈哈，序列化是为了传输，传输就是能越小越好，加莫名其妙的缩进符，解析困难（如果是字符串的话），也弱化了轻量化这个特点。

1.4 注意这个函数的“机智”（重要）

如果有其他不确定的情况，那么最好的办法就是”Have a try”，控制台做下实验就明了。

• 键名不是双引号的（包括没有引号或者是单引号），会自动变成双引号；字符串是单引号的，会自动变成双引号
• 最后一个属性后面有逗号的，会被自动去掉
• 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中
  这个好理解，也就是对非数组对象在最终字符串中不保证属性顺序和原来一致
• 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值
  也就是你的什么new String(“bala”)会变成”bala”，new Number(2017)会变成2017
• undefined、任意的函数（其实有个函数会发生神奇的事，后面会说）以及 symbol 值（symbol详见ES6对symbol的介绍）
• 出现在非数组对象的属性值中：在序列化过程中会被忽略
• 出现在数组中时：被转换成 null

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

• NaN、Infinity和-Infinity，不论在数组还是非数组的对象中，都被转化为null
• 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们
• 不可枚举的属性会被忽略

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

这个函数的函数签名是这样的：

JSON.parse(text[, reviver])  

如果第一个参数，即JSON字符串不是合法的字符串的话，那么这个函数会抛出错误，所以如果你在写一个后端返回JSON字符串的脚本，最好调用语言本身的JSON字符串相关序列化函数，而如果是自己去拼接实现的序列化字符串，那么就尤其要注意序列化后的字符串是否是合法的，合法指这个JSON字符串完全符合JSON要求的严格格式。

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

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

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

这个函数就是酱紫的。

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

结语

到这里终于把，JSON和JS中的JSON，梳理了一遍，贼鸡儿累，也对里面的细节和注意点进行了一次遍历，知道JSON是一种语法上衍生于JS语言的一种轻量级的数据交换格式，也明白了JSON相对于一般的JS数据结构（尤其是对象）的差别，更进一步，仔细地讨论了JS中关于JSON处理的3个函数和细节。

不过遗憾的是，以上所用的3个函数，不兼容IE7以及IE7之前的浏览器。有关兼容性的讨论，留待之后吧。如果想直接在应用上解决兼容性，那么可以套用JSON官方的js，可以解决。

如有纰漏，欢迎留言指出。我们不止会New！