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对象。
具体使用方式如下：
var jsonString='{"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}}';
var jsonObject=JSON.parse(jsonString);
console.log(jsonObject.hobby); //输出结果为{"hobby1":"编程"}后续使用方式与JSON对象相同
2.2、JSON对象的使用方式
【通过object.name的方式获取】
var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};console.log(jsonString.name);//输出结果为: 晓春【通过object[‘name’]的方式】
var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
console.log(jsonString['name']);【通过Object.values统一取值】
Object.values(jsonString);//取出当前所有属性对应的值
var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
//将所有属性的值转化成数组类型的参数
var jsonValues=Object.values(jsonString);
//输出结果为晓春
console.log(jsonValues[0]);【通过Object.keys()获取所有对象的键名】
Object.keys()获取JSON对象的所有键名并返回一个数组类型的参数。
var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
//将所有属性的值转化成数组类型的参数
var jsonkeys=Object.keys(jsonString);
//输出结果为晓春
console.log(jsonString[jsonkeys[0]]);【如果对象的属性是一个变量】
var jsonString={"name":"晓春","sex":"男","hobby":{"hobby1":"编程"}};
var attributeName="name";//name为传入属性的名称
console.log(jsonString[attributeName]);3、JSON数组解析
【JSON字符串数组】
先通过JSON.parse将字符串转化成数组
//数组类型的jsonvar jsonString= '[{"name":"晓春","sex":"男"},{"name":"大春","sex":"男"}]';
var jsonArray=JSON.parse(jsonString);
for(var i=0;i<jsonArray.length;i++){//输出结果：{"name":"晓春","sex":"男"}，输出结果晓春console.log(jsonArray[i]);//获取name，输出结果晓春console.log(jsonArray[i].name);
}【JSON数组-通过JSON.parse解析】
//数组类型的json
var jsonArray=[{"name":"晓春","sex":"男"},{"name":"大春","sex":"男"}];
for(var i=0;i<jsonArray.length;i++){//输出结果：{"name":"晓春","sex":"男"}，输出结果晓春console.log(jsonArray[i]);//获取name，输出结果晓春console.log(jsonArray[i].name);
}输出结果：
【JSON数组-通过eval解析】
eval可以将json字符串转化成json数组，但是需要注意，json字符串必须是数组类型
也就是必须包含[]
//数组类型的json
var jsonString= '[{"name":"晓春","sex":"男"},{"name":"大春","sex":"男"}]';
var jsonArray=eval(jsonString);
for(var i=0;i<jsonArray.length;i++){//输出结果：{"name":"晓春","sex":"男"}，输出结果晓春console.log(jsonArray[i]);//获取name，输出结果晓春console.log(jsonArray[i].name);
}4、Springboot返回值说明
springboot工程中，我们喜欢通过@ResponseBody的方式返回JSON数组，解法与上面的解法相同
【同样使用eval解析即可】
//数组类型的json
var jsonString= '[{"name":"晓春","sex":"男"},{"name":"大春","sex":"男"}]';
var jsonArray=eval(jsonString);
for(var i=0;i<jsonArray.length;i++){//输出结果：{"name":"晓春","sex":"男"}，输出结果晓春console.log(jsonArray[i]);//获取name，输出结果晓春console.log(jsonArray[i].name);
}5、关于eval的说明
禁用eval()
JavaScript中的eval()函数是有潜在危险，而且经常被误用。在不可信的代码里使用eval()有可能使程序受到不同的注入攻击。
在有些大公司里面，会有代码审计系统，审计系统会要求禁用eval()，这个时候就需要替代方案，我们此处通过jQuery方案进行替代
5.1、如何替代eval()
替代方案方案非常多，介绍使用jQuery的方式替代eval()
【后端返回值】
后端可采用@ResponseBody将对象转化成json字符串。
[{"name":"晓春","sex":"男","age":"30","address":"安徽合肥","password":"123456"},{"name":"十一郎","sex":"男","address":"安徽合肥","password":"123456"},
]5.2、原有的eval()方案
提示：eval()是一个危险的函数，它使用与调用者相同的执行权限......
$.ajax({type:"get",url:"/test"cache:false,dataType:"text",success:function(data){var result = eval(data); for(var i=0;i<result.length;i++){console.log(result[i].name);}}
});5.3、jQuery的$.each替代方案
替代方案中使用了jQuery的each循环替代了原有的eval用法
定义数组的时候建议使用如下方式：
var result=[];否则会提示：The array literal notation [] is preferable.(no-array-constructor)
$.ajax({type:"get",url:"/test"cache:false,dataType:"text",success:function(data){var jsonData=JSON.parse(data);var result=[];//代码规则不建议使用var result=new Array();$.each(jsonData,function(index,obj){result.push(obj);});for(var i=0;i<result.length;i++){console.log(result[i].name);}}
});对你有帮助，点赞和关注，就是我们创作最大的动力。