原生JSON对象及兼容问题的解决

阅读更多

我们在使用JSON数据时遇到最多的操作是对JSON格式的数据进行序列化和反序列化操作,在这里我想介绍下什么是JSON数据,JS原生的JSON对象提供的支持及浏览器兼容的问题。

 

1、什么是JSON

 

在http://json.org/中是这样介绍JSON:

 

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript(ECMA-262标准第三版)的一个子集。采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。

JSON采用key/value的形式来表示数据,其中使用“{}”表示对象,而“[]”则表示数组,详细的语法可以参考json.org。

 

JSON对象:{"name":"LiLei","age":19,"sex":"male"}
JSON数组:[
             {"name":"LiLei","age":19,"sex":"male"},
             {"name":"HanMei","age":18,"sex":"famale"}
           ]

 

就web开发来讲,JSON数据有三个好处:

 

简洁,方便前台数据操作 - 与XML相比,JSON的分隔符仅限于引号、冒号、逗号、大括号和中括号,并且没有闭合标签的要求,这使得JSON结构更加的简洁。

体积小,传输快。

易用性 - 由于JSON的语法本身就是JavaScript的一个子集,因此对于一个JSON结构几乎不需要额外的解析和查找,可以像使用原生JavaScript对象那样去使用JSON,而XML则需要通过DOM解析来访问。

 

因此,JSON在当前的Web开发用中使用的越来越广泛。其中最常用的两个操作是序列化和反序列化。目前,很多JavaScript库提供都提供了对着两个操作的支持,不过随着ECMA起草了JSON序列化和反序列化的相关标准后,各大浏览器也相应的增加了对JSON的原生支持。

 

2、原生JSON对象

 

目前支持原生JSON对象的浏览器包括:IE8、Firefox3.5以及Chrome3.0/4.0。原生的JSON对象是一个只包括parse方法与stringify方法的纯粹的对象,用于解析和构建JSON文本。

2.1、 JSON.parse(text [ , reviver ] )

 

parse方法的作用是进行反序列化,即将一个符合JSON语法的字符串解析成一个JavaScript对象。该方法可以接受两个参数text与reviver,其中reviver是可选的。text是需要反序列化的字符串,reviver则是一个可选的函数,在反序列化的过程中,每当解析到对象的一个属性时都会将key和value作为参数传递给reviver并执行,之后将返回的结果作为当前key对应值(如果解析的是数组则传递的是当前元素的索引以及元素本身)。如果返回的是undefined则会在解析后的对象中删除对应的属性。具体的使用参见下面的代码:

//简单对象
var str = '{"name":"LiLei","age":19,"sex":"male"}';
var obj = JSON.parse(str);
alert(obj.name);  //LiLei
   
var obj2 = JSON.parse(str,function(k,v){
       if(k == "name"){
           return "HanMeiMei";
       }
       return v;
});
alert(obj2.name);  //HanMeiMei
 
//数组
var str = '[{"name":"LiLei","age":19,"sex":"male"},'+
              '{"name":"Lucy","age":17,"sex":"female"}]';
var obj = JSON.parse(str);
alert(obj[0].name);// LiLei
alert(obj[1].name);//Lucy
   
var obj2 = JSON.parse(str,function(k,v){
    if(k == "name"){
         return "HanMeiMei";
     }
     return v;
});
alert(obj2[0].name); //HanMeiMei
alert(obj2[1].name); //HanMeiMei
//复杂对象
var str = '{"class":"javascript",'+
    '"teacher":{"name":"HanMeiMei","age":28,"sex":"female"},'+
    '"students":[{"name":"LiLei","age":19,"sex":"male"},'+
              '{"name":"Lucy","age":17,"sex":"female"}]}';
var obj = JSON.parse(str);
alert(obj.teacher.name); // HanMeiMei
alert(obj.students[0].name); //LiLei
   
var obj2 = JSON.parse(str,function(k,v){
     if(k == "teacher"){
         v.name = "Poly";
     }
     return v;
});
alert(obj2.teacher.name);  // Poly
alert(obj2.students[0].name); // LiLei
alert(obj2.students[1].name); // Lucy

 

  注意:使用JSON.parse的时候,对象的每个属性都必须用双引号括起来,否则会抛出异常;

 

var str = '{company:"kedacom"}';
var json = JSON.parse(str);  //解析出现异常
var str2 = "{'company':'kedacom'}";
var json2 = JSON.parse(str2);  //解析出现异常

2.2、JSON.stringify(value [ , replacer [ , space ] ] )

stringify方法的作用是进行序列化,即将一个JavaScript对象序列化成JSON结构的字符串。该方法最多可以包含3个参数:

value - 需要序列化的JavaScript对象。

replacer - 可选,可以是函数或者数组,

    如果是函数,则用于过滤序列化的结果。在序列化的执行过程中,每当遍历到对象的一个属性时,都会将属性的key和value传递给replacer并执行,并将执行结果作为该属性的值。

    如果是一个数组,则必须保证数组中的每个元素都是字符串,该数组参数用于指定value中需要进行序列化的属性,如果是对数组进行序列化则会忽略数组形式的replacer参数。

    在使用函数作为replacer时需要注意的是,由于replacer返回的内容仍然会执行序列化,因此如果是返回对象则层次不要太深,不然很容易出“堆栈溢出”的异常,此外如果返回的是undefined则属性会被直接删除掉,而不会出现在字符串中。

       space - 可选,可以是数字或字符串。用于格式化输出,使输出的JSON字符串更易于阅读,这在需要人工检查时非常的有用。如果是数字则表示每一级缩进的空格数,如果是字符串则表示每一级缩进都使用该字符串。使用示例:

     1)只有一个参数的情况下:

 

