继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

彻底精通JSON

素胚勾勒不出你
关注TA
已关注
手记 176
粉丝 53
获赞 274

关于JSON,必须清晰的一点是它是一种数据结构,而非一种编程语言。属于看起来它与javascript有相同的语言格式,但是JSON并不从属于javascript。
其他语言也可以无障碍的使用JSON,因为他们拥有JSON的解析器与序列化器。

JSON可以用来表示以下三种值:

1. 简单值

比如 :  “Hello World”  , 10  , true2.  对象 

比如  :
      {              "name" : "Ritsu"        
      }

与javascript 不同的是,JSON对象不需要声明变量,即:

     var  Ritsu = 
     { 
     };

亦不需要末尾的分号
当然最重要的JSON的属性必须加双引号!!!

 3.  数组

  比如 
          [233,"666",true]

把数组与对象结合起来制造更为复杂的数据结构

   [
 {     "name" : "ritsu",     "author" : [       "Michael",       "Prince" ,       "Banada"             
      ],     "price" : 200      },
     {     "name" : "ritsu",     "author" : [       "Michael",       "Prince" ,       "Banada"             
      ],     "price" : 200      },
     {     "name" : "ritsu",     "author" : [       "Michael",       "Prince" ,       "Banada"             
      ],     "price" : 200      },
     {     "name" : "ritsu",     "author" : [       "Michael",       "Prince" ,       "Banada"             
      ],     "price" : 200      },
       {     "name" : "ritsu",     "author" : [       "Michael",       "Prince" ,       "Banada"             
      ],     "price" : 200      }     
   ]

以上JSON数组包含了几个图书信息对象,每个对象又都包含了几个属性,
author属性又是一个数组...

最为重要的解析与序列

JSON之所以流行的重要原因之一不是因为它轻量化,而是它天生的转化为javascript对象的独特性。

比方我们快速访问上面的第二个条目的name属性://eval 是早期将字符串转化为javascript的函数,一般慎用它避免安全问题,anyway....var book_2 = eval(JOSN.stringify(xxx))[1].title;// 打印一下

相比之下在DOM访问:

//假设我们已经得到了这个数据结构并命名为books

document.getElementById('books')[2].getAttribute('name')

抛弃这些累赘般的DOM操作吧

stringify 与 parse

JSON对象有两个方法:
stringify 能将javascript对象转化为JSON字符串

如下:

  //这里假设books是一个javascript对象
   var  jsonstring = JSON.stringify(books);         console.log(jsonstring);         //读者可自行测试

在序列化对象时,所有函数对及原型对象都会被忽略,此外,值为undefined的属性也会被忽略,最终结果都是值为有效JSON数据类型的实例属性。

我们也可以将JSON字符串转化为javascript对象

如下:

 var jsObj = JSON.parse(jsonstring);     console.log(jsObj);                
      //读者可自行测试

stringify的参数选项

stringify除了接受javascript对象外还可以选填两个参数,第一个参数是一个过滤器可以用数组来表示,也可以是一个函数。第二个参数可以用来表示JSON字符串的缩进选项。

如果过滤器是一个数组的话,那么JSON.stringify()只包含叔祖列出来的属性,还是之前的book例子。

    var   book   =     {     "name" : "ritsu",     "author" : [       "Michael",       "Prince" ,       "Banada"             
      ],     "price" : 200      };    
var  string =  JSON.stringify(book,["name","price"]);//{"name":"ritsu","price":200}"

这样string只会包含数组列出来的属性,读者可以自行练习

如果过滤器是一个函数的话,情况有所不同,函数接受两个参数:属性的名与值,还是原来的book例子。
   var  jsonText = JSON.stringify(book,function(key,value){
         
             switch(key){
                 
                 case "author" : 
                                    return value.join("-");
                case "name" :                                 return value;
                case "price" :                                 return value * 50000;
                 default:                                 return value;
                 }
         });
      
    最后的结果应该是:    
"{"name":"ritsu","author":"Michael-Prince-Banada","price":10000000}"

字符串缩进

字符串缩进式第三个选项,可以控制初始状态令人难以阅读的JSON字符串,达到赏心悦目的状态。

如果要缩进四个字符串可以这样做,还是原来的book:

        var jsonText = JSON.stringify(book,null,4);        //对,把第二个参数设为null就可以忽略过滤器了.

如下

                    "{
"name": "ritsu",
"author": [
    "Michael",
    "Prince",
    "Banada"
],
"price": 200
}"

当然你还可以把单纯的空格转化为自己喜欢的字符:

比如:

var jsonText = JSON.stringify(book,null,"-");
        
        
结果如下:            "{
-"name": "ritsu",
-"author": [
--"Michael",
--"Prince",
--"Banada"
-],
-"price": 200
}"

小提示:

   缩进字符串不能超过10个字符,否则仅仅会显示前十个字符。

toJSON()

toJSON() 方法可以将 Date 对象转换为字符串,并格式化为 JSON 数据格式。

  读者可自行测试

parse也可以接受一个函数我们称其为还原函数,顾名思义就是还原成javascript对象。

还是之前的book:

        var   book   =     {     "name" : "ritsu",     "author" : [       "Michael",       "Prince" ,       "Banada"             
      ],     "price" : 200 ,     year : 2016,   releaseDate : new Date(2016,5,1)
};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.releaseDate.getFullYear());//2016

小结

JSON是一个轻量级的数据格式,我们可以很便利的使用它。
ECMA5 为我们添加了几个方法用于解析与序列,
此外,JSON也得到了很多浏览器的支持,
大家放心便利的使用吧。



作者:littl_Prince

原文链接:https://www.jianshu.com/p/78b5dff5823a


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP