关于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