JavaScript常見JSON操作實(shí)例分析
本文實(shí)例講述了JavaScript常見JSON操作。分享給大家供大家參考,具體如下:
1、JSON
JSON,JavaScript Object Notation)(JavaScript對(duì)象表示法) ,是存儲(chǔ)和交換文本信息的語法,是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單,易于讀寫,占用帶寬小,類似 XML,但JSON 比 XML更小、更快,更易解析。
JSON不支持變量、函數(shù)、對(duì)象實(shí)例,只是一種數(shù)據(jù)的格式。數(shù)據(jù)在鍵值對(duì)中,數(shù)據(jù)由逗號(hào)分隔。
2、JSON數(shù)據(jù)類型
(1)簡(jiǎn)單數(shù)據(jù)類型:字符串、數(shù)值、布爾值,null(不支持JavaScript的 undefined)。
(2)對(duì)象:無序的鍵值對(duì)。
(3)數(shù)組:有序的值列表。
3、JSON對(duì)象與JavaScript對(duì)象的不同
(1)屬性必須用雙引號(hào)(最好不要用單引號(hào),可能會(huì)出問題)。
(2)末尾無分號(hào)。
(3)不支持變量。
4、JSON數(shù)組與JavaScript數(shù)組的不同
(1)末尾無分號(hào)。
(2)不支持變量。
5、序列化
(1)JSON.stringify()方法
把JavaScript對(duì)象(JSON對(duì)象)序列化為JSON字符串的方法。默認(rèn)情況下,輸出的JSON字符串不包含任何空格字符或縮進(jìn),同時(shí)會(huì)忽略JavScript對(duì)象的函數(shù)和原型對(duì)象。
接收3個(gè)參數(shù):過濾器、可選的過濾器(可以是函數(shù),也可以是數(shù)組)、可選的字符串縮進(jìn)數(shù)。
var person = { name: "Alice", age: 23, adult: true, friends: ["Bruce", "Cindy"] }; var jsonText1 = JSON.stringify(person);//Date對(duì)象在序列化后變成了JSON字符串 var jsonText2 = JSON.stringify(person, ["name", "friends"]);//Date對(duì)象在序列化后變成了JSON字符串 var jsonText3 = JSON.stringify(person, function(key, value) { switch(key){ case "friends": return value.join("|");//按指定分隔符將數(shù)組連接成一個(gè)字符串 case "age": return value + 1; case "adult": return undefined;//返回undefined則刪除此屬性 default: return value;//其他值正常顯示 } }); var jsonText4 = JSON.stringify(person, null, 4); alert(jsonText1);//{"name":"Alice","age":23,"adult":true,"friends":["Bruce", "Cindy"]} alert(jsonText2);//{"name":"Alice","friends":["Bruce", "Cindy"]} alert(jsonText3);//{"name":"Alice","age":24,"friends":["Bruce|Cindy"]} alert(jsonText4); /* { "name":"Alice", "age":23, "adult":true, "friends":[ "Bruce", "Cindy" ] } */
(2)toJSON()方法
作為stringify()
方法中第2個(gè)參數(shù)過濾器的補(bǔ)充。stringify()
有時(shí)不能滿足某些對(duì)象進(jìn)行自定義序列化的需求,則給對(duì)象定義toJSON
()方法。
序列化對(duì)象的順序:
- 1)若存在
toJSON()
方法且能通過它取得有效的值,則調(diào)用這個(gè)方法。否則,返回對(duì)象本身。 - 2)如果提供了第2個(gè)參數(shù),應(yīng)用此函數(shù)過濾器,傳入函數(shù)過濾器的值是第1步返回的值。
- 3)對(duì)第2步返回的每個(gè)值進(jìn)行相應(yīng)的序列化。
- 4)如果提供了第3個(gè)參數(shù),執(zhí)行相應(yīng)的格式化。
var person = { name: "Alice", age: 23, adult: true, friends: ["Bruce", "Cindy"], toJSON:function(){ return {"name":"Alice","id":23,"friends":["Bruce", "Cindy"]}; } }; var jsonText1 = JSON.stringify(person);//Date對(duì)象在序列化后變成了JSON字符串 var jsonText2 = JSON.stringify(person, ["adult", "id", "friends"]);//Date對(duì)象在序列化后變成了JSON字符串 var jsonText3 = JSON.stringify(person, function(key, value) { switch(key){ case "friends": return value.join("|");//按指定分隔符將數(shù)組連接成一個(gè)字符串 case "id": return value - 1; case "age": return value + 1;//返回undefined則刪除此屬性 default: return value;//其他值正常顯示 } }); var jsonText4 = JSON.stringify(person, null, 4); alert(jsonText1);//{"name":"Alice", "id":23, "friends":["Bruce", "Cindy"]}; alert(jsonText2);//{"id":23,"friends":["Bruce", "Cindy"]} alert(jsonText3);//{"name":"Alice","id":22,"friends":["Bruce|Cindy"]} alert(jsonText4); /* { "name":"Alice", "id":23, "friends":[ "Bruce", "Cindy" ] } */
(3)eval()方法
把JSON字符串解析成JavaScript對(duì)象(JSON對(duì)象)的第一種方法。
var JSText = eval('(' + '{"name":"Alice", "friends":["Bruce", "Cindy"]}' + ')'); alert(JSText.friends);//Bruce,Cindy
注意:eval方法只能在非嚴(yán)格模式中進(jìn)行使用,在use strict
中是不允許使用這個(gè)方法的。
(4)jQuery.parseJSON()方法
把JSON字符串解析成JavaScript對(duì)象(JSON對(duì)象)的第二種方法。
需要先引入jQuery的js文件。
var JSText = jQuery.parseJSON('{"name":"Alice", "friends":["Bruce", "Cindy"]}'); alert(JSText.friends);//Bruce,Cindy
注意:從jQuery 3.0開始,不推薦使用jQuery.parseJSON()
方法,要解析JSON字符串,請(qǐng)改用原生的JSON.parse()
方法。
(5)JSON.parse()方法
把JSON字符串解析成JavaScript對(duì)象(JSON對(duì)象)的第三種方法。
接收2個(gè)參數(shù):JSON字符串和可選的函數(shù)(在每個(gè)鍵值對(duì)上調(diào)用)。
eg1:
var JSText1 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}'); var JSText2 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}', function(key, value) { if (key == "friends") return value.join("&"); else return value; }); alert(JSText1.friends);//Bruce,Cindy alert(JSText2.friends);//Bruce&Cindy
注意:第一個(gè)參數(shù)是JSON字符串,因此JSON對(duì)象需要用引號(hào)引住。
eg2:
var person = { name: "Alice", age: 23, birthday: new Date(1993, 12, 6)//保存了一個(gè)Date對(duì)象 }; var jsonText = JSON.stringify(person);//Date對(duì)象在序列化后變成了JSON字符串 alert(jsonText);//{"name":"Alice","age":23,"birthday":"1994-01-05T16:00:00:000Z"} var JSText = JSON.parse(jsonText, function(key, value) {//解析在JSText中還原了Date對(duì)象,則JSText.birthdat屬性中會(huì)保存一個(gè)Date對(duì)象 if (key == "birthday") return new Date(value); else return value; }); alert(JSText.birthday.getFullYear());//1994,已是Date對(duì)象,可以調(diào)用getFullYear()
PS:這里再為大家推薦幾款相關(guān)的json在線工具供大家參考:
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉(zhuǎn)義工具:
http://tools.jb51.net/code/json_yasuo_trans
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript JSON操作入門實(shí)例
- Json操作庫(kù)DynamicJson使用指南
- Json對(duì)象與Json字符串互轉(zhuǎn)(4種轉(zhuǎn)換方式)
- js 將json字符串轉(zhuǎn)換為json對(duì)象的方法解析
- js中將字符串轉(zhuǎn)換成json的三種方式
- 解析JSON對(duì)象與字符串之間的相互轉(zhuǎn)換
- JSON.stringify 語法實(shí)例講解
- JS對(duì)象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
- Json序列化和反序列化方法解析
- 淺析JSON序列化與反序列化
- JS實(shí)現(xiàn)json的序列化和反序列化功能示例
相關(guān)文章
JavaScript實(shí)現(xiàn)點(diǎn)擊自動(dòng)選擇TextArea文本的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊自動(dòng)選擇TextArea文本的方法,涉及javascript中focus()、select()方法的使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-07-07js使用swiper實(shí)現(xiàn)層疊輪播效果實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于js使用swiper實(shí)現(xiàn)層疊輪播效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12js中回調(diào)函數(shù)的學(xué)習(xí)筆記
這篇文章主要介紹了js中回調(diào)函數(shù)的相關(guān)知識(shí),需要的朋友可以參考下2014-07-07JavaScript二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單
這篇文章主要介紹了使用二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單,通過二維數(shù)組存儲(chǔ)城市列表項(xiàng),需要的朋友可以參考下2014-05-05javascript同步Import,同步調(diào)用外部js的方法
javascript同步Import,同步調(diào)用外部js的實(shí)現(xiàn)代碼,測(cè)試確實(shí)可用2008-07-07BootStrap實(shí)現(xiàn)郵件列表的分頁和模態(tài)框添加郵件的功能
這篇文章主要介紹了bootstrap分頁,模態(tài)框,實(shí)現(xiàn)郵件列表的分頁,和模態(tài)框添加郵件的功能的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10javascript實(shí)現(xiàn)根據(jù)漢字獲取簡(jiǎn)拼
這里給大家分享一個(gè)JavaScript實(shí)現(xiàn)的根據(jù)漢字可以自動(dòng)轉(zhuǎn)換簡(jiǎn)拼代碼,有需要的朋友可以參考一下,并非本人原創(chuàng)來自網(wǎng)絡(luò)。2016-09-09