JSON 和 eval 函数
感谢:尚硅谷李立超老师的讲解
JSON 是什么?
JSON就是一个特殊格式的字符串 ,这个字符串可以被任意语言识别,并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
JSON和js对象的格式一样,只不过JSON字符串中的属性名必须加双引号,其他的和js的语法一致
//js对象
var obj = {
name:"孙悟空",
age:28,
gender:"男"
}
//js的属性类型都是string类型的,同时去掉空格和换行,所以改写为
var obj = {"name":"孙悟空","age":28,"gender":"男"}
//JSON格式就是:原来的js对象加上引号,转成的特殊字符串
var obj = '{"name":"孙悟空","age":28,"gender":"男"}'
JSON的分类
- 对象{}
- 数组[]
//json对象
var obj = '{"name":"孙悟空","age":28,"gender":"男"}';
//json数组,数组是特殊的对象
var arr = '["孙悟空",28,"男",true]';
JSON中允许的值
- 字符串
- 数值
- 布尔值
- null
- 对象
- 数组
//属于一个JSON对象,只是值是一个数组
var obj = '{"arr":[1,2,3]}'
//属于一个JSON数组,只是值是多个对象
var arr = '[{"name":"孙悟空","age":28,"gender":"男"},{"name":"猪八戒","age":38,"gender":"男"}]'
将JSON字符串转换为JS中的对象
js中为我们提供了一个工具类JSON,这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON
var json = '{"name":"孙悟空","age":28,"gender":"男"}';
var arr = '["孙悟空",28,"男",true]';
var o = JSON.parse(json);
var a = JSON.parse(arr);
console.log(o);
console.log(typeof o);
console.log(a);
console.log(typeof a);
JS对象转换为JSON字符串
var obj = {"name":"孙悟空","age":28,"gender":"男"};
var str = JSON.stringify(obj);
console.log(str);
//"{"name":"孙悟空","age":28,"gender":"男"}",控制台上输出的本来就是string所以看不出外面的引号,但是可以通过类型判断转换成了一个string字符串了
console.log(typeof str);
//string
JSON 这个对象在IE7及以下的浏览器中不支持,所以在这些浏览器中调用时会报错
eval()函数
- eval()函数可以用来执行一段字符串形式的JS代码,并将执行结果返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = 'console.log("我是eval函数");'
eval(str);
</script>
</body>
</html>
- 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块,如果不希望将其当成代码块解析,则需要在字符串前后各加一个()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = '{"name":"孙悟空","age":28,"gender":"男"}';
// eval(str);
//报错,无法执行,将{}当成是代码块
var obj = eval("(" + str + ")");
console.log(obj);
console.log(typeof obj);
</script>
</body>
</html>
eval()函数功能强大,可以直接执行字符串中的js代码,但是在开发中尽量不要使用,首先它的执行性能比较差,然后它还具有安全隐患
IE7及以下浏览器如果需要使用JSON,又不使用eval()函数的情况下,如何兼容?
可以在index.html中引入一个外部的JS文件-json2.js
,github下载地址:https://github.com/douglascrockford/JSON-js
- 从github上下载了json2.js 之后,放到项目的js目录下
- 在index.html的头部加上
<script type="text/javascript" scr="js/json2.js"></script>
src为你本地json2.js的地址