jacascript JSON對象的學習
前言:這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方,請大家指正,我會持續更新!
JSON (javascript object notation) 全稱是 javascript 對象表示法,它是一種數據交換的文本格式,而不是一種編程語言,用於讀取結構化數據。2001年由Douglas Crockford提出,目的是取代繁瑣笨重的 XML 格式。正確的 JSON 格式需要符合一定的語法規則,使用 www.json.cn 網站可以對 JSON 進行格式校驗;
語法規則
JSON 的語法可以表示以下三種類型的值:簡單值、對象、數組。
簡單值
簡單值使用與 javascript 相同的語法,可以在 JSON 中表示字符串、數值、布爾值和 null;JSON 不支持
字符串必須使用雙引號表示,不能使用單引號。數值必須以十進制表示,且不能使用 NaN 和 Infinity;
對象
對象作為一種復雜數據類型,表示的是一組有序的鍵值對。而每個鍵值對中的值可以是簡單值,也可以是復雜數據類型的值;
與 javascript 的對象字面量相比,JSON 有三個不同的地方:
- JSON 沒有變量的概念
- JSON 中,對象的鍵名必須放在雙引號裏面
- 因為 JSON 不是 javascript 語句,所以沒有末尾的分號
同一個對象中不應該出現兩個同名屬性;
數組
數組也是一種復雜數據類型,表示一組有序的值的列表,可以通過數值索引來訪問其中的值。數組的值也可以是任意類型——簡單值、對象或數組
JSON 數組也沒有變量和分號,把數組和對象結合起來,可以構成更復雜的數據集合
數組或對象最後一個成員的後面,不能加逗號;
JSON對象
JSON 之所以流行,是因為可以把 JSON 數據結構解析為有用的 javascript 對象;
ECMAScript5 對解析 JSON 的行為進行了規範,定義了全局對象 JSON;IE7及以下瀏覽器不支持;
JSON 對象有兩個方法:stringify() 和 parse()。這兩個方法分別用於把 JavaScript 對象序列化為 JSON 字符串和把 JSON 字符串解析為原生 JavaScript 值;
JSON.stringify()
JSON.stringify() 方法用於將一個JavaScript 值轉為 JSON 字符串。該字符串應該符合 JSON 格式,並且可以被 JSON.parse() 方法還原;
默認情況下,JSON.stringify() 輸出的 JSON 字符串不包括任何空格字符或縮進 ;
JSON.stringify() 方法會忽略對象的不可遍歷屬性;
<script type="text/javascript"> var mate = { "title":"javascript", "person":{ "name":"jack", "age":"18" } }; console.log(JSON.stringify(mate));//{"title":"javascript","person":{"name":"jack","age":"18"}} console.log(JSON.stringify(new Date()));//"2017-09-25T10:50:42.362Z" </script>
JSON.stringify() 除了要序列化的 javascript 對象外,還可以接收另外兩個參數,這兩個參數用於指定以不同的方式序列化 javascript 對象。第一個參數是個過濾器,可以是一個數組,也可以是一個函數;第二個參數是一個選項,表示是否在 JSON 字符串中保留縮進;
當 JSON.stringify() 方法的第二個參數是一個數組時,這時相當於實現一個過濾器的功能;過濾器只對對象的第一層屬性有效;
過濾器對數組無效;
<script type="text/javascript"> var mate = { "title":"javascript", "person":{ "name":"jack", "age":"18" } }; console.log(JSON.stringify(mate,[‘bbb‘,‘person‘,‘aaaaaa‘,‘age‘]));//{"person":{"age":"18"}} //當 JSON.stringify() 方法的第二個參數是一個數組時,這時相當於實現一個過濾器的功能;過濾器只對對象的第一層屬性有效; var arr = ["a","b"]; console.log(JSON.stringify(arr,["c"]));//["a","b"] //過濾器對數組無效 </script>
JSON.stringify() 方法的第二個參數也可以是一個函數。傳入的函數接收兩個參數,屬性(鍵)名和屬性值;
屬性(鍵)名只能是字符串,而在值並非鍵值對兒結構的值時,鍵名可以是空字符串;
這個函數參數會遞歸處理所有的鍵;
<script type="text/javascript"> var data = { "title":"javascript", "person":{ "name":"jack", "age":"18", a:{ bbb:1111 } } }; //屬性名只能是字符串,而在值並非鍵值對兒結構的值時,鍵名可以是空字符串 //這個函數參數會遞歸處理所有的鍵 JSON.stringify(data,function(key,value){ console.log("["+ key + "]:" + value); return value; }) // []:[object Object] 第一次鍵名為空,鍵值是整個對象 // [title]:javascript // [person]:[object Object] // [name]:jack // [age]:18 // [a]:[object Object] // [bbb]:1111 </script>
函數返回的值就是相應鍵的值。如果函數返回了undefined或沒有返回值,那麽相應的屬性會被忽略;
<script type="text/javascript"> var data = { "title":"javascript", "person":{ "name":"jack", "age":"18", a:{ bbb:1111 } } }; //函數返回的值就是相應鍵的值。如果函數返回了undefined或沒有返回值,那麽相應的屬性會被忽略 JSON.stringify(data,function(key,value){ if(typeof(value) === "string"){ return undefined; } console.log("["+ key + "]:" + value); return value; }) // []:[object Object] // [person]:[object Object] // [a]:[object Object] // [bbb]:1111 </script>
JSON.stringify() 方法還可以接受第三個參數,表示數據之間的縮進(默認為0),用於增加返回的 JSON 字符串的可讀性;
如果是數字,表示每個屬性前面添加的空格(最多不超過10個),一個 tab 是4個空格,所以一般寫2或者4;
如果是字符串(不超過10個字符),則該字符串會添加在每行前面;
<script type="text/javascript"> var data = { "title":"javascript", "person":{ "name":"jack", "age":"18", a:{ bbb:1111 } } }; console.log(JSON.stringify(data,null,‘數據‘)); //{ //數據"title": "javascript", //數據"person": { //數據數據"name": "jack", //數據數據"age": "18", //數據數據"a": { //數據數據數據"bbb": 1111 //數據數據} //數據} //} </script>
JSON.parse()
JSON.parse() 方法用於將 JSON 字符串轉化成 javascript 對象;前端獲取 JSON 數據後,要先用它轉化後才能操作數據;
如果傳入的字符串不是有效的 JSON 格式,JSON.parse方法將報錯;
JSON.parse() 方法也可以接收一個函數參數,在每個鍵值對上調用,這個函數被稱為還原函數(reviver)。該函數接收兩個參數,一個鍵和一個值,返回一個值;
如果還原函數返回 undefined,則表示要從結果中刪除相應的鍵;如果返回其他值,則將該值插入到結果中;
<script type="text/javascript"> var test = JSON.parse(‘{"title":"javascript","person":{"name":"Shane","age":"18"}}‘,function(key,value){ if (key === ‘‘){ return value }else if(key === ‘person‘){ return value; } return value; }); console.log(test.person.name);//Shane </script>
在將日期字符串轉換為Date對象時,經常要用到還原函數;
<script type="text/javascript"> var person = { "name": "Shane", "date": new Date(2017,10,10) } var jsonData = JSON.stringify(person); var bookCopy = JSON.parse(jsonData,function(key,value){ if(key == ‘date‘){ return new Date(value); } return value; }) console.log(bookCopy.date.getMonth());//10 </script>
jacascript JSON對象的學習