前端json的简介，转换和解析

最近碰到json的问题比较多，做个总结，比较简单，也比较入门，希望能帮助那些职场初级前端能对json有一个新的认识，若有错误之处，欢迎指正。

就拿最近的一个项目做例子：

项目模块需求：

用户选择一级下拉菜单，同时二级菜单内容动态显示，并且二级联动下方的内容部分动态生成相应查询内容。

实现起来也很简单：

用户选择一级下拉菜单时，传值到后台，后台查表处理后，返回json格式数据到前端，前端再对json做处理，在二级菜单下拉框里生成option内容，并且在下方内容空白处，动态生成查询内容。

其实，可以看出前端后端之间离不开json和xml，json作为前后端的桥梁有着诸多优势，并且json和javescript简直是天造地设的一对，js处理json是十分方便的事情。下面我就来简单介绍一下json以及它的用法。

以下分为四块内容：

1. json的数据格式   2. json字符串转json数据对象   3. json数据对象转json字符串    4. json的取值

一、.json的数据格式 

1.JSON对象（JSONObject）

简单一点的：

{"name":"西兰花的春天" , "age":"26" , "male":"true"}

复杂一点的：

{
"name":"西兰花的春天",
"age":"26",
"male":"true",
"address":{ "name":"helen", "city":"杭州", "country":"中国" }
}

2.JSON数组（JSONArray）
简单一点的：

[
{ "name":"西兰花的春天", "age":"30", "male":"true" },
{ "name":"孙xx", "age":"30", "male":"false" },
{ "name":"陈xx", "age":"30", "male":"true" },
{ "name":"张x", "age":"30", "male":"true" }
]

<
4000
span class="pln">
复杂一点的：

{
"helen":{
"技术运营部":[
{
"人员":"5",
"男人":"4",
"女人":"1",
"人员构成":{
"带头大哥":"陈xx",
"前端":[
{
"前端1":"孙xx",
"前端1特点":"技术天才",
"前端2":"西兰花的春天",
"前端2特点":"技术天才"
}
],
"后端":[
{
"后端1":"陈xx",
"后端1特点":"技术天才",
"后端2":"张x",
"后端2特点":"技术天才"
}
]
}
},
{
"人员":"2",
"男人":"2",
"女人":"0",
"人员构成":{
"带头大哥":"张xx",
"运维":[
{
"运维1":"孙xx",
"运维1特点":"技术天才"
}
]
}
}
]
}
}

标准JSON的合法符号：{(左大括号)  }(右大括号)  "(双引号)  :(冒号)  ,(逗号)  [(左中括号)  ](右中括号)，也就是说json格式里面严格意义上键值要加双引号，每个键值对之间要加逗号，末尾不能有逗号，中括号和大括号要合理使用。

json格式如实不规范使用，则会导致JSON.parse()解析错误，一定程度上，也会导致eval()方法报错。

二、json字符串转json数据对象

（1）JSON.parse()方法

JSON.parse()方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10 以上版本

ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json2.js。

var jsonStr = '{"name":"西兰花的春天" , "age":"26" , "male":"true"}';
var jsonObj = JSON.parse( jsonStr );
console.log( jsonObj );

（2）eval()方法

解析JSON数据的最常用方法是使用javascript的eval()方法，ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象

var jsonStr = '{"name":"西兰花的春天" , "age":"26" , "male":"true"}';
var jsonObj = eval( '(' + jsonStr + ')' );
console.log( jsonObj );

（3）$.parseJSON方法

var jsonStr = '{"name":"西兰花的春天" , "age":"26" , "male":"true"}';
var jsonObj = $.parseJSON( jsonStr );
console.log( jsonObj );

（4）new Function方法

var jsonStr = '{"name":"西兰花的春天" , "age":"26" , "male":"true"}';
function toJson( jsonStr )
{
var jsonObj = (new Function( "return " + jsonStr ))();
console.log( jsonObj );
return jsonObj;
}

这里注意一下：

1.运用时候需要除了eval()以外需要json2.js包。链接下载地址：https://github.com/douglascrockford/JSON-js

2.json2.js会在浏览器原生支持JSON.parse的时候选用原生版本，而且它跟ES5是API兼容的。在ES5还没完全普及的现状下，John Resig推荐用json2.js主要是为了现在就能用跟ES5兼容的API。

3.这里我重点提一下eval

