提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JSON

JSONJSON
2023-09-11 14:19:41 时间

JSON也是一种数据结构格式，与XML相比，JSON操作起来要简单的多，受到广大程序猿的欢迎！完爆XML有没有~ 而且很多编程语言都有针对JSON的解析器和序列化器哟~

JSON包含3中数据格式：

简单值：字符串、数值、布尔值、null。但是不支持undefined

对象：。。。

数组：。。。

注意事项：

1、JSON字符串必须使用双引号不能使用单引号，否则报错

2、对象中的属性必须加上双引号，否则报错

3、JSON中没有末尾分号

4、数组和对象可以相互嵌套

5、同一个对象中不能出现同一个同名属性

解析与序列化：

解析就是将JSON数据解析为原生javascript值（JSON.parse()）

序列化就是将javascript对象序列化为JSON字符串（JSON.stringify()）

早期的JSON解析器是用eval（）函数来解析的

后来，ES5定义了个全局对象JSON，支持这个对象的浏览器有：IE8+、firefox3.5+、safari4+、chrome、opera10.5+。对于早期的浏览器可以使用一个shim：https://github.com/douglascrockford/JSON-js。对于不能支持原生JSON解析器的浏览器，使用这个shim是最佳选择。

JSON.stringify():序列化

默认情况下，此方法序列化后返回的JSON字符串里不包含任何空格和缩进，在序列化javascript对象时，所有函数及原型成员都会被有意忽略，不体现在结果中，此外任何属性值为undefined的属性都会被忽略

一个小技巧：当我们需要复制一个对象时，我们通常的做法是，将对象深拷贝，但是通过JSON的两种方法，先将对象序列化，在将序列化后的JSON字符串解析成对象，这样，这两个对象就是一个完全不同的对象了！！！

JSON.stringify（）方法除了接收一个要被序列化的javascript对象，还可以接受另外两个参数，第一个参数是个过滤器，可以是一个数组，也可以是一个函数；第二个参数是一个选项，表示是否在JSON字符串中国保留缩进。单独或组合使用这两个参数，可以更全面深入的控制JSON的序列化。

1.过滤结果

    var book={
            "title":"professionnal Javascript",
            "authors":["Nicholas C. Zakas"],
            "edition":3,
            "year":2011
      };
      var jsonText=JSON.stringify(book,["title","edition"]);
      console.log(jsonText);//{"title":"professionnal Javascript","edition":3}
      var jsonText2=JSON.stringify(book,function(key,value){
            switch(key){
                  case "authors":
                        return value.join(",");
                  case "year":
                        return 5000;
                  case "edition":
                        return undefined;
                  default:
                        return value;
            }
      });
      console.log(jsonText2);//{"title":"professionnal Javascript","authors":"Nicholas C. Zakas","year":5000}

2.字符串缩进

JSON.stringify（）第三个参数控制结果中的缩进和空白符。如果是一个数值，那么表示的是每个级别缩进的空格数（最大只能到10，大于10的也是缩进10个空格）。例如：

    var jsonText3=JSON.stringify(book,null,4);
      console.log(jsonText3);
      {
            "title": "professionnal Javascript",
            "authors": [
                  "Nicholas C. Zakas"
            ],
            "edition": 3,
            "year": 2011
      }

如果第三个参数是字符串：

    var jsonText4=JSON.stringify(book,null,"哈啊");
      console.log(jsonText4);
      {
      哈啊"title": "professionnal Javascript",
      哈啊"authors": [
      哈啊哈啊"Nicholas C. Zakas"
      哈啊],
      哈啊"edition": 3,
      哈啊"year": 2011
      }

3.toJSON（）方法：（自定义序列化方法）

    var book={
            "title":"professionnal Javascript",
            "authors":["Nicholas C. Zakas"],
            "edition":3,
            "year":2011,
            "toJSON":function(){
                  return this.title;
            }
      };
      var jsonText=JSON.stringify(book);
      console.log(jsonText);//"professionnal Javascript"

JSON.parse（）：解析选项

JSON.parse（）方法也可以接受第二个参数，是一个函数，这个函数也有两个参数，分别表示对象的key和value，在解析每个属性时，都会调用这个方法：

    var book={
            "title":"professionnal Javascript",
            "authors":["Nicholas C. Zakas"],
            edition:3,
            year:2011,
            releaseDate:new Date(2011,11,1)
      };
      //先序列化一下这个对象将它变成json字符串
      var jsontext=JSON.stringify(book);
      var bookCopy=JSON.parse(jsontext,function(key,value){
            if(key=="releaseDate"){
                  return new Date(value);
            }else{
                  return value;
            }
      });
      console.log(bookCopy);
      //{title: "professionnal Javascript", authors: Array(1), edition: 3, year: 2011, releaseDate: Thu Dec 01 2011 00:00:00 GMT+0800 (中国标准时间)}
      console.log(bookCopy.releaseDate.getFullYear());//2011

上述代码，如果按正常来说，从json格式解析出来的Date对象是不带原型的，但是通过上述处理，就可以让这个Date对象带原型，因此可以调用它原型的getFullYear（）方法

 

相关文章