之前寫過(guò)一篇 關(guān)于 JSON 的介紹文章，里面談到了 JSON 的解析。我們都知道，高級(jí)瀏覽器可以用 JSON.parse() API 將一個(gè) JSON 字符串解析成 JSON 數(shù)據(jù)，稍微欠妥點(diǎn)的做法，我們可以用eval() 函數(shù)。

JSON （JavaScript Object Notation）一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧。 JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包。

JSON的規(guī)則很簡(jiǎn)單： 對(duì)象是一個(gè)無(wú)序的“‘名稱/值'對(duì)”集合。一個(gè)對(duì)象以“{”（左括號(hào)）開始，“}”（右括號(hào)）結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”（冒號(hào)）；“‘名稱/值' 對(duì)”之間使用“,”（逗號(hào)）分隔

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval('(' + str + ')');
console.log(obj); // Object {name: "hanzichi", age: 10}

是否注意到，向 eval() 傳參時(shí)，str 變量外裹了一層小括號(hào)？為什么要這樣做？

我們先來(lái)看看 eval 函數(shù)的定義以及使用。

eval() 的參數(shù)是一個(gè)字符串。如果字符串表示了一個(gè)表達(dá)式，eval() 會(huì)對(duì)表達(dá)式求值。如果參數(shù)表示了一個(gè)或多個(gè) JavaScript 聲明， 那么 eval() 會(huì)執(zhí)行聲明。不要調(diào)用 eval() 來(lái)為算數(shù)表達(dá)式求值； JavaScript 會(huì)自動(dòng)為算數(shù)表達(dá)式求值。

簡(jiǎn)單地說(shuō)，eval 函數(shù)的參數(shù)是一個(gè)字符串，如果把字符串 "noString" 化處理，那么得到的將是正常的可以運(yùn)行的 JavaScript 語(yǔ)句。

怎么說(shuō)？舉個(gè)栗子，如下代碼：

var str = "alert('hello world')";
eval(str);

執(zhí)行后彈出 "hello world"。我們把 str 變量 "noString" 化，粗暴點(diǎn)的做法就是去掉外面的引號(hào)，內(nèi)部調(diào)整（轉(zhuǎn)義等），然后就變成了：

alert('hello world')

very good！這是正常的可以運(yùn)行的 JavaScript 語(yǔ)句！運(yùn)行之！

再回到開始的問(wèn)題，為什么 JSON 字符串要裹上小括號(hào)。如果不加，是這個(gè)樣子的：

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :

恩，報(bào)錯(cuò)了。為什么會(huì)報(bào)錯(cuò)？試試把 str "noString" 化，執(zhí)行一下：

{"name": "hanzichi", "age": 10}; // Uncaught SyntaxError: Unexpected token :

毫無(wú)疑問(wèn)，一個(gè) JSON 對(duì)象或者說(shuō)是一個(gè)對(duì)象根本就不是能執(zhí)行的 JavaScript 語(yǔ)句！等等，試試以下代碼：

var str = '{name: "hanzichi"}';
var obj = eval(str);
console.log(obj); // hanzichi

這又是什么鬼？但是給 name 加上 "" 又報(bào)錯(cuò)？

var str = '{"name": "hanzichi"}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :
console.log(obj); 

好吧，快暈了，其實(shí)還是可以將 str "nostring" 化，看看是不是能正確執(zhí)行的 JavaScript 語(yǔ)句。前者的結(jié)果是：

{name: "hanzichi"}

這確實(shí)是一條合法的 JavaScript 語(yǔ)句。{} 我們不僅能在 if、for 語(yǔ)句等場(chǎng)景使用，甚至可以在任何時(shí)候，因?yàn)?ES6 之前 JavaScript 只有塊級(jí)作用域，所以對(duì)于作用域什么的并不會(huì)有什么沖突。去掉 {} 后 name: "hanzichi" 也是合法的語(yǔ)句，一個(gè) label 語(yǔ)句，label 語(yǔ)句在跳出嵌套的循環(huán)中非常好用，具體可以參考 label，而作為 label 語(yǔ)句的標(biāo)記，name 是不能帶引號(hào)的，標(biāo)記能放在 JavaScript 代碼的任何位置，用不到也沒(méi)關(guān)系。

一旦一個(gè)對(duì)象有了兩個(gè) key，比如 {name: "hanzichi", age: 10}，ok，兩個(gè) label 語(yǔ)句？將 "hanzhichi" 以及 10 分別看做是語(yǔ)句，但是 語(yǔ)句之間只能用封號(hào)連接?。ū磉_(dá)式之間才能用逗號(hào)）。所以改成下面這樣也是沒(méi)有問(wèn)題的：

var str = '{name: "hanzichi"; age: 10}';
var obj = eval(str); 
console.log(obj); // 10

越扯越遠(yuǎn)，文章開頭代碼的錯(cuò)誤的原因是找到了，為什么套個(gè)括號(hào)就能解決呢？簡(jiǎn)單來(lái)說(shuō)，() 會(huì)把語(yǔ)句轉(zhuǎn)換成表達(dá)式，稱為語(yǔ)句表達(dá)式。括號(hào)里的代碼都會(huì)被轉(zhuǎn)換為表達(dá)式求值并且返回，對(duì)象字面量必須作為表達(dá)式而存在。

本文并不會(huì)大談表達(dá)式，關(guān)于表達(dá)式，可以參考文末鏈接。值得記住的一點(diǎn)是，表達(dá)式永遠(yuǎn)有一個(gè)返回值。大部分表達(dá)式會(huì)包裹在() 內(nèi)，小括號(hào)內(nèi)不能為空，如果有多個(gè)表達(dá)式，用逗號(hào)隔開，也就是所謂的逗號(hào)表達(dá)式，會(huì)返回最后一個(gè)的值。

以上所述是小編給大家介紹了JS中Eval解析JSON字符串的一個(gè)小問(wèn)題，希望對(duì)大家有所幫助！

最新評(píng)論