eval在项目中要慎重使用，关于eval的好坏我不做评价，我觉得前端开发一定要有哲学思想，需要辩证的看待问题，凡事没有绝对的好坏，编程的语言选择必须切实根据实际项目来做取舍，思维要有弹性，这里放个链接，有兴趣可以去看一下：https://www.zhihu.com/question/20591877

这里我就提一下用eval解析会碰到的问题

1.如下所示

var jsonStr = '{"name":"西兰花的春天" , "age":"26" , "male":"true"}';
var jsonObj = eval( jsonStr );
console.log( jsonObj );

则报错：

在看下面：

alert(eval("{}")) // return undefined
alert(eval("({})"));// return object[Object]

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语 句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始 和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的。

再把eval()改为：eval（‘（‘+json+’）’）格式：

var jsonStr = '{"name":"西兰花的春天" , "age":"26" , "male":"true"}';
var jsonObj = eval( '(' + jsonStr + ')' );
console.log( jsonObj );

则成功输出。
2.若是如下所示解析：

var jsonStr = '{name:"西兰花的春天" ;age:"26" ; male:"true"}';
var jsonObj = eval( jsonStr );
console.log( jsonObj );

一旦一个对象有了若干个 key，比如{ name:"西兰花的春天" ;age:"26" ; male:"true" }，就有三个 label 语句，将
"name" ，age以及male分别看做是语句，语句之间只能用分号连接！（表达式之间才能用逗号），会返回最后一个的值，所以改成上面这样也是没有问题的。

3.若是如下所示解析：

var jsonStr = "{'name':'西兰花的春天' , 'age':'26' , 'male':alert('西兰花的春天')}";
var jsonObj = eval( '(' + jsonStr + ')' );
console.log( jsonObj );

我们发现

打印出这种结果

jsonStr其实不是严格意义上的json格式，eval还是解析出来了，而JSON.parse()方法解析时则会报错，我么可以看出，eval十分强大，但也涉及到安全性问题，恶意用户可在往json里加入木马脚本，故能不用eval就不要采纳。

三、json数据对象转json字符串

（1）JSON.stringify(obj) 方法

var jsonObj = { 'name': "西兰花的春天", "age": "26", "male": "true" };
var str = JSON.stringify( jsonObj );
console.log( str );

（2）obj.toJSONString()方法

var jsonObj = { 'name': "西兰花的春天", "age": "26", "male": "true" };
var str = jsonObj.toJSONString();
console.log( str );

注意：
以上两个方法，只能在IE8或者以上，toJSONString() ， 必须要引入json.js，如要在ie8兼容模式以下版本使用，则要加载json2.js拓展，所以说局限性都比较高。不过，个人建议使用JSON.stringify(obj) 方法比较好。

四、json的取值

{
"helen":{
"技术运营部":[
{
"人员":"5",
"男人":"4",
"女人":"1",
"人员构成":{
"带头大哥":"陈xx",
"前端":[
{
"前端1":"孙xx",
"前端1特点":"技术天才",
"前端2":"西兰花的春天",
"前端2特点":"技术天才"
}
],
"后端":[
{
"后端1":"陈xx",
"后端1特点":"技术天才",
"后端2":"张x",
"后端2特点":"技术天才"
}
]
}
},
{
"人员":"2",
"男人":"2",
"女人":"0",
"人员构成":{
"带头大哥":"张xx",
"运维":[
{
"运维1":"孙xx",
"运维1特点":"技术天才"
}
]
}
}
]
}
}

<script>
$( document ).ready( readyHandler );
function readyHandler()
{
$.get( "helen.json", function( data )                               //data作为参数传入
{
//若我要取到"前端2"的值
console.log( data.helen.技术运营部[ 0 ].人员构成.前端[ 0 ].前端2 );
} );
}
</script>

这里获取的json直接就是json标准格式，不需要解析，直接取值。

如下，成功输出我要的值：西兰花的春天





原先我取值的时候总是出错，后来花了几分钟想了下，明白其中的道理。json解析取值，简单点去想，就是复杂json由json对象和json数组混合构成，取值就像剥洋葱，一层一层下去，碰到对对象，就用.xx方法，碰到数组，就用.x[i]方法，心细一点，别写错，肯定不会错，无论多复杂的json，都是这么操作这，没什么难度把。

至此，json大致说完了，比较简单易懂，也没什么难度，就这么回事，希望看完能有所帮助。