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

最新推荐文章于 2024-12-25 15:55:26 发布

大鹏的世界

最新推荐文章于 2024-12-25 15:55:26 发布

阅读量727

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨了ECMAScript5全局对象JSON中的JSON.stringify()、JSON.parse()及toJSON()方法，详细介绍了如何将JavaScript对象序列化为JSON字符串，并解析JSON数据回原生JS对象，特别强调了在不同浏览器环境下的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笔记

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

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

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) 如果提供了第三个参数，执行相应的格式化操作。
   */