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);}}
});

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