JavaScript中JSON.stringify()与JSON.parse()

时间:2022-08-23 00:27:45

    在开始介绍本文要介绍的两个方法之前,我们先来看一下什么是JSON对象。

一、JSON对象

1、什么是json?

     JSON(JavaScript Object Notation)javscript对象标记,是一种轻量级的数据交换格式。简单来说,json就是用JavaScript语法写的一个特殊的标记字符串。


2、json的作用
  (1)简化用JavaScript定义对象的方式;
  (2)也能用在AJAX中,做为数据载体之一。

    JSON之所以流行,拥有与JavaScript类似的语法并不是全部原因。更重要的一个原因是,可以把JSON数据结构解析为有用的JavaScript对象。
   

3、json的语法作用
  (1)一个对象用{}表示;
  (2)一对属性之间,使用 ':'来分隔,属性结束后,使用 ',' 来分隔,最后一个除外;
  (3)一个数组,使用[]符号;


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

二、JSON.stringify()   序列化选项

      方法: JSON.stringify(object[, replacer[, space]])

      作用: 使用JSON.stringify()方法可以将JSON对象转为字符串。

      参数:

             1)object参数:是要转为字符串的JSON对象。
             2)replacer参数:可选,这个参数是一个过滤器,可以是改变字符串转换过程的函数,也可以是一组String和Number对 象。

              这些对象用作一个白名单,用于选择要转换为字符串的对象的属性。如果这个值是空或没有提供,则在所得的JSON字符串中包含对象的所有属性。
            3)space参数:可选,是一个String或Number对象,用于把空白插入输出的JSON字符串,以提高可读性。如果这是一个数值,则表示用作空白的空格字符数;如果该数值大于10,就取其值为10;小于1的值表示不应使用空格。如果这是一个字符串(如果该字符串多于10个字符,就取前10个字符),就把该字符串用作空白。如果没有提供这个参数(或者为空),就不使用空白。

      接下来详细说明这个方法的使用。
1、过滤结果
     我们在上面指出,JSON.stringify()可以接收两个参数,如果过滤器参数是一个数组,那么JSON.stringify()的结果中将只包含数组中列出的属性。
     我们来举一个例子。
var book = {
			"title":"JavaScript 高级程序设计",
			"authors":[
					"Nicholas C. Zakas"
				],
			"edition":3,
			"year":2012
		};
var jsonBook = JSON.stringify(book,["title","edition"]);
console.log(jsonBook);
    输出结果:
{"title":"JavaScript 高级程序设计","edition":3}
     我们在程序中JSON.stringify()的第二个参数设置为一个数组,其中包含两个字符串:“title”和“edition”。这两个属性与将要序列化的对象中的属性是对应的,因此在返回的结果字符串中,就只会包含这两个属性。
     如果第二个参数是函数,那么结果就会稍有不同。传入的函数接收两个参数,属性名和属性值。根据属性名就可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串,而在值并非键值对结构的值时,键名可以是空字符串。
    为了改变序列化对象的结果,函数返回的值就是相应键的值。不过需要注意的是,如果函数返回了undefined,那么相应的属性就会被忽略。
    同样的来看一个例子。
var book = {
            "title":"JavaScript 高级程序设计",
            "authors":[
               "Nicholas C. Zakas"
            ],
            "edition":3,
            "year":2012
         };
var jsonbook = JSON.stringify(book,function(key,value){
   switch(key){
         case "title":
            return value;
         case "authors":
            return value;
         case "edition":
            return undefined;
         case "year":
            return 2015;
         default:
            return value;

   }
   
});
console.log(jsonbook);
输出结果:
{"title":"JavaScript 高级程序设计","authors":["Nicholas C. Zakas"],"year":2015}
     要序列化的对象中的每一个对象都要经过过滤器,因此数组中的每个带有这些属性的对象经过过滤之后,每个对象都只会包含“title”、"authors"、"year"。

2、字符串缩进
     JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。如果这个参数是一个数值,那它表示的是每个级别缩进的空格数。
   举一个例子。
var book = {
            "title":"JavaScript 高级程序设计",
            "authors":[
               "Nicholas C. Zakas"
            ],
            "edition":3,
            "year":2012
         };
var jsonbook = JSON.stringify(book,null,4);
console.log(jsonbook);
输出结果:
{
    "title": "JavaScript 高级程序设计",
    "authors": [
        "Nicholas C. Zakas"
    ],
    "edition": 3,
    "year": 2012
}
这个例子可以让每个级别缩进4个空格。

     如果缩进参数是一个字符串而非数值,则这个字符串将在JSON字符串中被用作缩进字符。在使用字符串的情况下,可以将缩进字符设置为制表符,或者短划线之类的任意字符,如下所示。
var book = {
            "title":"JavaScript 高级程序设计",
            "authors":[
               "Nicholas C. Zakas"
            ],
            "edition":3,
            "year":2012
         };
var jsonbook = JSON.stringify(book,null,'--');
console.log(jsonbook);
输出结果:
{
--"title": "JavaScript 高级程序设计",
--"authors": [
----"Nicholas C. Zakas"
--],
--"edition": 3,
--"year": 2012
}


三、JSON.parse()  解析选项
      作用:将 JavaScript 对象表示法 (JSON) 字符串转换为对象。
      语法:JSON.parse(text [, reviver])
      参数
            1)text:必需。 一个有效的 JSON 字符串。
            2)reviver:可选。 一个转换结果的函数,这个函数被称为还原函数,这个函数接收两个参数,一个键和一个值。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象,则先于父对象转换嵌套对象。 对于每个成员,会发生以下情况:
  • 如果 reviver 返回一个有效值,则成员值将替换为转换后的值。
  • 如果 reviver 返回它接收的相同值,则不修改成员值。
  • 如果 reviver 返回undefined,则删除成员。(我在FF和chrome下试验的是返回undefined后,会删除成员,返回null,只会赋值为null)
    返回值:一个对象或数组。

   下面写两个简单的例子说明。
实例一:使用 JSON.parse 将 JSON 字符串转换为对象  
var jsontext = '{"title":"JavaScript 高级程序设计","authors":["Nicholas C. Zakas"],"year":2015}';  
var contact = JSON.parse(jsontext);  
console.log(contact.title + ", " + contact.authors + ", "+ contact.year);  
实例二:使用 JSON.parse 反序列化 ISO 格式的日期字符串, 将返回Date格式对象,然后调用getFullYear()方法。
var book = {
            "title":"JavaScript 高级程序设计",
            "authors":[
               "Nicholas C. Zakas"
            ],
            "edition":3,
            "year":2011,
            releaseDate:new Date(2011,11,1)
         };

var jsonBook = JSON.stringify(book);

var bookCopy = JSON.parse(jsonBook,function(key,value){
	if(key == "releaseDate"){
		return new Date(value);
	}else{
		return value;
	}
});
console.log(bookCopy.releaseDate.getFullYear());