浅入浅出JS中的eval及json

简介:

声明:

  首先声明一下,本人是JS新手,所以不敢说深入,只是把最近对eval的学习经验拿出来跟大家分享,如果您是高手可略去不看。

适合读者:

  对JS中的eval一知半解,不知eval是如何把字符串转换为json对象的,在用eval把字符串转换为json时常遇到“missing ] after element list”错误却不知哪儿错了的朋友

 

一、Eval介绍(这部分来自http://www.w3school.com.cn/js/jsref_eval.asp)

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

  语法:eval(string)

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

  返回值:通过计算 string 得到的值(如果有的话)。

  说明:该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 EvalError 异常。

  异常:如果参数中没有合法的表达式和语句,则抛出 SyntaxError 异常。如果非法调用 eval(),则抛出 EvalError 异常。如果传递给 eval() 的 Javascript 代码生成了一个异常,eval() 将把该异常传递给调用者。

 

二、Eval用法示例

  对于编程方面的问题我一直认为说明问题最好的方法就是示例,看了上面的定义我们再来看几个例子:

  code 1:

 1 var code1="\"a\" + 2";
2 var code2= {"a":2};
3 var code3 ="{\"b\":3}";
4
5 console.log(code1);
6 console.log(eval(code1));
7
8 console.log(code2);
9 console.log(code2.a);
10 console.log(eval(code2));
11 console.log(eval('('+ code2 +')'));
12
13 console.log(code3);
14 console.log(code3.b);
15 t = eval('('+code3+')');
16 console.log(t);
17 console.log(t.b);

  从5到17行分别会输出什么呢?在这里简单解析一下:

  code1是一个字符串加数字的表达式字符串,所以第5行原样输出为"a"+2,第6行经eval运算后输出a2。

  code2是一个json对象(关于json定义参考:深入浅出JSON),所以第8行输出Object { a=2},如果用alert(code2)会弹出[object Object]。第9行输出2。第10行呢,由于code2是一个json对象,不是一个字符串,因此eval在这里没有起作用,原样返回,所以跟第8行输出一样。第11行呢,由于code2已经是一个json对象,把json对象两边加一个括号进行运算的结果是什么呢,JS中这个语法是错的,所以这行会报异常,如果我们捕获一下异常输出会是什么呢,就是新手非常头痛的“missing ] after element list”了。

  code3是一个json格式的字符串,因此第13行输出{"b":3}。第14行输出undefined。第15行对这个字符串加括号(加括号的原因请看下文)后进行eval运算,把字符串转换成了json对象,所以第16行输出Object { b=3},第17行输出3。

  是不是这样呢,看看结果吧:

 

 

三、Eval把json格式字符串转换为json对象为什么要加括号

  这一点园子里有一篇文章讲得比较清楚(原文链接:eval和JSON),这里就不献丑了,这里直接用原文的话来说明。加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:

  code 2:

1 alert(eval("{}");  // return undefined
2 alert(eval("({})");// return object[Object]

  所以,code 1中第15行要加上括号,如果不加会怎么样呢,大家可以测试一下。关于这一点,大家可以类比一下SQL语句,当一个子查询结果要做为关联表用时,会在查询语句两边加上括号,如:

  code 3:

selecttop10*from TB where ID notin (selecttop5 ID from TB)

 

四、jquery中ajax返回值的处理

  用eval把字符串转换为json对象用的最多的地方就是在ajax中。ajax的返回值有些是json格式的字符串,所以要用eval('('+返回的json格式字符串+')')来转换,这样写一般是没有问题的,但现在有很多是用jquery中的ajax方法来做的,jquery的强大也让很多人在用时容易忽略一些问题,比较常见的就是contentType跟dataType,contentType与本文没什么关系,这里只说说dataType参数。

  dataType可用的类型有xml,html,script,json,jsonp,text,用的比较多的是xml,json,text。有些朋友在用时不管dataType是什么类型,都把返回值eval一下,有时碰巧对了,有时错了就不知道问题出在哪儿,一筹莫展。

  dataType是预期服务器返回的数据类型,如果不指定jQuery将自动根据HTTP包MIME信息返回responseXML或responseText。也就是说如果你dataType写的是json格式,jQuery在返回时已经把返回值转换成了json对象,这时就不需要再用eval转换了,如果dataType写的是text才需要用eval转换。

 

  希望本文对新手有所帮助,让大家不再害怕eval跟json。欢迎留言讨论。



本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
11月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
297 4
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
存储 JSON JavaScript
JavaScript JSON
【10月更文挑战第7天】JSON 是 JavaScript 中非常重要的一个数据格式,它为数据的表示和传输提供了一种简单而有效的方式。掌握 JSON 的使用方法和特点,对于开发高质量的 JavaScript 应用具有重要意义。
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
435 3
|
XML JSON JavaScript
js的json格式
js的json格式
|
存储 JSON JavaScript
JavaScript JSON
JavaScript JSON
88 5
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
349 0
|
1月前
|
JSON 缓存 自然语言处理
多语言实时数据微店商品详情API:技术实现与JSON数据解析指南
通过以上技术实现与解析指南,开发者可高效构建支持多语言的实时商品详情系统,满足全球化电商场景需求。