使用js把json字符串转为js对象的方法

最新推荐文章于 2022-10-19 09:54:13 发布

原创最新推荐文章于 2022-10-19 09:54:13 发布 · 361 阅读

CC 4.0 BY-SA版权

本文深入探讨了JSON解析的早期方法及现代标准的引入，包括原始的`eval`方式、`newFunction`形式和使用全局JSON对象的方法。文章详细展示了每种方法的优缺点，并通过实例代码进行说明，特别强调了JSON规范的重要性，以及不同浏览器的支持情况。此外，还对比了使用JSON.parse与传统方法的区别，包括属性名的引用方式和解析错误处理。

ECMA-262(E3) 中没有将JSON概念写到标准中，还好在 ECMA-262(E5) 中JSON的概念被正式引入了，包括全局的JSON对象和Date的toJSON方法。

1，eval方式解析，恐怕这是最早的解析方式了。如下：

复制代码代码如下:

  
function strToJson(str){ 
  
var json = eval('(' + str + ')'); 
  
return json; 
  
}

记得别忘了str两旁的小括号。

这里属性名可以使用数字，可以带引号也可以不带引号。如果属性名是纯数字，生成的对象属性可以用下表运算符[]来访问，不能用obj.123这样的方式访问。

 1         var str1 = "{\"fa\":123,fb:333,\"fc\":\"xxx\",123:'xyz'}";
 2         var obj1 = eval("(" + str1 + ")");
 3         document.writeln("obj1.fa=" + obj1.fa);
 4         document.writeln("obj1.fb=" + obj1.fb);
 5         document.writeln("obj1.fc=" + obj1.fc);
 6         //document.writeln("obj1.123=" + obj1.123);//语法错误
 7         document.writeln("obj1[fa]=" + obj1["fa"]);
 8         document.writeln("obj1[fb]=" + obj1["fb"]);
 9         document.writeln("obj1[fc]=" + obj1["fc"]);
10         document.writeln("obj1[123]=" + obj1[123]);
11         document.write("<br/>");

2，new Function形式，比较怪异哦。如下

复制代码代码如下:

  
function strToJson(str){ 
  
var json = (new Function("return " + str))(); 
  
return json; 
  
}

 1         var str2 = "{\"fa\":123,fb:333,\"fc\":\"xxx\",123:'xyz'}";
 2         var obj2 = (new Function("return" + str2))();
 3         document.writeln("obj2.fa=" + obj2.fa);
 4         document.writeln("obj2.fb=" + obj2.fb);
 5         document.writeln("obj2.fc=" + obj2.fc);
 6         //document.writeln("obj1.123=" + obj1.123);
 7         document.writeln("obj2[fa]=" + obj2["fa"]);
 8         document.writeln("obj2[fb]=" + obj2["fb"]);
 9         document.writeln("obj2[fc]=" + obj2["fc"]);
10         document.writeln("obj2[123]=" + obj2[123]);
11         document.write("<br/>");

3，使用全局的JSON对象，如下：

复制代码代码如下:

  
function strToJson(str){ 
  
return JSON.parse(str); 
  
}

目前 IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法，以下是部分资料：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx https://developer.mozilla.org/en/Using_JSON_in_Firefox
使用JSON.parse需严格遵守JSON规范，如属性都需用引号引起来，如下

复制代码代码如下:

  
var str = '{name:"jack"}'; 
  
var obj = JSON.parse(str); // --> parse error

name没有用引号引起来，使用JSON.parse所有浏览器中均抛异常，解析失败。而前两种方式则没问题。另外必须用双引号包围属性名，单引号会有解析错误，范例：

 1         var str3 = "{\"fa\":123,\"fb\":333,\"fc\":\"xxx\",\"123\":321}";
 2         var obj3 = JSON.parse(str3);
 3         document.writeln("obj3.fa=" + obj3.fa);
 4         document.writeln("obj3.fb=" + obj3.fb);
 5         document.writeln("obj3.fc=" + obj3.fc);
 6         //document.writeln("obj1.123=" + obj1.123);
 7         document.writeln("obj3[fa]=" + obj3["fa"]);
 8         document.writeln("obj3[fb]=" + obj3["fb"]);
 9         document.writeln("obj3[fc]=" + obj3["fc"]);
10         document.writeln("obj3[123]=" + obj3[123]);
11         document.write("<br/>");
12 
13         try{
14             var str4 = "{fa:123,\"fb\":333,\"fc\":\"xxx\",\"123\":321}";
15             var obj4 = JSON.parse(str4);
16         } catch (err) {
17             document.write(err.name+":"+err.message);
18         }
19         document.write("<br/>");
20         try{
21             var str5 = "{'fa':123,\"fb\":333,\"fc\":\"xxx\",\"123\":321}";
22             var obj5 = JSON.parse(str4);
23         } catch (err) {
24             document.write(err.name + ":" + err.message);
25         }