javascript中eval解析JSON字符串


Posted in Javascript onFebruary 27, 2016

我们都知道,高级浏览器可以用  JSON.parse() API 将一个 JSON 字符串解析成 JSON 数据,稍微欠妥点的做法,我们可以用 eval() 函数。

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval('(' + str + ')');
console.log(obj); // Object {name: "hanzichi", age: 10}

是否注意到,向 eval() 传参时,str 变量外裹了一层小括号?为什么要这样做?

我们先来看看 eval 函数的定义以及使用。

eval() 的参数是一个字符串。如果字符串表示了一个表达式,eval() 会对表达式求值。如果参数表示了一个或多个 JavaScript 声明, 那么 eval() 会执行声明。不要调用 eval() 来为算数表达式求值; JavaScript 会自动为算数表达式求值。

简单地说,eval 函数的参数是一个字符串,如果把字符串 “noString” 化处理,那么得到的将是正常的可以运行的 JavaScript 语句。

怎么说?举个栗子,如下代码:

var str = "alert('hello world')";
eval(str);

执行后弹出 “hello world”。我们把 str 变量 “noString” 化,粗暴点的做法就是去掉外面的引号,内部调整(转义等),然后就变成了:

alert('hello world')

very good!这是正常的可以运行的 JavaScript 语句!运行之!

再回到开始的问题,为什么 JSON 字符串要裹上小括号。如果不加,是这个样子的:

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :

恩,报错了。为什么会报错?试试把 str “noString” 化,执行一下:

{"name": "hanzichi", "age": 10}; 
// Uncaught SyntaxError: Unexpected token :

毫无疑问,一个 JSON 对象或者说是一个对象根本就不是能执行的 JavaScript 语句!等等,试试以下代码:

var str = '{name: "hanzichi"}';
var obj = eval(str);
console.log(obj); // hanzichi

这又是什么鬼?但是给 name 加上 “” 又报错?

var str = '{"name": "hanzichi"}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :
console.log(obj);

好吧,快晕了,其实还是可以将 str “nostring” 化,看看是不是能正确执行的 JavaScript 语句。前者的结果是:

{name: "hanzichi"}

这确实是一条合法的 JavaScript 语句。{} 我们不仅能在 if、for 语句等场景使用,甚至可以在任何时候,因为 ES6 之前 JavaScript 只有块级作用域,所以对于作用域什么的并不会有什么冲突。去掉 {} 后 name: "hanzichi"也是合法的语句,一个 label 语句,label 语句在跳出嵌套的循环中非常好用,具体可以参考 label,而作为 label 语句的标记,name 是不能带引号的,标记能放在 JavaScript 代码的任何位置,用不到也没关系。

一旦一个对象有了两个 key,比如 {name: "hanzichi", age: 10} ,ok,两个 label 语句?将 “hanzhichi” 以及 10 分别看做是语句,但是 语句之间只能用封号连接!(表达式之间才能用逗号)。所以改成下面这样也是没有问题的:

var str = '{name: "hanzichi"; age: 10}';
var obj = eval(str); 
console.log(obj); // 10

越扯越远,文章开头代码的错误的原因是找到了,为什么套个括号就能解决呢?简单来说,() 会把语句转换成表达式,称为语句表达式。括号里的代码都会被转换为表达式求值并且返回,对象字面量必须作为表达式而存在。

本文并不会大谈表达式,值得记住的一点是,表达式永远有一个返回值。大部分表达式会包裹在() 内,小括号内不能为空,如果有多个表达式,用逗号隔开,也就是所谓的逗号表达式,会返回最后一个的值。

Javascript 相关文章推荐
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
javascript先序遍历DOM树的方法
Feb 27 #Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 #Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 #Javascript
JS原型、原型链深入理解
Feb 27 #Javascript
Javascript中Date类型和Math类型详解
Feb 27 #Javascript
原生javascript实现匀速运动动画效果
Feb 26 #Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 #Javascript
You might like
通达OA公共代码 php常用检测函数
2011/12/14 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
php中session退出登陆问题
2014/02/27 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
js常用函数 不错
2006/09/08 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python实现爬取马云的微博功能示例
2019/02/16 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python中return函数返回值实例用法
2020/11/19 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
初中语文教学反思
2014/02/02 职场文书
优秀实习生感言
2014/03/01 职场文书
士力架广告词
2014/03/20 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
工商干部先进事迹
2014/05/14 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
导游欢迎词范文
2015/01/23 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers