JS中操作JSON總結(jié)
SON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式,采用完全獨(dú)立于語(yǔ)言的文本格式,是理想的數(shù)據(jù)交換格式。同時(shí),JSON是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的 API 或工具包。
本文主要是對(duì)JS操作JSON的要領(lǐng)做下總結(jié)。
在JSON中,有兩種結(jié)構(gòu):對(duì)象和數(shù)組。
1. 一個(gè)對(duì)象以“{”(左括號(hào))開(kāi)始,“}”(右括號(hào))結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”(冒號(hào));“‘名稱/值' 對(duì)”之間運(yùn)用 “,”(逗號(hào))分隔。 名稱用引號(hào)括起來(lái);值如果是字符串則必須用括號(hào),數(shù)值型則不須要。例如:
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};
2. 數(shù)組是值(value)的有序集合。一個(gè)數(shù)組以“[”(左中括號(hào))開(kāi)始,“]”(右中括號(hào))結(jié)束。值之間運(yùn)用 “,”(逗號(hào))分隔。
例如:
var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
為了方便地處理JSON數(shù)據(jù),JSON提供了json.js包,下載地址:http://www.json.org/json.js
在數(shù)據(jù)傳輸流程中,json是以文本,即字符串的形式傳遞的,而JS操作的是JSON對(duì)象,所以,JSON對(duì)象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵。例如:
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON對(duì)象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串轉(zhuǎn)換為JSON對(duì)象
要運(yùn)用上面的str1,必須運(yùn)用下面的要領(lǐng)先轉(zhuǎn)化為JSON對(duì)象:
//由JSON字符串轉(zhuǎn)換為JSON對(duì)象
var obj = eval('(' + str + ')');
或者
var obj = str.parseJSON(); //由JSON字符串轉(zhuǎn)換為JSON對(duì)象
或者
var obj = JSON.parse(str); //由JSON字符串轉(zhuǎn)換為JSON對(duì)象
然后,就可以這樣讀?。?/p>
Alert(obj.name);
Alert(obj.sex);
特別留心:如果obj本來(lái)就是一個(gè)JSON對(duì)象,那么運(yùn)用 eval()函數(shù)轉(zhuǎn)換后(哪怕是多次轉(zhuǎn)換)還是JSON對(duì)象,但是運(yùn)用 parseJSON()函數(shù)處理后會(huì)有疑問(wèn)(拋出語(yǔ)法異常)。
二、可以運(yùn)用 toJSONString()或者全局要領(lǐng) JSON.stringify()將JSON對(duì)象轉(zhuǎn)化為JSON字符串。
例如:
var last=obj.toJSONString(); //將JSON對(duì)象轉(zhuǎn)化為JSON字符
或者
var last=JSON.stringify(obj); //將JSON對(duì)象轉(zhuǎn)化為JSON字符
alert(last);
留心:
上面的多個(gè)要領(lǐng)中,除了eval()函數(shù)是js自帶的之外,其他的多個(gè)要領(lǐng)都來(lái)自json.js包。新版本的 JSON 修改了 API,將 JSON.stringify() 和 JSON.parse() 兩個(gè)要領(lǐng)都注入到了 Javascript 的內(nèi)建對(duì)象里面,前者變成了 Object.toJSONString(),而后者變成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要領(lǐng),則說(shuō)明您的json包版本太低。
js對(duì)象與json對(duì)象的相互轉(zhuǎn)換
<script>
//js對(duì)象(student)
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
console.log(student);
//將js對(duì)象轉(zhuǎn)化為JSON字符
var last1=JSON.stringify(student);
console.log(last1);
console.log(typeof last1);//輸出last1的類型
console.log('--------------------------');
//由JSON字符串轉(zhuǎn)換為JSON對(duì)象/js對(duì)象
var obj1 = eval('(' + last1 + ')');
var obj2 = JSON.parse(last1);
console.log(obj1);
console.log(typeof obj1);
console.log(obj2);
console.log(typeof obj2);
</script>
效果圖:

json字符串與json對(duì)象的相互轉(zhuǎn)換
<script>
//JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
console.log(str1);
console.log(typeof str1);
//JSON對(duì)象:
var str2 = { "name": "cxh", "sex": "man" };
console.log(str2);
console.log(typeof str2);
console.log('--------------------------');
//將js對(duì)象轉(zhuǎn)化為JSON字符
var last1=JSON.stringify(str2);
console.log(last1);
console.log(typeof last1);//輸出last1的類型
console.log('--------------------------');
//由JSON字符串轉(zhuǎn)換為JSON對(duì)象
var obj1 = eval('(' + last1 + ')');
var obj2 = JSON.parse(str1);
console.log(obj1);
console.log(typeof obj1);
console.log(obj2);
console.log(typeof obj2);
</script>
效果圖:

