jacascript JSON對象的學習_ZenDei技術網路在線

前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！ JSON (javascript object notation) 全稱是 javascript 對象表示法，它是一種數據交換的文本格式，而不是一種編程語言，用於讀取結構化數據。2001年由Douglas ...

前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！

　　JSON (javascript object notation) 全稱是 javascript 對象表示法，它是一種數據交換的文本格式，而不是一種編程語言，用於讀取結構化數據。2001年由Douglas Crockford提出，目的是取代繁瑣笨重的 XML 格式。正確的 JSON 格式需要符合一定的語法規則，使用 www.json.cn 網站可以對 JSON 進行格式校驗；

語法規則

　　JSON 的語法可以表示以下三種類型的值：簡單值、對象、數組。

簡單值

　　簡單值使用與 javascript 相同的語法，可以在 JSON 中表示字元串、數值、布爾值和 null；JSON 不支持 javascript 中的特殊值 undefined；

　　字元串必須使用雙引號表示，不能使用單引號。數值必須以十進位表示，且不能使用 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>