关于JSON,必须清晰的一点是它是一种数据结构,而非一种编程语言。属于看起来它与javascript有相同的语言格式,但是JSON并不从属于javascript。
其他语言也可以无障碍的使用JSON,因为他们拥有JSON的解析器与序列化器。JSON可以用来表示以下三种值:
1. 简单值
比如 : “Hello World” , 10 , true
2. 对象
比如 :
{
"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也得到了很多浏览器的支持,
大家放心便利的使用吧。
作者:颜卿今天Coding了吗
链接:http://www.jianshu.com/p/78b5dff5823a
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。