JavaScript中 eval函数

义：它是一种接受字符串作为参数，并且可以将接受的字符串转换成js表达式并且立即执行该表达式；

eval（string）;

如果是一个表达式，eval函数将执行表达式
如果是字符串，会先转换成js语句然后执行

 eval('var num=10;')
 var arr=eval('[1,2,3]')
 console.log(num); //10
 console.log(typeof arr); //Object

需求：将对象转成eval函数

avaScript —— 极简主义

点关注，不迷路~

天天都是肉，也会有吃腻的那天。本篇文章我们就来一个小插曲儿，来调调情儿，调调味儿；其实主要是看到这个两个知识点，怕后续会忘掉把它分享出来，所以活在当下，就好比我遇到不懂的或疑惑的问题就会立刻百度一下，否则这件事件就会被搁置，这也是一种好的学习习惯哦~

1、巧妙使用eval()

1.1) eval是做什么的？

它是把代码字符串解析成JS代码并运行该代码。

str='console.log(123)'
eval(str);
打印结果：123

但是，我们不建议使用eval，原因有两点：一是不安全(++number运算会改变全局变量number)；二是非常消耗性(2次，1次解析成js语句，1次执行)；

1.2) 如何巧妙使用eval()？

在将json字符串转换成json对象的时候使用eval。比如：发起一个Ajax请求，然后服务器返回一个类似'{x:1,y:1}'结构的json字符串

str='{"name":"anita","age":"10"}';
// 如果eval的时候不加括号还会报脚本错误,这是为什么呢？
result=eval('(' + str + ')');
console.log(typeof str, typeof result, result)
结果: string object {name: "anita", age: "10"}

为什么eval要添加括号？

原因：eval本身的问题。由于json是以{}的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象，而不是作为语句(statement)来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。

console.log(eval("{}"); // undefined 
console.log(eval("({})");// object[Object]

小结：JSON.parse的功能和eval一样，不建议使用eval。仅作了解，现在基本不用了。

2、Doctype、严格模式与混杂模式

<!Doctype html> 文档声明，位于文档中的最前面的位置，处于<html>标签之前。此标签告知浏览器文档使用哪种HTML或XHTML规范。用于告知浏览器以何种模式来渲染文档。

2.1) 严格模式：标准模式，页面排版和js解析是以该浏览器支持的最高标准(W3C)来执行。

2.2) 混杂模式：quirks模式，不严格按照标准模式执行，主要用以兼容旧的浏览器，向后兼容。兼容低版本浏览器的行为以防止老站点无法工作。

两者的区别：总体会有布局、样式解析和脚本解析三方面的区别。

1)、盒模型：在W3C标准中，如果设置一个元素的宽度和高度，值得是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。

2)、设置行内元素的宽高：在标准模式下，给<span>等行内元素设置width和height都不会生效，而在quirks模式下，则会生效。

3)、设置百分比的高度：在标准模式下，一个元素的高度尤其包含的内容决定，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4)、margin:0 auto设置水平居中：使用margin:0 auto在标准模式下可以使元素水平居中，但在quirks模式下却会失效。解决办法：用text-align属性：

body{text-align:center;}

#content{text-align:left;}

5)、quirks模式下设置图片的padding会失效

6)、quirks模式下Table中的字体属性不能继承上层的设置

7)、quirks模式下white-space:pre（保留空白）会失效，(预格式化的文本, 保留换行或空格)

3、link和import的区别

页面中使用CSS的方式主要有3种:

1) 行内样式——在行内添加定义style属性值;

2) 内联样式——页面头部内嵌调用；

3) 外部样式——外面链接调用；

3.1) 其中外面引用有两种：link和@import。

HTML代码
<link rel="stylesheet" rel="stylesheet" href="CSS文件" type="text/css" /> 
 
HTML代码
<style type="text/css"> 
@import url("CSS文件"); 
</style>

外面引用两者的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务，比如：设置rel引入字体图标库；@import属于CSS范畴，只能加载CSS。

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

所以，一般情况下建议使用link，但性能优化需要按需加载时可以考虑使用@imort，后续会有专题文章来讲解性能优化。

小结：其他事务、同时加载、兼容、控制DOM。

3.2) URL、src 、 href 的区别

区别：

URL 是统一资源定位器，用于定位互联网上的各种资源，如web页面。

http://segmentfault.com/html/index.asp
<img src="../abc" />

href 是引用，建立资源关系，常用在link、a标签中；不会暂停浏览器的渲染。

<link href="reset.css" rel="stylesheet"/>

src 是嵌入，替换，常用在img、script、iframe标签中；会暂停浏览器的渲染，放在底部。img标签页与此类似，浏览器暂停加载直到提取和加载图像。

<script src="script.js"></script>

小结：

URL不是属性，src 与 href均是属性；

建立资源关系 VS 替换；

是否暂停浏览器渲染。

val函数的工作原理

eval函数会评估一个给定的含有JavaScript代码的字符串，并且试图去执行包含在字符串里的表达式或者一系列的合法的JavaScript语句。eval函数将把最后一个表达式或者语句所包含的值或引用作为返回值。

举例说明

eval评估JavaScript表达式

var bar='bar';

var foobar=eval('"foo" + bar');

alert(foobar);

eval评估JavaScript语句

var bar='bar';

// if variable bar equals 'bar', foobar is the result of // last executing statement: bar="foo-bar";

var foobar=eval('if(bar=="bar") {bar="foo-bar";} else {bar="bar-foo";}');

alert(foobar);// change the valuebar='foo';

// now our the last executed statement is: bar="bar-foo";

// therefore the value of variable foobar has been changed

// into 'bar-foo'foobar=eval('if(bar=="bar") {bar="foo-bar";} else {bar="bar-foo";}');

alert(foobar);

JSON的格式

JSON的格式是由大括号和由冒号（：）构成的名值对所组成的。注意JSON格式与对象字面量 (object literals) 的区别：JSON的名字部分严格用引号+名字来表示。

举例说明

对象的字面量

var objectLiteral={ name: "Objector.L", age: "24", special: "JavaScript", sayName: function() { return this.name; }

};

JSON对象

var jsonFormat={ "summary": "Blogs", "blogrolls": [ { "title": "Explore JavaScript", "link": "http://example.com/" }, { "title": "Explore JavaScript", "link": "http://example.com/" } ]

};

eval和JSON

由于Ajax的兴起，JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来，进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号：

var jsonObject=eval("(" + jsonFormat + ")");

为什么要加括号？

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

alert(eval("{}"); // return undefined

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

JSON格式的名字部分为什么要加引号？

因为eval函数会将{foo:”bar”}解释成合法的JavaScript语句，而非表达式。但是人们往往想要的是让eval将这段代码解释成一个对象。所以JSON格式会强制你去在名字的外侧加上引号再结合圆括号，这样eval就不会错误的将JSON解释成代码块。

举例说明

eval错误解析语义

alert(eval('{foo:"bar"}')); // return "bar", incorrect

eval正确解析JSON

alert(eval('({"foo": "bar"})')); // return JSON object, correct

结论

理解eval的工作原理和json的严格的限定格式，合理结合eval和json应用于JavaScript的数据传递和对象转换。

following this format:

eval('{' + jsonString + ')');

在线咨询

上一篇：《Web前端技术H5+CSS3》第二章 HTML基础
下一篇：编程语言PHP 是什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript中 eval函数

1、巧妙使用eval()

2、Doctype、严格模式与混杂模式

3、link和import的区别

您的项目需求