常州专业网站建设费用,网站域名备案在哪里,企业门户网站静态模板,wordpress全平台解决方案1、问题概述#xff1f;
JavaScript解析JSON对象是常用功能之一。
此处我们要明确JSON对象和JSON字符串的区别#xff1f;否则会给我们的解析带来困扰。
主要实现如下功能#xff1a;
1、JavaScript解析JSON字符串和JSON对象?
2、JavaScript解析JSON数组?
3、JavaSc…
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 jsonObjectJSON.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 jsonValuesObject.values(jsonString);
//输出结果为晓春
console.log(jsonValues[0]); 【通过Object.keys()获取所有对象的键名】
Object.keys()获取JSON对象的所有键名并返回一个数组类型的参数。
var jsonString{name:晓春,sex:男,hobby:{hobby1:编程}};
//将所有属性的值转化成数组类型的参数
var jsonkeysObject.keys(jsonString);
//输出结果为晓春
console.log(jsonString[jsonkeys[0]]);
【如果对象的属性是一个变量】
var jsonString{name:晓春,sex:男,hobby:{hobby1:编程}};
var attributeNamename;//name为传入属性的名称
console.log(jsonString[attributeName]);
3、JSON数组解析
【JSON字符串数组】
先通过JSON.parse将字符串转化成数组
//数组类型的jsonvar jsonString [{name:晓春,sex:男},{name:大春,sex:男}];
var jsonArrayJSON.parse(jsonString);
for(var i0;ijsonArray.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 i0;ijsonArray.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 jsonArrayeval(jsonString);
for(var i0;ijsonArray.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 jsonArrayeval(jsonString);
for(var i0;ijsonArray.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:/testcache:false,dataType:text,success:function(data){var result eval(data); for(var i0;iresult.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:/testcache:false,dataType:text,success:function(data){var jsonDataJSON.parse(data);var result[];//代码规则不建议使用var resultnew Array();$.each(jsonData,function(index,obj){result.push(obj);});for(var i0;iresult.length;i){console.log(result[i].name);}}
});
对你有帮助点赞和关注就是我们创作最大的动力。
