深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解


Posted in Javascript onApril 03, 2016

“JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使JSON成为理想的数据交换语言,作用是易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。”

今天在这里笔者想简单谈谈jquery里面的JSON.parse()和JSON.stringify()函数,顺便还会提一下原生JS里面的eval()函数

(1)JSON.parse 函数

作用:将 JavaScript 对象表示法 (JSON) 字符串转换为对象。

语法:JSON.parse(text [, reviver])

参数:

text

必需。 一个有效的 JSON 字符串。

reviver

可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。
返回值:一个对象或数组

example:

var json = '{"name":"GDT","age":,"University":"GDUT"}';
var info = JSON.parse(json);//解析为JSON对象
document.write(info.name + ' is a student of ' + info.University + ' and he is ' + info.age + " years old."); /info为Object对象

(2)JSON.stringify()函数

作用:将 JavaScript 值转换为 JavaScript 对象表示法 (JSON) 字符串

语法:JSON.stringify( value [, replacer] [, space])

参数:

value

必需,通常为需要转换的JavaScript值(通常为对象或者数组)

replacer

可选,用于转换结果的函数或者数组

space

可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。

返回值:一个包含JSON文本的字符串

example:

var info = {name:"GDT",age:,University:"GDUT"};
var json = JSON.stringify(info); //转换为JSON字符串
document.write(json); //output为{"name":"GDT","age":23,"University":"GDUT"}

(3)eval()函数

作用:eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

语法:eval(string)

参数:

string

必需,要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。

返回值:返回计算string的值,如果有的话 (没有则不做任何改变返回)

example:

eval("x=;y=;document.write(x*y)"); //output为
document.write(eval("+"));//output为
var x=;
document.write(eval(x+));
//output为

使用eval()函数也可以将JSON字符串解析为对象,这个功能能完成JSON.parse()的功能,但是有不一样的地方,请看下面代码

// JSON.parse()
var json = '{"name":"GDT","age":,"University":"GDUT"}';
var info = JSON.parse(json);  //解析为JSON对象
document.write(info); //output为[object Object]
//eval()
var json = '{"name":"GDT","age":,"University":"GDUT"}';
var info = eval('(' + json + ')'); //解析为JSON对象
document.write(info); //output为[object Object]

不知道大家有木有注意到eval()还要用一对圆括号将字符串包起来,对此我寻找到比较好的解释就是:

原因:归结于eval本身的问题,由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

解决方法:加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。请看下列例子的不同

alert(eval("{}")); // return undefined
alert(eval('('+'{}'+')')); // return object[Object]

另外,相对于写法格式严格的JSON.parse()来说,eval()可以解析任何字符串,eval是不安全的,因为eval比较宽松,会有潜在的安全性问题。比如以下代码:

var str = '{"a":"b"}';
document.write(eval("("+str+")")); //正常解析为对象
var str = '{"a": (function(){alert("I can do something bad!");})()}';
eval('('+str+')'); //可以用来执行木马脚本

如果用恶意用户在json字符串中注入了向页面插入木马链接的脚本,用eval也是可以操作的,而用JSON.parse()则不必担心这个问题,可见,虽然eval()功能很强大,但是实际用到的机会并不多。

个人总结的时候到了,这是我人生第一篇的博客,在4月1号Fool's Day诞生,写得不好的地方还希望各位多多见谅,现在技术非常渣,我很希望现在能够一点一滴去积累知识,为日后的成功奠定好基础,fighting~

Javascript 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 #Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 #Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 #Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 #Javascript
JQuery解析XML的方法小结
Apr 02 #Javascript
javascript HTML5文件上传FileReader API
Mar 27 #Javascript
JavaScript中文件上传API详解
Apr 01 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP调用VC编写的COM组件实例
2014/03/29 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Python实现像awk一样分割字符串
2020/09/15 Python
民生工程实施方案
2014/03/22 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
拉拉队口号
2014/06/16 职场文书
暑期实践个人总结
2015/03/06 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python