DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JSON基礎 >> js解析與序列化json數據(二)序列化探討
js解析與序列化json數據(二)序列化探討
編輯:JSON基礎     
上一節我們講解了JSON.stringify()的基本用法,這一節我們來重點探討一下序列化。
JSON.stringify()除了要序列化的js對象外,還可以接收另外兩個參數,這兩個參數用於指定不同方式序列化js對象。第一個參數是過濾器,可以使一個數組,也可以是一個函數;第二個參數是一個選項,表示是否在JSON字符串中保留縮進。單獨或組合使用這兩個參數,可以更全面深入地控制JSON的序列化。
1、過濾結果
如果過濾器參數是數組,那麼JSON.stringify()的結果中將只包含數組中列出的屬性。如:
復制代碼 代碼如下:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var student={
name:"Bill",
age:12,
grade:3,
id:"0802020114"
};
var jsonText=JSON.stringify(student,["name","id"]);
}
</script>
</head>
<body>
<input type="button" onclick="init()" value="測試" />
</body>
</html>

jsonText的值為
{"name":"Bill","id":"802020114"}
如果第二個參數是函數,行為會有一點不同。傳入的函數接收兩個參數,屬性(鍵)名和屬性值。根據屬性(鍵)名可以知道應該如何處理要序列化的對象中的屬性。屬性名只能是字符串。
為了改變序列化對象的結果,函數返回的值就是相應鍵的值。不過要注意,如果函數返回了undefined,那麼相應的屬性會被忽略。如:
復制代碼 代碼如下:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var student={
name:"Bill",
age:12,
grade:3,
id:"0802020114",
subject:["math","Chinese","English"]
};
var jsonText=JSON.stringify(student,jsonConvert);
}
function jsonConvert(key,value)
{
switch (key)
{
case "name":
return "Lily";
case "grade":
return undefined;
case "subject":
return value.join(",");
default :
return value;
}
}
</script>
</head>
<body>
<input type="button" onclick="init()" value="測試" />
</body>
</html>

這裡函數過濾器根據傳入的鍵來決定結果。如果鍵為name,就將其值設置為Lily;如果為grade就返回undefined來刪除該屬性;如果為subject,它是一個數組,就將它通過數組方法join()轉化為以逗號連接的字符串。最後一定要提供default項,使其他的值都能夠正常出現在結果中,不然就會出錯,沒有結果。實際上,第一次調用這個函數過濾器,傳入的鍵是一個空字符串,而值就是student對象。上面的jsonText的值如下:
{"name":"Lily","age":12,"id":"0802020114","subject":"math,Chinese,English"}
在內部是按順序遍歷每一個對象每一個屬性,所以公開key,value函數方法需要注意你的函數只有著兩個參數才能起效,要理解函數的目的,就是在內部機制遍歷每一個屬性的時候讓你來修改部分結果,並且是一次遍歷每一個對象,這樣在序列化對象中每一個對象都要經過過濾器。
2、字符串縮進
JSON.stringify()方法的第三個參數用於控制結果中的縮進和空白符。如果這個參數是一個數值,那麼它表示的是每個級別縮進的空格數。如:
復制代碼 代碼如下:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var student={
name:"Bill",
age:12,
grade:3,
id:"0802020114",
subject:["math","Chinese","English"]
};
var jsonText=JSON.stringify(student,null,8);
}
</script>
</head>
<body>
<input type="button" onclick="init()" value="測試" />
</body>
</html>

保存在jsonText中的字符串為:
復制代碼 代碼如下:
{
"name": "Bill",
"age": 12,
"grade": 3,
"id": "0802020114",
"subject": [
"math",
"Chinese",
"English"
]
}

JSON.stringify()在結果字符串中插入了換行符以提高可讀性。只要傳入有效的控制縮進的參數值,結果字符串就會包含換行符(只縮進而不換行意義不大)。最大縮進空格數位10,所有大於10的值都會自定轉換為10。

如果縮進參數是一個字符串而非數值,則這個字符串將在JSON字符串中被用作縮進字符(不再使用空格)。如可以實現如下的效果:
復制代碼 代碼如下:
{
*"name": "Bill",
*"age": 12,
*"grade": 3,
*"id": "0802020114",
*"subject": [
**"math",
**"Chinese",
**"English"
*]
}

同樣字符串最長不能超過10個字符長。如果超過,結果中將只出現10個字符。
3、toJSON()方法
有時候JSON.stringify()還是不能滿足對某些對象進行自定義序列化的需求。在這些情況下,可以通過對象上調用toJSON()方法,返回其自身的JSON數據格式。如:
復制代碼 代碼如下:
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var student={
name:"Bill",
age:12,
grade:3,
id:"0802020114",
subject:["math","Chinese","English"],
toJSON:function(){
return this.name+"_"+this.id;
}
};
var jsonText=JSON.stringify(student);
}
</script>
</head>
<body>
<input type="button" onclick="init()" value="測試" />
</body>
</html>

以上代碼在student對象上定義了一個toJSON()方法,該方法返回name和id的組合。最後jsonText的值如下:
"Bill_0802020114"
toJSON()可以作為函數過濾器的補充,因此理解序列化的內部順序十分重要。假設把一個對象傳入JSON.stringify(),序列化該對象的順序是:
(1)如果存在toJSON()方法而且能夠通過它取得有效值,則調用該方法。否則,按默認順序執行序列化。
(2)如果提供了第二個參數,應用這個函數過濾器。傳入函數過濾器的值是第(1)步返回的值。
(3)對第(2)步返回的每個值進行相應的序列化。
(4)如果提供了第三個參數,執行相應的格式化。
無論是考慮滴定toJSON()方法,還是考慮使用函數過濾器,或者需要同時使用兩者,理解這個順序都是至關重要的。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved