JS中操作JSON總結(jié)
SON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式,采用完全獨(dú)立于語言的文本格式,是理想的數(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))開始,“}”(右括號(hào))結(jié)束。每個(gè)“名稱”后跟一個(gè)“:”(冒號(hào));“‘名稱/值' 對(duì)”之間運(yùn)用 “,”(逗號(hào))分隔。 名稱用引號(hào)括起來;值如果是字符串則必須用括號(hào),數(shù)值型則不須要。例如:
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};
2. 數(shù)組是值(value)的有序集合。一個(gè)數(shù)組以“[”(左中括號(hào))開始,“]”(右中括號(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本來就是一個(gè)JSON對(duì)象,那么運(yùn)用 eval()函數(shù)轉(zhuǎn)換后(哪怕是多次轉(zhuǎn)換)還是JSON對(duì)象,但是運(yùn)用 parseJSON()函數(shù)處理后會(huì)有疑問(拋出語法異常)。
二、可以運(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)都來自json.js包。新版本的 JSON 修改了 API,將 JSON.stringify() 和 JSON.parse() 兩個(gè)要領(lǐng)都注入到了 Javascript 的內(nèi)建對(duì)象里面,前者變成了 Object.toJSONString(),而后者變成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要領(lǐng),則說明您的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ì)象來進(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本身的問題。由于json是以”{}”的方式來開始以及結(jié)束的,在JS中,它會(huì)被當(dāng)成一個(gè)語句塊來處理,所以必須強(qiáng)制性的將它轉(zhuǎn)換成一種表達(dá)式。
加上圓括號(hào)的目的是迫使eval函數(shù)在處理JavaScript代碼的時(shí)候強(qiáng)制將括號(hào)內(nèi)的表達(dá)式(expression)轉(zhuǎn)化為對(duì)象,而不是作為語句(statement)來執(zhí)行。舉一個(gè)例子,例如對(duì)象字面量{},如若不加外層的括號(hào),那么eval會(huì)將大括號(hào)識(shí)別為JavaScript代碼塊的開始和結(jié)束標(biāo)記,那么{}將會(huì)被認(rèn)為是執(zhí)行了一句空語句。所以下面兩個(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)的安全問題。所以可以采用一些規(guī)避了eval_r()的第三方客戶端腳本庫,比如JSON in JavaScript就提供了一個(gè)不超過3k的腳本庫。
第二種解決方法:
第二種解析方式就是使用Function對(duì)象來完成,它的典型應(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實(shí)現(xiàn)頁面轉(zhuǎn)發(fā)功能示例代碼
本文為大家介紹的是使用js實(shí)現(xiàn)頁面轉(zhuǎn)發(fā),具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08
用Javascript做flash做的事..才完成的一個(gè)類.Auntion Action var 0.1
用Javascript做flash做的事..才完成的一個(gè)類.Auntion Action var 0.1...2007-02-02
微信小程序獲取手機(jī)系統(tǒng)信息的方法【附源碼下載】
這篇文章主要介紹了微信小程序獲取手機(jī)系統(tǒng)信息的方法,涉及微信小程序wx.getSystemInfo函數(shù)的簡單使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果
這篇文章主要介紹了js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
讓回調(diào)函數(shù) showResponse 也帶上參數(shù)的代碼
讓回調(diào)函數(shù) showResponse 也帶上參數(shù)的代碼...2007-08-08
javaScript實(shí)現(xiàn)復(fù)選框全選反選事件詳解
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)復(fù)選框全選反選事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
javascript實(shí)現(xiàn)在某個(gè)元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)在某個(gè)元素上阻止鼠標(biāo)右鍵事件的方法和實(shí)例,需要的朋友可以參考下2014-08-08