下面是一些補(bǔ)充
在JS中將JSON的字符串解析成JSON數(shù)據(jù)格式,一般有兩種方式:
1.一種為使用eval_r()函數(shù)。
2. 使用Function對(duì)象來(lái)進(jìn)行返回解析。
在數(shù)據(jù)傳輸流程中,json是以文本,即字符串的形式傳遞的,而JS操作的是JSON對(duì)象,所以,JSON對(duì)象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵。例如:
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON對(duì)象:
var str2 = { "name": "cxh", "sex": "man" };
第一種解決方法:
var dataObj=eval_r("("+data+")");//轉(zhuǎn)換為json對(duì)象
為什么要 eval這里要添加 “("("+data+")");//”呢?
原因在于:eval本身的問(wèn)題。由于json是以”{}”的方式來(lái)開(kāi)始以及結(jié)束的,在JS中,它會(huì)被當(dāng)成一個(gè)語(yǔ)句塊來(lái)處理,所以必須強(qiáng)制性的將它轉(zhuǎn)換成一種表達(dá)式。
加上圓括號(hào)的目的是迫使eval函數(shù)在處理JavaScript代碼的時(shí)候強(qiáng)制將括號(hào)內(nèi)的表達(dá)式(expression)轉(zhuǎn)化為對(duì)象,而不是作為語(yǔ)句(statement)來(lái)執(zhí)行。舉一個(gè)例子,例如對(duì)象字面量{},如若不加外層的括號(hào),那么eval會(huì)將大括號(hào)識(shí)別為JavaScript代碼塊的開(kāi)始和結(jié)束標(biāo)記,那么{}將會(huì)被認(rèn)為是執(zhí)行了一句空語(yǔ)句。所以下面兩個(gè)執(zhí)行結(jié)果是不同的:
alert(eval_r("{}"); // return undefined
alert(eval_r("({})");// return object[Object]
對(duì)于這種寫法,在JS中,可以到處看到。
如: (function()) {}(); 做閉包操作時(shí)等。
var str1 = '{ "name": "cxh", "sex": "man" }';
var data=eval_r("("+str1+")");//轉(zhuǎn)換為json對(duì)象//data =(new
alert (data.name);//會(huì)顯示出cxh
這里特別需要注意的是方式1中的eval_r()方法是動(dòng)態(tài)執(zhí)行其中字符串(可能是js腳本)的,這樣很容易會(huì)造成系統(tǒng)的安全問(wèn)題。所以可以采用一些規(guī)避了eval_r()的第三方客戶端腳本庫(kù),比如JSON in JavaScript就提供了一個(gè)不超過(guò)3k的腳本庫(kù)。
第二種解決方法:
第二種解析方式就是使用Function對(duì)象來(lái)完成,它的典型應(yīng)用就是在JQUERY中的AJAX方法下的success等對(duì)于返回?cái)?shù)據(jù)data的解析
var str1 = '{ "name": "cxh", "sex": "man" }';
var data = (Function("","return "+str1))();
alert (data.name);//會(huì)顯示出cxh
到此這篇關(guān)于JS中操作JSON總結(jié)的文章就介紹到這了,更多相關(guān)JS操作JSON內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js加載之使用DOM方法動(dòng)態(tài)加載Javascript文件
傳統(tǒng)上,加載Javascript文件都是使用script標(biāo)簽,我們也可以使用DOM方法,動(dòng)態(tài)加載Javascript文件,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-11-11
layer.close()關(guān)閉進(jìn)度條和Iframe窗的方法
今天小編就為大家分享一篇layer.close()關(guān)閉進(jìn)度條和Iframe窗的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
js購(gòu)物車實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
提起購(gòu)物車想必只有在一些購(gòu)物網(wǎng)站上才可以看得到,下面為大家介紹下使用js實(shí)現(xiàn)的購(gòu)物車,感興趣的朋友可以參考下2013-12-12
Html5 js實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了Html5 js實(shí)現(xiàn)手風(fēng)琴效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
JS面試題之如何判斷兩個(gè)數(shù)組的內(nèi)容是否相等
這篇文章主要為大家詳細(xì)介紹了JavaScript面試的??碱},即如何判斷兩個(gè)數(shù)組的內(nèi)容是否相等,文中的示例方法講解詳細(xì),需要的小伙伴可以參考一下2023-10-10
JS匿名函數(shù)內(nèi)部this指向問(wèn)題詳析
這篇文章主要給大家介紹了關(guān)于JS匿名函數(shù)內(nèi)部this指向的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
一個(gè)最簡(jiǎn)單的級(jí)聯(lián)下拉菜單
一個(gè)最簡(jiǎn)單的級(jí)聯(lián)下拉菜單...2006-12-12
javascript實(shí)現(xiàn)信息的顯示和隱藏如注冊(cè)頁(yè)面
信息的顯示和隱藏在某些時(shí)候還是比較使用的,就比如注冊(cè)信息,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以了解下2013-12-12
有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05

