JavaScript eval() 函数

来源：互联网发布：手机免费推广软件编辑：程序博客网时间：2024/06/02 03:28

JavaScript eval() 函数

JavaScript 全局对象

定义和用法

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

语法

eval(string)

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

返回值

通过计算 string 得到的值（如果有的话）。

说明

该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。

如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。

抛出

如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。

如果非法调用 eval()，则抛出 EvalError 异常。

如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者。

提示和注释

提示：虽然 eval() 的功能非常强大，但在实际使用中用到它的情况并不多。

实例

例子 1

在本例中，我们将在几个字符串上运用 eval()，并看看返回的结果：

<script type="text/javascript">eval("x=10;y=20;document.write(x*y)")document.write(eval("2+2"))var x=10document.write(eval(x+17))</script>

输出：

例子 2

看一下在其他情况中，eval() 返回的结果：

eval("2+3")// 返回 5var myeval = eval;// 可能会抛出 EvalError 异常myeval("2+3");// 可能会抛出 EvalError 异常

可以使用下面这段代码来检测 eval() 的参数是否合法：

try  {     alert("Result:" + eval(prompt("Enter an expression:","")));     }catch(exception) {     alert(exception);     }

实用场景:处理Json数据

使用eval(),将后台写的json格式字符串处理成json对象数组

var jsonstr = "{name:'test',age:18}";

var jsonobj = eval(jsonstr);

//拼接过程

错误提示:

SyntaxError: invalid label

写到这里老是报错，我心想，不对呀，怎么拿不到对象呢？

为什么会这样？

原因在于：eval本身的问题。由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
alert(eval("{}"); // return undefined
alert(eval("({})");// return object[Object]

如何解决?

var josnobj = eval("("+jsonstr+")");

或者这样

eval("var jsonobj = " + jsonstr);

二，ajax的缓存

相信有写过图片验证码或者经常调用ajax的同学会遇到这种问题。

示例：

数据库：id(主键)pidname111test1211test2

如图所示，pid为11 有两个name test1,test2

第一次请求：

$.get("Handler.ashx",{mod:"get",pid:11},function(data){

alert(data);

});

显示值: test1,test2

数据库变动:

id(主键)pidname211test2

第二次请求:

$.get("Handler.ashx",{mod:"get",pid:11},function(data){

alert(data);

});

显示值: test1,test2

为什么会这样？

监视请求后发现，第二次请求压根就没有进入到Handler.ashx文件中去，这次请求直接进入缓存中，原来，我们的浏览器已经很聪明了，对于ajax请求的参数相同时，他会自动的保存上一次请求得到的数据，图片的缓存也是这样的，当你第一次打开一个网站时候，你会发现相当的慢，第二次打开的时候就相当的快，这个时候，浏览器不是去请求网站的服务传送图片，而是直接在本地的缓存中取到。

那如何解决?

既然你的参数是一样的，那我让参数不一样就可以了。

$.get("Handler.ashx",{mod:"get",pid:11,random:Math.random()},function(data){

alert(data);

});

每次都会请求一个不同的参数，这样浏览器会让为是不同的请求而不会去缓存

另外一种方法是将$.get 换成$.ajax()

$.ajax()下有一个参数是这样的，cache:false 将设置成不缓存

请参考:$.ajax()的参数

=============由于时间关系，暂时写到这里，明天更新=============

三，json对象数组的前台拼接

正常的拼接过程:

?
var jsonstr = "";
//循环遍历json数组
for(var i=0;i<jsonobjs.length;i++){
  jsonstr +="<tr>";
  jsonstr +="<td>"+jsonobjs[i].name+"</td>";
  jsonstr +="<td>"+jsonobjs[i].age+"</td>";
  jsonstr +="<td>"+jsonobjs[i].id+"</td>";
  jsonstr +="<td>"+jsonobjs[i].createtime+"</td>";
  jsonstr +="<td>"+jsonobjs[i].typename+"</td>";
  //........n个属性都拼接出来
  jsonstr +="<td>"+jsonobjs[i].typeid+"</td>";
}
//加入到table里面去
$("#tablelist").append(jsonstr);

老大看了以后，说你知道一个对象的属性也可以循环获取吗？

不知道...

你知道你可以用数组来操作jsonstr字符串的拼接吗?

不知道...

你知道你可以使用innerHTML来进行动态生成么？

不知道...

改后的代码:

?
1
2
3
4
5
6
7
8
9
10
11
var strarr = [];
var objlength = jsonobjs.length;
for(var i=0;i<objlength ;i++){
  strarr.push("<tr>");
  for(var objpropertyin jsonobjs[i]){
    strarr.push("<td>");
    strarr.push(jsonobjs[i][objproperty ]);
    strarr.push("</td>");
  }
 document.getElementById("tblist").innerHTML = strarr.join(" ");
}

为什么要这样写？

1.当进行大量的字符串拼接的时候，使用数组的push方法效率要远远的高于+=的操作符，这是我经过实验和查资料后得到的结论，这个道理同样适用于C#的StringBuilder的Append方法(话说面试里面就有考到过).

2.当进行大量的循环操作的时候，需要将数组length属性拿出来，这样避免每次循环都会进行数组长度的计算，可以提高效率.

3.在能使用动态生成DOM对象的时候，如果对象内有少量的节点，或者没有结点，可以将结点提出来，然后使用innerHTML属性进行赋值，这样速度会快于appendChild()方法;

写代码，细节真的很重要。

另外推荐转载:30个提高Web程序的执行效率的好经验

四.动态生成的DOM对象

代码示例:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
 <head>
    <script type="text/javascript">
       
        window.onload = function(){
                //为btnadd注册事件
            document.getElementById("btnadd").onclick = function(){
                document.getElementById('dvbody').innerHTML ="<span id='sptest'>mytest</span>";
            }
            //为生成的span标签注册事件
            document.getElementById("sptest").onclick = function(){
                alert("click me");
            }
        }
    </script>
 </head>
 <body>
     <input type='button' value='产生span标签' id="btnadd" />
     <div id="dvbody">
     </div>
 </body>
</html>

当我点击span标签的时候，压根就没有发生我要的效果呀？

为什么会这样?

打开FireBug调试看看，我去，还是没有任何的异常。看了半天，最后才明白，原来就是因为采用的动态生成的试，所以当离开btnadd.onclick注册事件函数的时候为动态生成的sptest注册事件，这样脱离了他的范围，压根就找不到这个标签.所以应该这样写

如何解决?

<html>
 <head>
    <script type="text/javascript">
       
        window.onload = function(){
            document.getElementById("btnadd").onclick = function(){
                document.getElementById('dvbody').innerHTML ="<span id='sptest'>mytest</span>";
                //保持上下紧密联系一起
                document.getElementById("sptest").onclick = function(){
                alert("click me");
                }
            }
 
     
        }
    </script>
 </head>
 <body>
     <input type='button' value='产生span标签' id="btnadd" />
     <div id="dvbody">
     </div>
 </body>
</html>

0 0