（十）javascript高级程序设计: JSON

[Quickeryi]

JSON是当前最流行的数据传输格式

JSON可以表示以下三种类型的值：简单值、对象、数组

JSON对象

早期JSON的解析器是使用eval函数完成的，使用这个方法可能存在恶意代码攻击，对于早期版本可以参考JOSN之父的这个shim:https://github.com/douglascrockford/JSON-js

stringify

• 作用：序列化指定js值
• 注意：当序列化对象值为一个对象时，拿它内部的函数或者undefined会直接忽略
• 参数：
  • arg1：序列化对象值
  • arg2：过滤器，可以为数组或函数
  • arg3：缩进控制[Number|String]，为整数时代表缩进空格数，为字符串时代表缩进占位字符
• demo:

let demo = {
     show: function () {},
     deep: undefined,
     name: 'js',
     author: 'yw',
     year: 2017
};
JSON.stringify(demo, ['name', 'author'],  3);
// output: 
"{
   "name": "js",
   "author": "yw"
}"

// 该函数其实会被调用6次，第一次调用时传入的参数为key: '', value: foo
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
// 第二个参数为函数，针对每一个数值进行处理并返回
var jsonString = JSON.stringify(foo, replacer);
// output："{"week":45,"month":7}"

toJSON

给要序列化的对象定义toJSON方法，从而扩展stringify功能实现更加复杂的自定义序列化功能

• 问题：为何给要序列化的对象定义toJSON方法，可以实现自定义序列化呢？

• 分析：我们这里需要理解调用stringify实现序列化操作的内部顺序，假设现在我们作如下操作JSON.stringify(obj)，那么实际要执行如下操作：

  • step1：如果需要序列化的对象存在toJSON方法，并且通过该方法可以取到有效值，那么调用该方法，否则按默认顺序执行序列化；
  • step2：如果存在第二个参数，则运用这个函数过滤器，并且传入的参数为第一步返回的值；
  • step3：对第二步返回的每一个值进行序列化操作；
  • step4：如果存在第三个参数，则执行相应的格式化。

• demo

var json = {
     name: 'js',
     author: 'yw',
     year: 2017,
     toJSON: function () {
        return 'toJSON';
     }
};
JSON.stringify(json, ['year', 'name']);
// output: "toJSON"

parse

• 作用：将json数据解析为js数据格式
• 参数：
  • arg1：解析的json数据
  • arg2：还原函数，处理每一个键值对，如果返回的值为undefined则表示删除该项
• demo:

var json = {
    name: 'js',
    author: 'yw',
    year: 2017
};
var json_str = JSON.stringify(json);
JSON.parse(json_str, (key, value) => {
    if (key == 'name') {
        return undefined;
    }
    return value;
});// Object {author: "yw", year: 2017}

jsonp

很多人搞不清json与jsonp啥关系，以为jsonp是json的高级扩展，其实从作用来说，两者没有任何关系。json是一种轻量级的数据格式，而jsonp则是一种非标准的的解决跨域的数据传输协议！

补充

关于json.parse这里有一个补充