JSON與js對象序列化實例詳解
本文實例講述了JSON與js對象序列化。分享給大家供大家參考，具體如下：
JavaScript對象表示法（JavaScript Object Notation，簡稱JSON）是一種輕量級的數據交換格式，它基于js字面量表示法，是js的一個子集。雖然是一個js的子集但是他與語言無關，它可以用于在現在所有的編程語言編寫的應用程序之間進行數據交換。是一種文本格式，比較容易讀寫。
JSON是一個容納“名/值”對的無序集合，名字可以是任意字符串，值可以使任意的JSON類型的值。大多數編程語言都有被映射為JSON的數據類型，比 如對象（object），字典（dictionary）,哈希表（hash map），關聯(lián)數組（associative array）等。
JSON有六種類型的值：對象，數組，字符串，數字，布爾值和特殊值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的結構
JSON具有兩種結構：對象，數組
對象結構以”{”大括號開始，以”}”大括號結束。中間部分由0或多個以”，”分隔的”key(關鍵字)/value(值)”對構成，關鍵字字符串和值之間以”：”分隔，語法結構如代碼。
{
key1:value1,
key2:value2,
...
}
例如：
{
"name": "hum",
"age": 26,
"sex": 1,
"love": [
"swing",
"jump"
],
"birthday": "1988-01-12"
}
NOTE：
在js中表示JSON字符串時最好在外面加上單引號。
如下：
與js對象字面量相比，JSON對象沒有變量聲明也沒有末尾的分號。
數組結構以”[”開始，”]”結束。中間由0或多個以”，”分隔的值列表組成，語法結構如代碼。
[
{
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數組采用的是javascript數組字面量的形式。
JSON的解析與序列化
js的JSON的解析與序列化與AS3是相同的。我們常用的也就是JSON對象（ECMAScript 5中添加的， 早期JSON解析基本都使用javascript的eval()函數。但是eval有一些性能和安全上的缺點，ECMAScript對解析JSON對象進 行了規(guī)范，定義了全局對象JSON，支持的瀏覽器有標準瀏覽器和IE8+。對于不支持的瀏覽器可以引入json2.js文件。）的stringify與parse這兩個方法。
接下來我們來一一說明。
JSON.stringify
JSON.stringify()將javascript對象序列化為JSON格式的字符串
JSON.stringify(ob,filter,indent)包含三個參數，通常我們在使用的時候只帶第一個參數，來返回字符串。
ob:要轉化成JSON字符串的對象，數組，原始值。
filter：是一個可選的參數，通常是一個函數，用來在字符串化前對值做一些替換。也可以是一個數組，包含哪些需要字符串化的屬性名。就是用來過濾的。
indent：也是一個可選參數，在需要輸出格式化的可閱讀的代碼時，使用indent參數來指定用來縮進的字符串或空格。如果省略該參數，返回的字符串將不帶任何的額外的空格，這樣輸出的值很難閱讀。就是用來格式化的。
下面是幾個對應的例子：
首先是第二個參數是數組過濾器的時候：
var oJson = { name: 'hum', age: 20, sex: 1};
console.log(JSON.stringify(oJson, ['age', 'sex'])); // {"age":20,"sex":1}
如果第二個參數是字符串的時候，該數組會作為對象的屬性名，屬性名不在這個數組中的任何對象的屬性在序列化的時候都會被忽略掉。此外，返回的字符串中的屬性的順序，會與該數組中的屬性名一致。
函數過濾器的時候：
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"}
如果該參數是函數，則它是一個替換函數，該函數會在每一個需要字符串化的對象上調用。這個函數的第一個參數是該對象中的屬性名或數組的序號，第二個則是值本身。函數的返回值會替換掉需要字符串化的值，如果函數返回undefined或沒有任何的返回值，則會在字符串化的時候忽略這個值。
stringify的第三個參數的實例：
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"
]
}
*/
通常這個方法的返回值是一個不帶任何空格或換行符的給機器閱讀的字符串，如果想輸出更易于閱讀的代碼，就需要設置第三個參數了。
再來看一個例子：
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格式的字符串（返回一個對象，數組或原始值）
JSON.parse(s,reviver)包含兩個方法.
s：要解析的字符串
reviver：用來轉換解析值得可選函數
我們通常使用只使用第一個參數，可選參數reviver,主要是在返回解析值之前，對其進行過濾或后期處理。reviver函數會在從s中解析的每個原始值調用一次。調用reviver函數是帶有兩個參數，第一個屬性名（對象的屬性名或是轉換成字符串的數組序號），第二個參數是對象的屬性或是數組的元素值。reviver函數會作為包含原始值的對象/數組的方法來調用。reviver函數的返回值會成為屬性的新值，如果reviver返回第二個參數，則屬性不變。如果reviver返回undefined或不凡會任何值，則會從對象或是數組中刪除屬性。
下面是一個實例：
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：關于json操作，這里再為大家推薦幾款比較實用的json在線工具供大家參考使用：
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json
JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉換工具：
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉義工具：
http://tools.jb51.net/code/json_yasuo_trans
C語言風格/HTML/CSS/json代碼格式化美化工具：
http://tools.jb51.net/code/ccode_html_css_json
更多關于JavaScript相關內容可查看本站專題：《JavaScript中json操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
微信小程序中我們創(chuàng)建頁面時會自動創(chuàng)建四個文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角json配置文件,下面這篇文章主要給大家介紹了關于微信小程序全局配置以及頁面配置的相關資料,需要的朋友可以參考下2022-07-07
JS基于Location實現訪問Url、重定向及刷新頁面的方法分析
這篇文章主要介紹了JS基于Location實現訪問Url、重定向及刷新頁面的方法,結合實例形式分析了javascript使用Location進行URL訪問、重定向、頁面刷新等操作相關原理、操作技巧與注意事項,需要的朋友可以參考下2018-12-12
將#ffffff轉換成rgb(0,0,0)格式的顏色代碼，需要的朋友可以參考下。2010-03-03
asp.net中System.Timers.Timer的使用方法
asp.net中System.Timers.Timer的使用方法，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了JS實現數組去重,顯示重復元素及個數的方法,涉及javascript數組遍歷、統(tǒng)計、計算等相關操作技巧,需要的朋友可以參考下2019-01-01
最近在做自己的小框架的按需加載模塊，那么就需要做到異步動態(tài)加載css文件。仔細研究了一番，得到了如下解決方案，分享給大家。2015-01-01
下面小編就為大家?guī)硪黄钊肜斫鈐s promise chain。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
今天小編就為大家分享一篇解決layui頁面按鈕點擊無反應,也不報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS實現判斷有效的數獨算法,結合實例形式分析了javascript數獨判斷的原理及相關算法實現、使用操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要給大家介紹了關于TypeScript高級用法的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用TypeScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12