var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student);
document.write(student);  // [object Object]
document.write(json);
// {"name":"LiLei","age":"30","location":"China"}

 

    2)第二个参数存在,并且是函数

var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student,function(k,v){
        if(k == "name"){ return "poly"; }
        return v;
});
document.write(json);
//{"name":"poly","age":30,"location":"China"}
 
var students = ["LiLei","poly","hanmeimei"];
var json = JSON.stringify(students, function (key,value) {
    return value.toString().toUpperCase();
 });
document.write(json);// "LILEI,POLY,HANMEIMEI"

 

    3)第二个参数存在,并且是数组

 

// value是对象,并且replacer为数组时,返回只包含有replacer指定属性的对象
var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student,["name","location"]);
document.write(json); //{"name":"LiLei","location":"China"}
// value是数组,并且replacer为数组时,replace参数被忽略
var students = ["LiLei","poly","hanmeimei"];
var json = JSON.stringify(students);
var json2 = JSON.stringify(students, ["0","2"]);
document.write(json); // ["LiLei","poly","hanmeimei"]
document.write(json2); //["LiLei","poly","hanmeimei"]

 

 

   4)第三个参数存在,并且是数字,表示缩进几个字符,此时最大值为10

 

var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student,["name","location"]); 
alert(json);
var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student,["name","location"],4); 
alert(json);

 
   原生JSON对象及兼容问题的解决_第1张图片       原生JSON对象及兼容问题的解决_第2张图片
 

5)第三个参数存在,并且是转义字符

 

var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student,["name","location"]);
alert(json);
var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student,["name","location"],"\t");
alert(json); 

     原生JSON对象及兼容问题的解决_第3张图片             原生JSON对象及兼容问题的解决_第4张图片

6)  第三个参数存在,并且仅仅是字符串,就在每行输出值的时候把这些字符串附加上去就OK。最大长度也是10个字符

 

var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student,["name","location"]);
alert(json);
var student = {"name":"LiLei","age":30,"location":"China"};
var json = JSON.stringify(student,["name","location"],"kedacom");
alert(json);

             原生JSON对象及兼容问题的解决_第5张图片           原生JSON对象及兼容问题的解决_第6张图片

 

3、原生JSON的的浏览器兼容

 

目前支持原生JSON对象的浏览器包括:IE8(S)、Firefox3.5以及Chrome3.0/4.0,对于更低版本的浏览器支持在网络上又很多的解决方案,目前使用最为广泛和成熟的解决方案是在项目中引入json.js库,该扩展库是由大师Douglas Crockford扩展实现(有兴趣的童靴可以读下源码),在最近的一次更新中可以看到如下建议,json.js文件应该使用被最新的json2.js替换。

       

/*
    json.js
    2013-05-26

    Public Domain

    No warranty expressed or implied. Use at your own risk.

    This file has been superceded by http://www.JSON.org/json2.js

    See http://www.JSON.org/js.html
*/

 

在https://github.com/douglascrockford/JSON-js可以下载到json.js和json2.js两个文件。

下面就通过在IE6中引入json2.js进行一个简单测试:

 

//没有引入json2.js库的版本



无标题文档

 

执行报错:

 
           原生JSON对象及兼容问题的解决_第7张图片
 

引入json2.js,代码如下:

……

…… 

          执行结果:

 
                                     原生JSON对象及兼容问题的解决_第8张图片
 

4、小结

 

认识javascript也不短的时间了,一直不知道原生JSON对象的存在,知道最近想着从头整理下自己的javascript知识,才知道它的存在,惭愧啊惭愧啊。于是乎,在网上找了些资料,并结合一些例子,希望能给童靴们一些帮助。

 

5、参考

 

http://technet.microsoft.com/zh-cn/sysinternals/cc836459(v=vs.94)

http://json.org/

https://github.com/douglascrockford/JSON-js

  • 原生JSON对象及兼容问题的解决_第9张图片
  • 大小: 7.2 KB
  • 原生JSON对象及兼容问题的解决_第10张图片
  • 大小: 20.2 KB
  • 原生JSON对象及兼容问题的解决_第11张图片
  • 大小: 7.1 KB
  • 原生JSON对象及兼容问题的解决_第12张图片
  • 大小: 7.3 KB
  • 原生JSON对象及兼容问题的解决_第13张图片
  • 大小: 7.1 KB
  • 原生JSON对象及兼容问题的解决_第14张图片
  • 大小: 7.1 KB
  • 原生JSON对象及兼容问题的解决_第15张图片
  • 大小: 7.1 KB
  • 原生JSON对象及兼容问题的解决_第16张图片
  • 大小: 25.8 KB
  • json2.zip (5.4 KB)
  • 下载次数: 2
  • 查看图片附件

你可能感兴趣的:(javascript,json2.js,JSON,parse,stringify)