JavaScript JSON 格式操作
关于JSON,最重要的是要理解它是一种数据格式,而不是一种编程语言。虽然具有相同的语法,但JSON并不从属于JavaScript。而且,并不是只有JavaScript才使用JSON,毕竟JSON只是一种数据格式。很多编程语言都有针对JSON的解析器和序列化器。
首先,说一下JSON的语法,JSON由三种类型组成,简单、对象、数组。简单值包括数值、字符串、布尔值、null。对象由一组键值对组成,其中可以嵌套数组和对象。数组表示一组有序的值得列表,可以包含数组和对象。
console.log(JSON.parse(1))
这样写是没有错的,可以直接解析数值,但是这个没有意义,一般实际运用中JSON都是以对象或数组的方式呈现。下面看看对象的表示法:
{ "name" : "Miracle", "age" : 24 } [1,2,"sd"]
JSON的对象和数组与JavaScript的对象字面量和数组字面量很像,在JSON中所有的键都要用双引号包裹,否则会导致语法错误。而字符串的值也必须使用双引号包裹,不能使用单引号,因为会导致语法错误,在数组中也是一样。在JSON中对象可以包含数组,而同样数组也可以包含对象。
{ "name" : "Miracle", "age" : 24, "skills" : ["AJAX", "ES5", "HTML5", "CSS3"], "friends" : [ { "name" : "kirs", "age" : 23 }, { "name" : "HQ", "age" : 22 } ] }
上列代码最外围是一个对象,其中包含了2个简单值,和两个数组,而第二个数组"friends"中又包含了两个对象。
解析与序列化
在JSON对象诞生之前,JSON的解析一直是使用eval()函数,使用eval()对JSON数据结构求值存在风险,因为可能会执行一些恶意代码。ECMAScript 5对解析JSON的行为进行了规范,定义了全局对象JSON。支持这个对象的浏览器有IE8+、Firefox 3.5+、Safari 4+、 Chrome 和Opera 10.5+。
JSON对象有两个方法:stringify()和parse()。stringify()用于将JSON对象的实例转换为JSON字符串,而JSON.parse()则将一个JSON字符串解析为JSON对象。
var jobj = { "name" : "Miracle", "age" : 24 } var jtext = JSON.stringify(jobj); console.log(jtext); //'{"name":"Miracle","age":24}' console.log(typeof jtext); //string var obj = JSON.parse(jtext); console.log(obj.name); //"Miracle"
在执行JSON.stringify()方法的时候对于JS中的特殊值比如undefined,function类型会忽略掉当前的键值对。
var jobj = { "name" : "Miracle", "age" : 24, "un" : undefined, "getName" : function(){ alert(0); } } console.log(JSON.stringify(jobj)); //'{"name":"Miracle","age":24}'
上述代码中jobj对象中包含了一个键为"un",它的值是undefined由于JSON不识别这种基本类型,所以会将键和值全部忽略。JS中的funciton也是。
JSON.stringify()方法一共有三个参数,第一个参数是要转化的对象,这个参数是必选项,第二个参数是过滤设置,可以是数组,也可以是function。第三个参数是一个格式化的设置,可以是字符串或者数值。注意这里的过滤和格式化都是对对象的操作。
var jobj = { "name" : "Miracle", "age" : 24, "siklls" : ["AJAX", "ES5", "HTML5", "CSS3"] } console.log(JSON.stringify(jobj, ["name"])); //'{"name":"Miracle"}'
如果JSON.stringify()方法的第二个参数是一个数组,那么在执行的时候会匹配数组中的值与每个键的名称是否一样,如果有返回这个键值对,没有就忽略。如果一个都没有最终返回空对象字符串"{}"。
var jobj = { "name" : "Miracle", "age" : 24, "siklls" : ["AJAX", "ES5", "HTML5", "CSS3"] } var s = JSON.stringify(jobj, function(key, val){ if(key == "name"){ return "who are you?"; }else if(key == "siklls"){ return undefined; }else { return val; } }); console.log(s); //{"name":"who are you?","age":24}
如果JSON.stringify()第二个参数是函数,那么根据函数返回的值来来匹配,如果函数自始至终都没有返回,那么结果就是undefined。这个函数接受两个参数,当前的键和值,然后根据结果返回当前键和改变后的值。例如代码中else if判断中 结果返回了undefined ,前面说过了如果返回的不是JSON类型的数据,JSON会自动过滤。
JSON.stringify()方法的最后一个参数是用来格式化字符串。改参数是一个字符串或者数值类型。如果是数值,则使用当前数值的空格数来缩进,如果是字符串则使用字符串来缩进,注意,这里会自动换行。
var jobj = { "name" : "Miracle", "age" : 24, "siklls" : ["AJAX", "ES5", "HTML5", "CSS3"] } var s = JSON.stringify(jobj, null, 4); console.log(s);
上图是使用Chromg 控制台查看的结果。