深入浅析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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
基于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
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
python实现关键词提取的示例讲解
2018/04/28 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python增加图像对比度的方法
2019/07/12 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
应届生保险求职信
2013/11/11 职场文书
2014升学宴答谢词
2014/01/26 职场文书
师德师风个人反思
2014/04/28 职场文书
2014高考励志标语
2014/06/05 职场文书
老兵退伍标语
2014/10/07 职场文书
《雷雨》教学反思
2016/02/20 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python