JSON與js對象序列化實例詳解
本文實例講述了JSON與js對象序列化。分享給大家供大家參考,具體如下:
JavaScript對象表示法(JavaScript Object Notation,簡稱JSON)是一種輕量級的數(shù)據(jù)交換格式,它基于js字面量表示法,是js的一個子集。雖然是一個js的子集但是他與語言無關(guān),它可以用于在現(xiàn)在所有的編程語言編寫的應(yīng)用程序之間進(jìn)行數(shù)據(jù)交換。是一種文本格式,比較容易讀寫。
JSON是一個容納“名/值”對的無序集合,名字可以是任意字符串,值可以使任意的JSON類型的值。大多數(shù)編程語言都有被映射為JSON的數(shù)據(jù)類型,比 如對象(object),字典(dictionary),哈希表(hash map),關(guān)聯(lián)數(shù)組(associative array)等。
JSON有六種類型的值:對象,數(shù)組,字符串,數(shù)字,布爾值和特殊值null。
console.log(JSON.parse('5')); // 5 console.log(JSON.parse(5)); // 5 console.log(JSON.parse('true')); // true console.log(JSON.parse(true)); // true console.log(JSON.parse('"hello"')); // "hello" console.log(JSON.parse("hello")); // 報錯 因為hello不是JSON字符串 console.log(JSON.parse('null')); // null console.log(JSON.parse(null)); // null console.log(JSON.parse(undefined)); // 報錯 因為JSON不能表示undefined換用null代替
JSON的結(jié)構(gòu)
JSON具有兩種結(jié)構(gòu):對象,數(shù)組
對象結(jié)構(gòu)以”{”大括號開始,以”}”大括號結(jié)束。中間部分由0或多個以”,”分隔的”key(關(guān)鍵字)/value(值)”對構(gòu)成,關(guān)鍵字字符串和值之間以”:”分隔,語法結(jié)構(gòu)如代碼。
{ key1:value1, key2:value2, ... }
例如:
{ "name": "hum", "age": 26, "sex": 1, "love": [ "swing", "jump" ], "birthday": "1988-01-12" }
NOTE:
在js中表示JSON字符串時最好在外面加上單引號。
如下:
與js對象字面量相比,JSON對象沒有變量聲明也沒有末尾的分號。
數(shù)組結(jié)構(gòu)以”[”開始,”]”結(jié)束。中間由0或多個以”,”分隔的值列表組成,語法結(jié)構(gòu)如代碼。
[ { key1:value1, key2:value2, ... } ]
例如:
[ { "Id": 7, "Mentions": [ { "Id": 5, "StatusId": 34, "CreatedDateTime":"\/Date(1310051914617+0100)\/", "Text":"Text", "UserName":"Username", "UserLocation":"UK", "UserLanguage":"en-GB", "IsCheckIn":"true" } ], "Checkins": 0, "HereNow": 0, "TimeStamp":"\/Date(1310051914639+0100)\/", "Venue": { "Id": 7, "FoursquareId":"cacbf3bd-f0aa-403d-9f9b-2056b4985ba1", "Name":"Venue Name" } }, { "name":"hahahhahah", "port":[ { "port": 8080, "protocol":"HTTP", "IP":"123.12.06.456" } ] } ]
JSON數(shù)組采用的是javascript數(shù)組字面量的形式。
JSON的解析與序列化
js的JSON的解析與序列化與AS3是相同的。我們常用的也就是JSON對象(ECMAScript 5中添加的, 早期JSON解析基本都使用javascript的eval()函數(shù)。但是eval有一些性能和安全上的缺點,ECMAScript對解析JSON對象進(jìn) 行了規(guī)范,定義了全局對象JSON,支持的瀏覽器有標(biāo)準(zhǔn)瀏覽器和IE8+。對于不支持的瀏覽器可以引入json2.js文件。)的stringify與parse這兩個方法。
接下來我們來一一說明。
JSON.stringify
JSON.stringify()將javascript對象序列化為JSON格式的字符串
JSON.stringify(ob,filter,indent)包含三個參數(shù),通常我們在使用的時候只帶第一個參數(shù),來返回字符串。
ob:要轉(zhuǎn)化成JSON字符串的對象,數(shù)組,原始值。
filter:是一個可選的參數(shù),通常是一個函數(shù),用來在字符串化前對值做一些替換。也可以是一個數(shù)組,包含哪些需要字符串化的屬性名。就是用來過濾的。
indent:也是一個可選參數(shù),在需要輸出格式化的可閱讀的代碼時,使用indent參數(shù)來指定用來縮進(jìn)的字符串或空格。如果省略該參數(shù),返回的字符串將不帶任何的額外的空格,這樣輸出的值很難閱讀。就是用來格式化的。
下面是幾個對應(yīng)的例子:
首先是第二個參數(shù)是數(shù)組過濾器的時候:
var oJson = { name: 'hum', age: 20, sex: 1}; console.log(JSON.stringify(oJson, ['age', 'sex'])); // {"age":20,"sex":1}
如果第二個參數(shù)是字符串的時候,該數(shù)組會作為對象的屬性名,屬性名不在這個數(shù)組中的任何對象的屬性在序列化的時候都會被忽略掉。此外,返回的字符串中的屬性的順序,會與該數(shù)組中的屬性名一致。
函數(shù)過濾器的時候:
var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']}; console.log(JSON.stringify(oJson, function(k, v){ switch (k){ case 'age': return v > 20 ? '成年': '未成年'; case 'love': return v.join(','); case 'sex': return undefined; default : return v; } })); // {"name":"hum","age":"成年","love":"swing,jump"}
如果該參數(shù)是函數(shù),則它是一個替換函數(shù),該函數(shù)會在每一個需要字符串化的對象上調(diào)用。這個函數(shù)的第一個參數(shù)是該對象中的屬性名或數(shù)組的序號,第二個則是值本身。函數(shù)的返回值會替換掉需要字符串化的值,如果函數(shù)返回undefined或沒有任何的返回值,則會在字符串化的時候忽略這個值。
stringify的第三個參數(shù)的實例:
var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']}; console.log(JSON.stringify(oJson, null, 4)); /* { "name": "hum", "age": 26, "sex": 1, "love": [ "swing", "jump" ] } */
通常這個方法的返回值是一個不帶任何空格或換行符的給機器閱讀的字符串,如果想輸出更易于閱讀的代碼,就需要設(shè)置第三個參數(shù)了。
再來看一個例子:
var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']}; console.log(JSON.stringify(oJson, null, '--')); /* { --"name": "hum", --"age": 26, --"sex": 1, --"love": [ ----"swing", ----"jump" --] } */
這樣就很容易理解了。。。
JSON.parse
JSON.parse用來解析json格式的字符串(返回一個對象,數(shù)組或原始值)
JSON.parse(s,reviver)包含兩個方法.
s:要解析的字符串
reviver:用來轉(zhuǎn)換解析值得可選函數(shù)
我們通常使用只使用第一個參數(shù),可選參數(shù)reviver,主要是在返回解析值之前,對其進(jìn)行過濾或后期處理。reviver函數(shù)會在從s中解析的每個原始值調(diào)用一次。調(diào)用reviver函數(shù)是帶有兩個參數(shù),第一個屬性名(對象的屬性名或是轉(zhuǎn)換成字符串的數(shù)組序號),第二個參數(shù)是對象的屬性或是數(shù)組的元素值。reviver函數(shù)會作為包含原始值的對象/數(shù)組的方法來調(diào)用。reviver函數(shù)的返回值會成為屬性的新值,如果reviver返回第二個參數(shù),則屬性不變。如果reviver返回undefined或不凡會任何值,則會從對象或是數(shù)組中刪除屬性。
下面是一個實例:
var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump'], birthday: '1988-01-12'}; var sJson = JSON.stringify(oJson); console.log(sJson);//{"name":"hum","age":26,"sex":1,"love":["swing","jump"],"birthday":"1988-01-12"} console.log(JSON.parse(sJson)); console.log(JSON.parse(sJson, function (k, v) { if(k == 'birthday'){ // 返回日期對象 return new Date(v); }else if(k == 'sex'){ // sex不在了 return undefined; }else{ return v; } }));
PS:關(guān)于json操作,這里再為大家推薦幾款比較實用的json在線工具供大家參考使用:
在線JSON代碼檢驗、檢驗、美化、格式化工具:
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
C語言風(fēng)格/HTML/CSS/json代碼格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript實現(xiàn)的Tween算法及緩沖特效實例代碼
這篇文章主要介紹了JavaScript實現(xiàn)的Tween算法及緩沖特效,涉及JavaScript通過數(shù)學(xué)運算及樣式屬性操作實現(xiàn)緩動、彈性運動等效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11JavaScript動態(tài)檢驗密碼強度的實現(xiàn)方法
平時我們會在某些網(wǎng)站的注冊頁面或者更改密碼的頁面發(fā)現(xiàn)當(dāng)我們輸入密碼時,會有一個類似于進(jìn)度條的長條進(jìn)行提示用戶輸入的密碼強度。那么這種效果怎么實現(xiàn)的呢?下面小編給大家介紹下js動態(tài)檢驗密碼強度的實現(xiàn)方法,一起看看吧2016-11-11Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)
這篇文章主要介紹了Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-02-02JavaScript獲取GridView選擇的行內(nèi)容
一般GridView第一列是多選框CheckBox,負(fù)責(zé)標(biāo)記當(dāng)前行是否被選中,后面可以有文本框TextBox,下拉框DropDownList,標(biāo)簽Lable2009-04-04uniapp幾行代碼解決滾動穿透問題(項目實戰(zhàn))
這篇文章主要介紹了uniapp幾行代碼解決滾動穿透問題,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01