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 相关文章推荐
Javascript实现的鼠标经过时播放声音
May 18 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
js中的 || 与 && 运算符详解
May 24 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
用JS实现选项卡
Mar 23 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
php如何获取Http请求
2020/04/30 PHP
可输入的下拉框
2006/06/19 Javascript
DOM相关内容速查手册
2007/02/07 Javascript
jscript之List Excel Color Values
2007/06/13 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Python读写docx文件的方法
2018/05/08 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python虚拟环境完美部署教程
2019/08/06 Python
解决python运行效率不高的问题
2020/07/20 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
对公司合理化的建议书
2014/03/12 职场文书
读书活动总结
2014/04/28 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