JSON.stringify() 和 JSON.parse()

最新推荐文章于 2023-11-14 17:30:01 发布

ssisse

最新推荐文章于 2023-11-14 17:30:01 发布

阅读量966

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

99 篇文章 2 订阅

订阅专栏

JSON.stringify() 方法

在json 的使用中，把一个对象通过 stringify 之后提交给后台或者存储在Storage 里是很常用的手段.

语法：
　　JSON.stringify(value [, replacer] [, space])

(1)value：是必选字段。就是你输入的对象，比如数组，类等。

(2)replacer：这个是可选的。它又分为2种方式，一种是数组，第二种是方法。

　　如果这种形式的话，如果第二个的值在第一个存在，那么的话就以第二个的值做key，第一个值为value进行表示。

情况一：replacer为数组时，通过后面的实验可以知道，它是和第一个参数value有关系的。一般来说，系列化后的结果是通过键值对来进行表示的。所以，如果此时第二个参数的值在第一个存在，那么就以第二个参数的值做key，第一个参数的值为value进行表示，如果不存在，就忽略。

　　情况二：replacer为方法时，那很简单，就是说把系列化后的每一个对象（记住是每一个）传进方法里面进行处理。

(3)space：就是用什么来做分隔符的。

　　1）如果省略的话，那么显示出来的值就没有分隔符，直接输出来。
　　2）如果是一个数字的话，那么它就定义缩进几个字符，当然如果大于10 ，则默认为10，因为最大值为10。
　　3）如果是一些转义字符，比如“\t”，表示回车，那么它每行一个回车。
　　4）如果仅仅是字符串，就在每行输出值的时候把这些字符串附加上去。当然，最大长度也是10个字符。

参数

value

必需。要转换的 JavaScript 值（通常为对象或数组）。

replacer

可选。用于转换结果的函数或数组。

如果replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当value 参数也为数组时，将忽略 replacer 数组。

space

可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。

如果省略space，则将生成返回值文本，而没有任何额外空格。

如果space 是一个数字，则返回值文本在每个级别缩进指定数目的空格。如果space 大于 10，则文本缩进 10 个空格。

如果space 是一个非空字符串（例如“\t”），则返回值文本在每个级别中缩进字符串中的字符。

如果space 是长度大于 10 个字符的字符串，则使用前 10 个字符。

返回值

一个对象或数组。

实例；

1.只有一个参数的情况下：

var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student);
alert(student);

结果如下:

有些人可能会怀疑JSON.stringify的作用，OK。那假如，我们不要这个函数。代码下面的样子：

var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";

// var json = JSON.stringify(student);
alert(student);

得到的结果是：

2.第二个参数存在，并且第二个参数还是function的时候

var students = new Array() ;
students[0] = "Lanny";
students[1] = "dong";
students[2] = "I love you";
var json = JSON.stringify(students,switchUpper);
function switchUpper(key, value) {
return value.toString().toUpperCase();
}
alert(json);

//var json = JSON.stringify(students, function (key,value) {
//return value.toString().toUpperCase();
//});

上面的方法也可以换成下面的，2个都是一样，只是写法有那么一点点的不一样而已。
得到结果如下：

3.第二个参数存在，并且第二个参数不是function，而是数组的时候。
3.1 【误区】如果第一个参数是数组，第二个参数也是数组的话，只显示第一个参数的值。

var students = new Array() ;
students[0] = "Lanny";
students[1] = "dong";
students[2] = "I love you";
var stu = new Array();
stu[0] = "1";
stu[1] = "2";
var json = JSON.stringify(students,stu);
alert(json);

得到的结果是：

第二个被忽略了，只是第一个被系列化了。

3.2 如果第一个是对象（这里说的对象就像在C#里面可以进行new的），第二个是数组的。

那么如果第二个的value在第一个存在，那么的话就以第二个的值做key，第一个值为value进行表示

var student = new Object();
student.qq = "5485891512";
student.name = "Lanny";
student.age = 25;

var stu = new Array();
stu[0] = "qq";
stu[1] = "age";
stu[2] = "Hi";//这个student对象里不存在。

var json = JSON.stringify(student,stu);
alert(json);

得到的结果如下：

因为stu[2] = "Hi";这个Hi 在第一个找不到，所以就不进行显示了。

另外一个类似的例子：

var contact = new Object(); 
contact.firstname = "Jesper"; 
contact.surname = "Aaberg"; 
contact.phone = ["555-0100", "555-0120"]; 
 
var memberfilter = new Array(); 
memberfilter[0] = "surname"; 
memberfilter[1] = "phone"; 
var jsonText = JSON.stringify(contact, memberfilter, "\t"); 
document.write(jsonText);

输出结果：

{ "surname": "Aaberg", "phone": [ "555-0100", "555-0120" ] }

4.第三个参数

4.1.如果省略的话，那么显示出来的值就没有分隔符。直接输出来

