JavaScript中 eval函數(shù)

義：它是一種接受字符串作為參數(shù)，并且可以將接受的字符串轉(zhuǎn)換成js表達(dá)式并且立即執(zhí)行該表達(dá)式；

eval（string）;

如果是一個表達(dá)式，eval函數(shù)將執(zhí)行表達(dá)式
如果是字符串，會先轉(zhuǎn)換成js語句然后執(zhí)行

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

需求：將對象轉(zhuǎn)成eval函數(shù)

avaScript —— 極簡主義

點(diǎn)關(guān)注，不迷路~

天天都是肉，也會有吃膩的那天。本篇文章我們就來一個小插曲兒，來調(diào)調(diào)情兒，調(diào)調(diào)味兒；其實(shí)主要是看到這個兩個知識點(diǎn)，怕后續(xù)會忘掉把它分享出來，所以活在當(dāng)下，就好比我遇到不懂的或疑惑的問題就會立刻百度一下，否則這件事件就會被擱置，這也是一種好的學(xué)習(xí)習(xí)慣哦~

1、巧妙使用eval()

1.1) eval是做什么的？

它是把代碼字符串解析成JS代碼并運(yùn)行該代碼。

str='console.log(123)'
eval(str);
打印結(jié)果：123

但是，我們不建議使用eval，原因有兩點(diǎn)：一是不安全(++number運(yùn)算會改變?nèi)肿兞縩umber)；二是非常消耗性(2次，1次解析成js語句，1次執(zhí)行)；

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

在將json字符串轉(zhuǎn)換成json對象的時候使用eval。比如：發(fā)起一個Ajax請求，然后服務(wù)器返回一個類似'{x:1,y:1}'結(jié)構(gòu)的json字符串

str='{"name":"anita","age":"10"}';
// 如果eval的時候不加括號還會報腳本錯誤,這是為什么呢？
result=eval('(' + str + ')');
console.log(typeof str, typeof result, result)
結(jié)果: string object {name: "anita", age: "10"}

為什么eval要添加括號？

原因：eval本身的問題。由于json是以{}的方式來開始以及結(jié)束的，在JS中，它會被當(dāng)成一個語句塊來處理，所以必須強(qiáng)制性的將它轉(zhuǎn)換成一種表達(dá)式。加上圓括號的目的是迫使eval函數(shù)在處理JavaScript代碼的時候強(qiáng)制將括號內(nèi)的表達(dá)式(expression)轉(zhuǎn)化為對象，而不是作為語句(statement)來執(zhí)行。舉一個例子，例如對象字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結(jié)束標(biāo)記，那么{}將會被認(rèn)為是執(zhí)行了一句空語句。

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

小結(jié)：JSON.parse的功能和eval一樣，不建議使用eval。僅作了解，現(xiàn)在基本不用了。

2、Doctype、嚴(yán)格模式與混雜模式

<!Doctype html> 文檔聲明，位于文檔中的最前面的位置，處于<html>標(biāo)簽之前。此標(biāo)簽告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。用于告知瀏覽器以何種模式來渲染文檔。

2.1) 嚴(yán)格模式：標(biāo)準(zhǔn)模式，頁面排版和js解析是以該瀏覽器支持的最高標(biāo)準(zhǔn)(W3C)來執(zhí)行。

2.2) 混雜模式：quirks模式，不嚴(yán)格按照標(biāo)準(zhǔn)模式執(zhí)行，主要用以兼容舊的瀏覽器，向后兼容。兼容低版本瀏覽器的行為以防止老站點(diǎn)無法工作。

兩者的區(qū)別：總體會有布局、樣式解析和腳本解析三方面的區(qū)別。

1)、盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個元素的寬度和高度，值得是元素內(nèi)容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包含了padding和border。

2)、設(shè)置行內(nèi)元素的寬高：在標(biāo)準(zhǔn)模式下，給<span>等行內(nèi)元素設(shè)置width和height都不會生效，而在quirks模式下，則會生效。

3)、設(shè)置百分比的高度：在標(biāo)準(zhǔn)模式下，一個元素的高度尤其包含的內(nèi)容決定，如果父元素沒有設(shè)置高度，子元素設(shè)置一個百分比的高度是無效的。

