JavaScript解析JSON对象及JSON字符串

1、问题概述？

JavaScript解析JSON对象是常勤奋能之一。
此处我们要明白JSON对象和JSON字符串的区别？否则会给我们的解析带来困扰。
主要实现如下功能：
1、JavaScript解析JSON字符串和JSON对象?
2、JavaScript解析JSON数组?
3、JavaScript解析来自springboot通过@ResponseBody返回的JSON字符串?
4、禁用eval后怎样替换eval?
1.1、什么是JSON对象

JSON对象的本质是一个对象，对象中属性的值可以通过object.name的方式访问。
JavaScript界说方式如下：
var obj={“name”:”晓春”,”sex”:”男”};
直接通过obj.name返回值为晓春
1.2、什么是JSON字符串

JSON字符串的本质是一种由规律的字符串，不能通过object.name的方式获取。
JavaScript界说方式如下：
与JSON对象相比，套在’’大概””即可
var obj=’{“name”:”晓春”,”sex”:”男”}’;
直接通过obj.name返回值为undefined
2、JSON对象和对象JSON字符串的利用方式

2.1、JSON字符串的利用

JSON字符串的利用必要先讲JSON字符串转化成JSON对象。
具体利用方式如下：

1. var jsonString='{"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}}';
2. var jsonObject=JSON.parse(jsonString);
3. console.log(jsonObject.hobby); //输出结果为{"hobby1":"编程"}

复制代码

后续利用方式与JSON对象相同
2.2、JSON对象的利用方式

【通过object.name的方式获取】

1. var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
3. console.log(jsonString.name);//输出结果为: 晓春

复制代码

【通过object[‘name’]的方式】

1. var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
2. console.log(jsonString['name']);

复制代码

【通过Object.values统一取值】
Object.values(jsonString);//取出当前所有属性对应的值

1. var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
2. //将所有属性的值转化成数组类型的参数
3. var jsonValues=Object.values(jsonString);
4. //输出结果为晓春
5. console.log(jsonValues[0]);

复制代码

【通过Object.keys()获取所有对象的键名】
Object.keys()获取JSON对象的所有键名并返回一个数组范例的参数。

1. var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
2. //将所有属性的值转化成数组类型的参数
3. var jsonkeys=Object.keys(jsonString);
4. //输出结果为晓春
5. console.log(jsonString[jsonkeys[0]]);

复制代码

【如果对象的属性是一个变量】

1. var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
2. var attributeName="name";//name为传入属性的名称
3. console.log(jsonString[attributeName]);

复制代码

3、JSON数组解析

【JSON字符串数组】
先通过JSON.parse将字符串转化成数组

1. //数组类型的json
3. var jsonString= '[{"name":"晓春","sex":"男"},{"name":"大春","sex":"男"}]';
4. var jsonArray=JSON.parse(jsonString);
5. for(var i=0;i<jsonArray.length;i++){
6.       //输出结果：{"name":"晓春","sex":"男"}，输出结果晓春
7.       console.log(jsonArray[i]);
8.       //获取name，输出结果晓春
9.       console.log(jsonArray[i].name);
10. }

复制代码

【JSON数组-通过JSON.parse解析】

1. //数组类型的json
2. var jsonArray=[{"name":"晓春","sex":"男"},{"name":"大春","sex":"男"}];
3. for(var i=0;i<jsonArray.length;i++){
4.       //输出结果：{"name":"晓春","sex":"男"}，输出结果晓春
5.       console.log(jsonArray[i]);
6.       //获取name，输出结果晓春
7.       console.log(jsonArray[i].name);
8. }

复制代码

输出效果：

【JSON数组-通过eval解析】
eval可以将json字符串转化成json数组，但是必要注意，json字符串必须是数组范例
也就是必须包含[]

1. //数组类型的json
2. var jsonString= '[{"name":"晓春","sex":"男"},{"name":"大春","sex":"男"}]';
3. var jsonArray=eval(jsonString);
4. for(var i=0;i<jsonArray.length;i++){
5.       //输出结果：{"name":"晓春","sex":"男"}，输出结果晓春
6.       console.log(jsonArray[i]);
7.       //获取name，输出结果晓春
8.       console.log(jsonArray[i].name);
9. }

复制代码

4、Springboot返回值阐明

springboot工程中，我们喜欢通过@ResponseBody的方式返回JSON数组，解法与上面的解法相同
【同样利用eval解析即可】

1. //数组类型的json
2. var jsonString= '[{"name":"晓春","sex":"男"},{"name":"大春","sex":"男"}]';
3. var jsonArray=eval(jsonString);
4. for(var i=0;i<jsonArray.length;i++){
5.       //输出结果：{"name":"晓春","sex":"男"}，输出结果晓春
6.       console.log(jsonArray[i]);
7.       //获取name，输出结果晓春
8.       console.log(jsonArray[i].name);
9. }

复制代码

5、关于eval的阐明

禁用eval()
JavaScript中的eval()函数是有潜伏伤害，而且经常被误用。在不可信的代码里利用eval()有可能使程序受到不同的注入攻击。
在有些大公司里面，会有代码审计体系，审计体系会要求禁用eval()，这个时间就必要替换方案，我们此处通过jQuery方案进行替换
5.1、怎样替换eval()

替换方案方案非常多，介绍利用jQuery的方式替换eval()
【后端返回值】
后端可采用@ResponseBody将对象转化成json字符串。

1. [
2.   {"name":"晓春","sex":"男","age":"30","address":"安徽合肥","password":"123456"},
3.    {"name":"十一郎","sex":"男","address":"安徽合肥","password":"123456"},
4. ]

复制代码

5.2、原有的eval()方案

提示：eval()是一个伤害的函数，它利用与调用者相同的执行权限......

1. $.ajax({
2.    type:"get",
3.    url:"/test"
4.    cache:false,
5.    dataType:"text",
6.    success:function(data){
7.      var result = eval(data);      
8.      for(var i=0;i<result.length;i++){
9.         console.log(result[i].name);
10.      }
11.    }
12. });

复制代码

5.3、jQuery的$.each替换方案

替换方案中利用了jQuery的each循环替换了原有的eval用法
界说数组的时间建议利用如下方式：
var result=[];否则会提示：The array literal notation [] is preferable.(no-array-constructor)

1. $.ajax({
2.    type:"get",
3.    url:"/test"
4.    cache:false,
5.    dataType:"text",
6.    success:function(data){
7.      var jsonData=JSON.parse(data);
8.      var result=[];//代码规则不建议使用var result=new Array();
9.      $.each(jsonData,function(index,obj){
10.          result.push(obj);
11.      });
13.      for(var i=0;i<result.length;i++){
14.         console.log(result[i].name);
15.      }
16.    }
17. });

复制代码

对你有帮助，点赞和关注，就是我们创作最大的动力。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。