var student = new Object();
student.qq = "5485891512";
student.name = "Lanny";
student.age = 25;

var stu = new Array();
stu[0] = "qq";
stu[1] = "age";
stu[2] = "Hi";

var json = JSON.stringify(student,stu);
alert(json);

4.2.如果是一个数字的话，那么它就定义缩进几个字符，当然如果大于10 ，则最大值为10.

var student = new Object();
student.qq = "5485891512";
student.name = "Lanny";
student.age = 25;

var stu = new Array();
stu[0] = "qq";
stu[1] = "age";
stu[2] = "Hi";

var json = JSON.stringify(student,stu,100);//注意这里的100
alert(json);

那么得到的是：

空开来了10个字符。

4.3.如果是一些转义字符，比如“\t”，表示回车，那么它每行一个回车。

也是一样。

4.4.如果仅仅是字符串，OK，就在每行输出值的时候把这些字符串附加上去就OK。当然，最大长度也是10个字符。

如果是var json = JSON.stringify(student,stu,“HaiKou”);//

JSON.parse() 方法

JSON.parse()与JSON.stringify()相反，JSON.parse() 将 JSON 字符串转换为对象。

语法

JSON.parse(text [, reviver])

参数

text

必需。一个有效的 JSON 字符串。

reviver

可选。一个转换结果的函数。将为对象的每个成员调用此函数。如果成员包含嵌套对象，则先于父对象转换嵌套对象。对于每个成员，会发生以下情况：

如果reviver 返回一个有效值，则成员值将替换为转换后的值。
如果reviver 返回它接收的相同值，则不修改成员值。
如果reviver 返回null 或 undefined，则删除了该成员。

示例

（1）以下示例使用JSON.parse 将 JSON 字符串转换成对象。

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname);
document.write(contact.phone[1]);
// Output:
// Aaberg, Jesper
// 555-0100<span style="font-family:SimSun;font-size:14px;"><span id="mt21" class="sentence"></span></span>

（2）以下示例演示了如何使用JSON.stringify 将数组转换成 JSON 字符串，然后使用JSON.parse 将该字符串重新转换成数组。

var arr = ["a", "b", "c"];
var str = JSON.stringify(arr);
document.write(str);
document.write ("<br/>");

var newArr = JSON.parse(str);

while (newArr.length > 0) {
    document.write(newArr.pop() + "<br/>");
}


// Output:
// ["a","b","c"]
// c
// b
// a<span style="font-family:SimSun;font-size:14px;"><span id="mt22" class="sentence"></span></span>

（3）reviver 函数通常用于将国际标准化组织 (ISO) 日期字符串的 JSON 表示形式转换为协调世界时 (UTC) 格式日期对象。此示例使用 JSON.parse 来反序列化 ISO 格式的日期字符串。dateReviver 函数为格式为 ISO 日期字符串的成员返回Date 对象。

 
     var jsontext = '{ "hiredate": "2008-01-01T12:00:00Z", "birthdate": "2008-12-25T12:00:00Z" }';
var dates = JSON.parse(jsontext, dateReviver);
document.write(dates.birthdate.toUTCString());

function dateReviver(key, value) {
    var a;
    if (typeof value === 'string') {
        a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
        if (a) {
            return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
                            +a[5], +a[6]));
        }
    }
    return value;
};

// Output:
// Thu, 25 Dec 2008 12:00:00 UTC

 
    

JSON对象有两个方法：stringify()和parse()。在最简单的情况下，这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript

在序列化JavaScript对象时，所有函数及原型成员都会被有意忽略，不体现在结果中。此外，值为undefined的任何属性也都会被跳过。结果中最终都是值为有效JSON数据类型的实例属性。

JSON.stringify()除了要序列化的js对象外，还可以接收另外两个参数，这两个参数用于指定不同方式序列化js对象。第一个参数是过滤器，可以使一个数组，也可以是一个函数；第二个参数是一个选项，表示是否在JSON字符串中保留缩进。单独或组合使用这两个参数，可以更全面深入地控制JSON的序列化。
1、过滤结果
如果过滤器参数是数组，那么JSON.stringify()的结果中将只包含数组中列出的属性。如：

<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
age:12, 
grade:3, 
id:"0802020114" 
}; 
var jsonText=JSON.stringify(student,["name","id"]); 
} 
</script> 
</head> 
<body> 
<input type="button" οnclick="init()" value="测试" /> 
</body>

jsonText的值为
{"name":"Bill","id":"802020114"}

如果第二个参数是函数，行为会有一点不同。传入的函数接收两个参数，属性（键）名和属性值。根据属性（键）名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串。
为了改变序列化对象的结果，函数返回的值就是相应键的值。不过要注意，如果函数返回了undefined，那么相应的属性会被忽略。如：

