深入浅析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 相关文章推荐
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
php 清除网页病毒的方法
2008/12/05 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
arguments对象
2006/11/20 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
详解Python 函数参数的拆解
2020/09/02 Python
python中类与对象之间的关系详解
2020/12/16 Python
教师自我鉴定范文
2013/11/10 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
毕业自我评价
2014/02/05 职场文书
学习型班组申报材料
2014/05/31 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
出生公证书
2015/01/23 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python