4)、margin:0 auto設(shè)置水平居中：使用margin:0 auto在標(biāo)準(zhǔn)模式下可以使元素水平居中，但在quirks模式下卻會失效。解決辦法：用text-align屬性：

body{text-align:center;}

#content{text-align:left;}

5)、quirks模式下設(shè)置圖片的padding會失效

6)、quirks模式下Table中的字體屬性不能繼承上層的設(shè)置

7)、quirks模式下white-space:pre（保留空白）會失效，(預(yù)格式化的文本, 保留換行或空格)

3、link和import的區(qū)別

頁面中使用CSS的方式主要有3種:

1) 行內(nèi)樣式——在行內(nèi)添加定義style屬性值;

2) 內(nèi)聯(lián)樣式——頁面頭部內(nèi)嵌調(diào)用；

3) 外部樣式——外面鏈接調(diào)用；

3.1) 其中外面引用有兩種：link和@import。

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

外面引用兩者的區(qū)別：

區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)，比如：設(shè)置rel引入字體圖標(biāo)庫；@import屬于CSS范疇，只能加載CSS。

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

區(qū)別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。

區(qū)別3：link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區(qū)別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

所以，一般情況下建議使用link，但性能優(yōu)化需要按需加載時可以考慮使用@imort，后續(xù)會有專題文章來講解性能優(yōu)化。

小結(jié)：其他事務(wù)、同時加載、兼容、控制DOM。

3.2) URL、src 、 href 的區(qū)別

區(qū)別：

URL 是統(tǒng)一資源定位器，用于定位互聯(lián)網(wǎng)上的各種資源，如web頁面。

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

href 是引用，建立資源關(guān)系，常用在link、a標(biāo)簽中；不會暫停瀏覽器的渲染。

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

src 是嵌入，替換，常用在img、script、iframe標(biāo)簽中；會暫停瀏覽器的渲染，放在底部。img標(biāo)簽頁與此類似，瀏覽器暫停加載直到提取和加載圖像。

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

小結(jié)：

URL不是屬性，src 與 href均是屬性；

建立資源關(guān)系 VS 替換；

是否暫停瀏覽器渲染。

val函數(shù)的工作原理

eval函數(shù)會評估一個給定的含有JavaScript代碼的字符串，并且試圖去執(zhí)行包含在字符串里的表達(dá)式或者一系列的合法的JavaScript語句。eval函數(shù)將把最后一個表達(dá)式或者語句所包含的值或引用作為返回值。

舉例說明

eval評估JavaScript表達(dá)式

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的格式是由大括號和由冒號（：）構(gòu)成的名值對所組成的。注意JSON格式與對象字面量 (object literals) 的區(qū)別：JSON的名字部分嚴(yán)格用引號+名字來表示。

舉例說明

對象的字面量

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這種輕量級的數(shù)據(jù)格式作為客戶端與服務(wù)器之間的傳輸格式逐漸地流行起來，進(jìn)而出現(xiàn)的問題是如何將服務(wù)器端構(gòu)建好的JSON數(shù)據(jù)轉(zhuǎn)化為可用的JavaScript對象。利用eval函數(shù)無疑是一種簡單而直接的方法。在轉(zhuǎn)化的時候需要將JSON字符串的外面包裝一層圓括號：

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

為什么要加括號？

加上圓括號的目的是迫使eval函數(shù)在評估JavaScript代碼的時候強(qiáng)制將括號內(nèi)的表達(dá)式（expression）轉(zhuǎn)化為對象，而不是作為語句（statement）來執(zhí)行。舉一個例子，例如對象字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結(jié)束標(biāo)記，那么{}將會被認(rèn)為是執(zhí)行了一句空語句。所以下面兩個執(zhí)行結(jié)果是不同的：

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

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

JSON格式的名字部分為什么要加引號？

因?yàn)閑val函數(shù)會將{foo:”bar”}解釋成合法的JavaScript語句，而非表達(dá)式。但是人們往往想要的是讓eval將這段代碼解釋成一個對象。所以JSON格式會強(qiáng)制你去在名字的外側(cè)加上引號再結(jié)合圓括號，這樣eval就不會錯誤的將JSON解釋成代碼塊。

舉例說明