JSON在Javascript中的使用（eval和JSON.parse的區(qū)別）詳細(xì)解析
JSON 和XML比較
json的長(zhǎng)度和xml比起來更加短小
json讀取速度更快
json可以使用JavaScript的內(nèi)置方法直接進(jìn)行解析，轉(zhuǎn)化成javascript對(duì)象，非常方便。
在Javascript使用eval將接送轉(zhuǎn)化為json對(duì)象
var jsonData = '{"persons":{"name":"成龍","age":58},{"name":"吳京","age":33},"name":"甄子丹","age":44}';
var jsonObj = eval('('+jsonData+')');
//訪問json對(duì)象數(shù)組的第一個(gè)對(duì)象的name屬性
console.log(jsonObj.persons[0].name);
在Javascript使用JSON.parse將接送轉(zhuǎn)化為json對(duì)象
var jsonData = '{"persons":{"name":"成龍","age":58},{"name":"吳京","age":33},"name":"甄子丹","age":44}';
var jsonObj = JSON.parse(jsonData);
//訪問json對(duì)象數(shù)組的第一個(gè)對(duì)象的name屬性
console.log(jsonObj.persons[0].name);
但是eval方法很不安全，例如：
var jsonData = '{"persons":{"name":"成龍","age":window.alert(123)},{"name":"吳京","age":33},"name":"甄子丹","age":44}';
var jsonObj = eval('('+jsonData+')');
//訪問json對(duì)象數(shù)組的第一個(gè)對(duì)象的name屬性
console.log(jsonObj.persons[0].name);
將age的值換成了Javascript代碼，依然可以解析，加入有人惡意修改這個(gè)代碼，那么就會(huì)造成嚴(yán)重后果。
但是JSON.parse不同
var jsonData = '{"persons":{"name":"成龍","age":window.alert(123)},{"name":"吳京","age":33},"name":"甄子丹","age":44}';
var jsonObj = JSON.parse(jsonData);
//訪問json對(duì)象數(shù)組的第一個(gè)對(duì)象的name屬性
console.log(jsonObj.persons[0].name);
瀏覽器會(huì)檢查出json中的不合理的代碼，并報(bào)告錯(cuò)誤
所以推薦使用JSON.parse
PS：下面在單獨(dú)介紹下eval()和JSON.parse()的區(qū)別
我們將一個(gè)字符串解析成json對(duì)象時(shí)可以使用兩種方法：
假設(shè)我們有一個(gè)json格式的字符串：
'{
"student" : [
{"name":"鳴人","age":17},
{"name":"小櫻","age":17},
{"name":"佐助","age":17}
]
}'
然后我們需要把它解析成json對(duì)象
1、eval（）代碼如下：
var data = '{"student" : [{"name":"鳴人","age":17}, {"name":"小櫻","age":17},{"name":"佐助","age":17}]}';
eval('(' + data + ')');
2、JSON.parse()代碼如下：
var data = '{"student" : [{"name":"鳴人","age":17}, {"name":"小櫻","age":17},{"name":"佐助","age":17}]}';
JSON.parse(data);
區(qū)別：eval方法不會(huì)去檢查給的字符串時(shí)候符合json的格式~同時(shí)如果給的字符串中存在js代碼eval也會(huì)一并執(zhí)行~比如如果上面的json格式的字符串改為：(注意紅色部分)
var data = '{"student" : [{"name":"鳴人","age":17}, {"name":"小櫻","age":alert("hehe")},{"name":"佐助","age":17}]}';
此時(shí)執(zhí)行eval方法后會(huì)先彈出一個(gè)提示框輸出hehe的字符串~
但是使用JSON.parse()就會(huì)報(bào)錯(cuò)~顯示錯(cuò)誤信息為當(dāng)前字符串不符合json格式~即JSON.parse()方法會(huì)檢查需要轉(zhuǎn)換的字符串是否符合json格式~
相比較而言eval方法是很危險(xiǎn)的~特別是當(dāng)涉及到第三方時(shí)我們需要確保傳給eval的參數(shù)是我們可以控制的~不然里面插入比如window.location~指向一個(gè)惡意的連接~那叫叫天啦
從這個(gè)層面講~還是推薦使用JSON.parse來實(shí)現(xiàn)json格式字符串的解析
考慮到我們?cè)谥圃靔son格式的字符串時(shí)極易出現(xiàn)錯(cuò)誤~這里推薦一個(gè)json格式字符串的在線校驗(yàn)工具：http://jsonlint.com/
相關(guān)文章
這篇文章主要分享了一款屬于你的jQuery提示框（Tip）插件，功能很強(qiáng)大，希望大家喜歡2016-01-01
下載文件個(gè)別瀏覽器文件名亂碼解決辦法，需要的朋友可以參考一下2013-03-03
Kibo 用于處理鍵盤事件的Javascript工具庫(kù)
Kibo是一個(gè)簡(jiǎn)單的用于處理鍵盤事件的Javascript工具庫(kù)。2011-10-10
JS返回上一頁(yè)實(shí)例代碼通過圖片和按鈕分別實(shí)現(xiàn)
返回上一頁(yè)的方法有很多，本代碼通過圖片和按鈕分別實(shí)現(xiàn)，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
一段js代碼遇到一個(gè)bug，由于中間的隱式全局變量造成的，通過谷歌瀏覽器的js調(diào)試器才找到問題所在，下面將代碼與大家分享下2014-04-04
EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼
本篇文章主要介紹了EasyUI的DataGrid綁定Json數(shù)據(jù)源的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Javascript 鼠標(biāo)移動(dòng)上去小三角形滑塊緩慢跟隨效果
一個(gè)tab選項(xiàng)卡，當(dāng)鼠標(biāo)移動(dòng)上去時(shí)紅色滑塊跟隨,在布局過程中經(jīng)常會(huì)使用到，本文提供了詳細(xì)的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下2013-04-04
JSON 在很多場(chǎng)合下作為數(shù)據(jù)格式比XML要更加方便。JSON的數(shù)據(jù)由對(duì)象、數(shù)組和元素等格式組成。每種格式都可以包含合法的JavaScript數(shù)據(jù)類型2014-01-01
在JavaScript中，創(chuàng)建一個(gè)具有自定義屬性和方法的對(duì)象有很多種模式，下面一一進(jìn)行介紹2012-05-05
JS回調(diào)函數(shù) callback的理解與使用案例分析
這篇文章主要介紹了JS回調(diào)函數(shù) callback的理解與使用,結(jié)合具體案例形式分析了javascript回調(diào)函數(shù)的功能、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-09-09