<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
age:12, 
grade:3, 
id:"0802020114", 
subject:["math","Chinese","English"] 
}; 
var jsonText=JSON.stringify(student,jsonConvert); 
} 
function jsonConvert(key,value) 
{ 
switch (key) 
{ 
case "name": 
return "Lily"; 
case "grade": 
return undefined; 
case "subject": 
return value.join(","); 
default : 
return value; 
} 
} 
</script> 
</head> 
<body> 
<input type="button" οnclick="init()" value="测试" /> 
</body>

上面的jsonText的值如下：
{"name":"Lily","age":12,"id":"0802020114","subject":"math,Chinese,English"}
这里函数过滤器根据传入的键来决定结果。如果键为name，就将其值设置为Lily；如果为grade就返回undefined来删除该属性；如果为subject，它是一个数组，就将它通过数组方法join()转化为以逗号连接的字符串。最后一定要提供default项，使其他的值都能够正常出现在结果中，不然就会出错，没有结果。实际上，第一次调用这个函数过滤器，传入的键是一个空字符串，而值就是student对象。在内部是按顺序遍历每一个对象每一个属性，所以公开key,value函数方法需要注意你的函数只有着两个参数才能起效，要理解函数的目的，就是在内部机制遍历每一个属性的时候让你来修改部分结果，并且是一次遍历每一个对象，这样在序列化对象中每一个对象都要经过过滤器。

2、字符串缩进
JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。如果这个参数是一个数值，那么它表示的是每个级别缩进的空格数。如：

<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
age:12, 
grade:3, 
id:"0802020114", 
subject:["math","Chinese","English"] 
}; 
var jsonText=JSON.stringify(student,null,8); 
} 
</script> 
</head> 
<body> 
<input type="button" οnclick="init()" value="测试" /> 
</body>

保存在jsonText中的字符串为：
{
"name": "Bill",
"age": 12,
"grade": 3,
"id": "0802020114",
"subject": [
"math",
"Chinese",
"English"
]
}

JSON.stringify()在结果字符串中插入了换行符以提高可读性。只要传入有效的控制缩进的参数值，结果字符串就会包含换行符（只缩进而不换行意义不大）。最大缩进空格数位10，所有大于10的值都会自定转换为10。如果缩进参数是一个字符串而非数值，则这个字符串将在JSON字符串中被用作缩进字符（不再使用空格）。如可以实现如下的效果：

{
*"name": "Bill",
*"age": 12,
*"grade": 3,
*"id": "0802020114",
*"subject": [
**"math",
**"Chinese",
**"English"
*]
}

3、toJSON()方法
有时候JSON.stringify()还是不能满足对某些对象进行自定义序列化的需求。在这些情况下，可以通过对象上调用toJSON()方法，返回其自身的JSON数据格式。如：

<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
age:12, 
grade:3, 
id:"0802020114", 
subject:["math","Chinese","English"], 
toJSON:function(){ 
return this.name+"_"+this.id; 
} 
}; 
var jsonText=JSON.stringify(student); 
} 
</script> 
</head> 
<body> 
<input type="button" οnclick="init()" value="测试" /> 
</body>

JSON.parse()方法也可以接收另一个参数，该参数是一个函数，将早每个键值对上调用。为了区别JSON.stringify()接收的替换（过滤）函数（replacer），这个函数被称作还原函数（reviver），但实际上这两个函数的签名是相同的——它们都接收连个参数，一个键和一个值，而且都需要返回一个值。
如果还原函数返回undefined，则表示要从结果中删除相应的键；如果返回其他值，则将该值插入到结果中。如：

<script type="text/javascript"> 
function init() 
{ 
var student={ 
name:"Bill", 
birthDate:new Date(1990,8,4) 
}; 
var jsonText=JSON.stringify(student); 
var studentObject=JSON.parse(jsonText,function(key,value){ 
if(key=="birthDate") 
{ 
return new Date(value); 
} 
else 
{ 
return value; 
} 
}); 
} 
</script> 
</head> 
<body> 
<input type="button" οnclick="init()" value="测试" /> 
</body>

以上代码先是为student添加了出生日期birthDate属性，该属性保存着一个Date对象。这个对象在经过序列化之后变成了有效地JSON字符串，然后经过解析又在studentObject中还原为一个Date对象。

参考：http://www.cnblogs.com/ningvsban/p/3660654.html

https://technet.microsoft.com/zh-cn/sysinternals/cc836459

http://www.tuicool.com/articles/RNNbYzz

https://msdn.microsoft.com/library/cc836466(v=vs.94).aspx

http://www.jb51.net/article/33694.htm

http://www.jb51.net/article/33696.htm

http://www.jb51.net/article/33695.htm

ssisse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON.stringify() 和 JSON.parse()

JSON.stringify 方法在json 的使用中，把一个对象通过 stringify 之后提交给后台或者存储在Storage 里是很常用的手段.语法：　　JSON.stringify(value [, replacer] [, space])value：是必选字段。就是你输入的对象，比如数组，类等。 replacer：这个是可选的。它又分
复制链接

扫一扫