前台js与json格式数据的转换

JSON.stringify(),JSON.parse(),toJSON()方法使用

笔记

1. JSON.stringify(), 将value(Object,Array,String,Number...)序列化为JSON字符串
2. JSON.parse(),　将JSON数据解析为js原生值
3. toJSON(), 作为JSON.stringify中第二个参数(函数过滤器)补充

支持 IE8+,FF3.5+,safari4+,opera10.5+,chrome

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108

* ===================ECMAscript5 全局对象JSON=====================  * Json:只是一种轻量级的数据格式。使用js syntax的子集表示对象、数组、字符串、数值、布尔值、和null  * Note:ECMAScript5 定义了一个原生的JSON对象，         用来将对象序列化为JSON字符串(JSON.stringify())，         或者将JSON数据解析为js对象(JSON.parse())。  * support: IE8+,FF3.5+,safari4+,opera10.5+,chrome  * IE6,7 : https://github.com/douglascrockford/JSON-js */   /*  * JSON.stringify()  * @specify : serialization(序列化)  * @method : JSON.stringify(value,filter,indent);  * @return : JSON字符串    * @param : value {type : String|Object|String|Number|Boolean|null} {explain : 传入的类型可以是列出的這些}  * @param : filter : {type : []|{}} {explain : 过滤器可以是个数组，也可以是个函数}  * @param : indent : {type : Number | 特殊符号} {explain : 如果是数字则代表空白符的个数，最多10个;也可以直接传入缩进的符号} */ var gather = {     id : 1314,     name : 'pom',     infor : {         age : 20,         sex : 'man',         marry : false,         identity : 622421,         habit : ['篮球','台球','乒乓球','游戏',true]     },     family : ['妈妈','爸爸','弟弟'],     likeGames : ['PCgame','Netgame']   }; var jsonText = JSON.stringify(gather,null,4);   //第二个参数是数组，只会序列化返回数组里列出的名称 var jsonText1 = JSON.stringify(gather,['id','family'],'=');   var jsonText2 = JSON.stringify(gather,function(key,val){     switch(key){         case 'id' :             return 'id is ' + val;         case 'family' :             return val.join('@');         case 'infor' :             //infor的val 还可以使用JSON.stringify()             //return JSON.stringify(val,["age","sex"]);             return Object.prototype.toString.call(val).slice(8, -1);         case 'likeGames' :             //通过返回undefined删除该属性             return undefined;         //一定要default,以便传入的其他值能正常的返回到序列化结果中。         default :             return val;     } },10); // console.log(jsonText); // console.log(jsonText1); // console.log(jsonText2)   /*  * toJSON()  * @specify : JSON.stringify()不能满足对某些对象进行自定义序列化的需求，可以通过对象那个上调用toJSON()方法  * @method : date.toJSON()  * @return : 返回任何序列化的值。  *  * JSON.parse() ,eval() 也可以解析 并返回js对象和数组等。但IE8以下浏览器会有安全隐患。  * @specify : 将json字符串解析为原生的javascript值。  * @method : JSON.parse(val,replacer)    * @param : val{type : String} {explain : 需要解析的json字符串}  * @param : replacer {type : function}                      {explain : 和JSON.stringify()第二个参数类似，接受2个参数，key,val,不过是用来还原json串的函数}   */ var products = {     name : "leading",     "time" : new Date(2012,03,1),     toJSON : function(){         //只返回name         return this.name;     } } var proStr = JSON.stringify(products); console.log(proStr);   //obj中的relaeseDate对象序列化之后成了有效的json串 var obj = {     title : '对象的标题',     type : 'primitive' ,     releaseDate : new Date(2012,03,1) }; //转化为json串 var o = JSON.stringify(obj); console.log(o);   //在parsedO中还原为一个Date对象(会基于相应的值创建一个新的Date对象，结果parsedO.releaseDate属性中保存了一个Date对象) var parsedO = JSON.parse(o,function(k,v){     if(k == 'releaseDate'){         return new Date(v);     }else{         return v;     } }); console.log(parsedO); //可以调用getFullYear() console.log(parsedO.releaseDate.getFullYear()); //2012

 执行原理：

    /*
     * toJSON() 作为JSON.stringify中第二个参数(函数过滤器)补充，理解内部顺序很重要。
     * 假设把一个对象传入JSON.stringify() 序列化对象的顺序如下：
     *
     * (1) 如果存在toJSON()方法而且能通过它取得有效的值，则调用该方法。否则，按默认顺序执行序列化
     * (2) 如果提供了第二个参数，应用这个函数过滤器，传入的函数过滤器的值是第(1)步返回的值。
     * (3) 对第(2)步 返回的每个值进行相应的序列化。
     * (4) 如果提供了第三个参数，执行相应的格式化操作。
    */