JSON與JavaScript對象
JSON是一種表示結構化數據的存儲格式,語法格式上與JavasScript對象有些類似。
TIPS: 與JavaScript對象的格式區別
- 不支持變量、函數或對象實例
- 字符串,屬性名必須使用雙引號
- 無需定義變量存儲引用
// JSON對象
{
"name": "KenTsang",
"age": 27,
"job": "Developer"
}
// js對象(該對象將作在後續例子引用)
let person = {
name: 'KenTsang',
age: 27,
job: 'Developer'
}
ES5定義了一個全局對象JSON,IE8+以上支持,該對象提供來stringify
和parse
兩個方法用於JSON數據解析和序列化。
stringify()
stringify用於把JavaScript對象序列化JSON字符串,
在序列化JavaScript對象時,所有函數及原型成員都會被有意忽略,不體現在結果中。此外,值爲undefined的任何屬性也都會被跳過。
JSON.stringify(
value: Object,
replace: Array | function(key,value) {},
space: number | string
)
該方法接受三個參數
- 參數:接收傳入的js對象
- 參數:過濾器(數組/函數)
- 參數:字符串縮進(數值/字符串)
參數2 - 過濾器
TIPS1: 過濾器是一個數組時,序列化結果只包含數組中列出的屬性
let result = JSON.stringify(person, ["name", "job"]);
// 輸出結果
// {"name":"KenTsang","job":"Developer"}
TIPS2: 過濾器是一個函數時(替換函數)
var jsonStr = JSON.stringify(Person, function(key, value){
if (key == 'age') {
return 'secret';
} else {
return value;
}
})
// 輸出結果
// {"name":"KenTsang","age":"secret","job":"Developer"}
如果替換函數返回的是undefined
,則該屬性不會被包含在序列化結果中。
參數3 - 字符串縮進
用於控制序列化結果中的縮進和空白符,輸出序列結果帶縮進格式,方便預覽查看。實際應用開發不多。
- 爲數值時,表示每個級別縮進的空格數(最大10)
- 爲字符串時,則作爲縮進字符(替換默認的空格,最大10個字符)
let result = JSON.stringify(person, null, '--');
// 輸出結果
/*
{
--"name": "KenTsang",
--"age": 27,
--"job": "Developer"
}
*/
toJSON()方法
應對更復雜的一些需求,我們可以通過toJSON()對某些對象進行自定義序列化的需求。
let person = {
name: "KenTsang",
age: 28,
job: 'Developer',
toJSON: function() {
return {
"name": "KT",
"age": "2*",
"job": "DP"
}
}
};
let result = JSON.stringify(person);
// 輸出結果
// {"name":"KT","age":"2*","job":"DP"}
TIPS: 序列化順序
- 如果存着toJSON方法而且能通過它取得有效的值,則調用該方法。否則,返回對象本身。
- 如果提供了第二個參數,應用這個函數過濾器。傳入函數過濾器的值是第(1)步的值。
- 對第(2)步返回的每個值進行相應的序列化。
- 如果提供了第三個參數,執行相應的格式化。
-- 摘自《JavaScript高級程序設計》--
parse()
parse用於把JSON字符串解析成JavaScript對象
JSON.parse(text: string, reviver: function(key, value) {})
該方法接受三個參數
- 參數:接收傳入的json字符串
- 參數:還原函數
還原函數
- 返回undefined, 結果中刪除相應的鍵
- 返回其它值,則將值插入到結果中
let Person = {
name: "KenTsang",
age: 28,
job: "Developer",
birth: new Date(1991, 3, 19)
};
var jsonStr = JSON.stringify(Person);
var jsObj = JSON.parse(jsonStr, function(key, value) {
if (key == 'birth') {
return new Date(value);
} else {
return value);
}
});
jsObj.birth.getFullYearh();
// 輸出結果: 1991
例子中通過還原函數,重新實例一個Date對象,所以可以用到getFullYear()
方法。
參考文檔
作者:以樂之名
本文原創,有不當的地方歡迎指出。轉載請指明出處。