初識JSON

▓▓▓▓▓▓ 大致介紹

  JSON(JavaScript Object Notation  JavaScript對象表示法),JSON是一種數據格式,不是一種編程語言。雖然它的名字中有JavaScript但是它卻不屬於JavaScript,就像Java和JavaScript的關係一樣。而且,並不是只有JavaScript才使用它,畢竟 JSON 只是一種數據格式。很多編程語言都有針對 JSON 的解析器和序列化器。

  JSON是由Douglas Crockford在2001年提出,爲了取代XML

 

▓▓▓▓▓▓ 語法

  JSON的語法可以包含三種類型的值:

    ◆ 簡單值

    ◆ 對象

    ◆ 數組

 

  ▓▓▓▓▓▓ 簡單值

    簡單值:使用與 JavaScript 相同的語法,可以在 JSON 中表示字符串、數值、布爾值和 null

    注意:【1】JSON 不支持 JavaScript 中的特殊值 undefined

       【2】JSON 字符串必須使用雙引號(單引號會導致語 法錯誤)

         // 有效的JSON數據
         "Hellow World!"
         5         true
         null

 

  

  ▓▓▓▓▓▓ 對象

    對象作爲一種複雜的數據類型,表示的是一組有序的鍵值對,每個鍵值對中的值既可以是簡單值也可以是複雜數據類型的值

    JSON中的對象和JavaScript中的字面量稍微有一些不同:

      1、沒有聲明變量

      2、在末尾不需要加分號

      3、JSON 中對象的屬性名任何時候都必須加雙引號

    注意:同一個對象中絕對不應該出現兩個同名屬性

複製代碼

        // JavaScript中的字面量
        var person = {
            name : "Lao Wang",
            age : 21
        };        // JSON        {            "name" : "Lao Wang",            "age" : 21
        }        // 可以在對象中嵌入對象        {            "name" : "Lao Wang",            "age" : 21,            "school" : {                "name" : "TJLG",                "location" : "西青"
            }
        }

複製代碼

 

  

  ▓▓▓▓▓▓ 數組

    JSON 數組採用的就是 JavaScript 中的數組字面量形式

        // JavaScript
        var values = [21,"西青",true];        // JSON
        values = [21,"西青",true]

 

▓▓▓▓▓▓ JSON對象

  早期的 JSON 解析器基本上就是使用 JavaScript 的 eval()函數。由於 JSON 是 JavaScript 語法的子 集,因此 eval()函數可以解析、解釋並返回 JavaScript 對象和數組,但是使用eval()函數對JSON數據結構求值存在風險,應爲可能會執行一些惡意代碼,所以要儘量少的使用eval()函數

  ECMAScript 5 對解析 JSON 的行 爲進行規範,定義了全局對象 JSON。支持這個對象的瀏覽器有 IE 8+、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10.5+。對於較早版本的瀏覽器,可以使用一個 shim:https://github.com/douglascrockford/JSON-js。 

  JSON對象有兩個方法:

    1、stringify()

    2、parse()

 

    ▓▓▓▓▓▓ stringify()

    stringify()方法將JavaScript對象序列化爲JSON字符串

    注意:

      【1】默認情況下,JSON.stringify()輸出的 JSON 字符串不包含任何空格字符或縮進

複製代碼

        var person = {
            name : "Lao Wang",
            grade : {                "English" : "88",                "Math" : "98"
            }
        };        var jsonPerson = JSON.stringify(person);
        console.log(jsonPerson);        // {"name":"Lao Wang","grade":{"English":"88","Math":"98"}}

複製代碼

 

      【2】 如果對象的成員是undefined或者函數,該成員會被忽略

            如果數組的成員是undefined或者函數,則這些值會被轉成null

複製代碼

        var person = {
            name : function(){},
            sex : undefined,
            age : 21,
            grade : [undefined,function(){},"English"],
        }        var jsonPerson = JSON.stringify(person);
        console.log(jsonPerson);        // {"age":21,"grade":[null,null,"English"]}

複製代碼

 

      【3】JSON.stringify()會忽略對象的不可遍歷屬性

複製代碼

        var person = {};
        Object.defineProperties(person,{            'name' : {
                value : "Lao Wang",
                enumerable : true
            },            'age' : {
                value : 21,
                enumerable : false
            }
        });        var jsonPerson = JSON.stringify(person);
        console.log(jsonPerson);        // {"name":"Lao Wang"}

複製代碼

 

    實際上,JSON.stringify()除了要序列化的 JavaScript 對象外,還可以接收另外兩個參數,這兩 個參數用於指定以不同的方式序列化 JavaScript 對象

      第一個參數是個過濾器,可以是一個數組,也可 以是一個函數

      第二個參數是一個選項,表示是否在 JSON 字符串中保留縮進

      

      1、當第一個參數是數組時

      如果過濾器參數是數組,那麼 JSON.stringify()的結果中將只包含數組中列出的屬性

      注意:

        【1】、過濾器只對對象的第一層屬性有效

複製代碼

        var person = {
            name : "Lao Wang",
            grade : {                "English" : "88",                "Math" : "98"
            }
        };        var jsonPerson = JSON.stringify(person,["name","Math"]);
        console.log(jsonPerson);        // {"name":"Lao Wang"}

複製代碼

 

        【2】過濾器對數組無效

        var values = [21,"he",true,"we"];        var jsonValues = JSON.stringify(values,["he"]);
        console.log(jsonValues);        // [21,"he",true,"we"]

 

      2、當第一個參數是函數時

        傳入的函數接收兩個參數,屬性(鍵)名和屬性值。根據屬性(鍵)名可以知道應該如何處理要序列化的對象中的屬性。屬性名只能是字符串,而在值並非鍵值對兒結構的值時,鍵名可以是空字符串。 爲了改變序列化對象的結果,函數返回的值就是相應鍵的值。

        注意:如果函數返回了undefined或沒有返回值,那麼相應的屬性會被忽略

複製代碼

        var values = {
            name : "Lao Wang",
            age : 21,
            sex : "男"
        }        var jsonValues = JSON.stringify(values,function(key,value){            if(key == "sex"){                return undefined;
            }else{                return value;
            }
        });
        console.log(jsonValues);        // {"name":"Lao Wang","age":21}

複製代碼

 

      3、當給定第三個參數時

        JSON.stringify()方法的第三個參數用於控制結果中的縮進和空白符。如果這個參數是一個數值,那它表示的是每個級別縮進的空格數

        注意:

          【1】只要傳入有效的控制縮進的參數值,結果字符串就會包含換行符

          【2】最大縮進空格數爲10,所有大於10的值都會自動轉換爲10

          【3】如果縮進參數是一個字符串而非數值,則這個字符串將在 JSON 字符串中被用作縮進字符(不再使用空格)

複製代碼

        // 參數是數值
        var person = {
            name : "Lao Wang",
            grade : {                "English" : "88",                "Math" : "98"
            }
        };        var jsonPerson = JSON.stringify(person,null,4);
        console.log(jsonPerson);    /*
        {
            "name": "Lao Wang",
            "grade": {
                "English": "88",
                "Math": "98"
            }
        }    */

        // 參數是字符串
        var person = {
            name : "Lao Wang",
            grade : {                "English" : "88",                "Math" : "98"
            }
        };        var jsonPerson = JSON.stringify(person,null,"-_-||");
        console.log(jsonPerson);    /*    
        {
        -_-||"name": "Lao Wang",
        -_-||"grade": {
        -_-||-_-||"English": "88",
        -_-||-_-||"Math": "98"
        -_-||}
        }    */

複製代碼

 

    ▓▓▓▓▓▓ toJSON()

    有時候,JSON.stringify()還是不能滿足對某些對象進行自定義序列化的需求。在這些情況下, 可以通過對象上調用toJSON()方法,返回其自身的JSON數據格式

複製代碼

        var person = {
            name : "Lao Wang",
            grade : {                "English" : "88",                "Math" : "98"
            },
            toJSON : function(){                return "toJSON方法";
            }
        };        var jsonPerson = JSON.stringify(person);
        console.log(jsonPerson);        // "toJSON方法"

複製代碼

    

    注意:如果toJSON()方法返回undefined,此時如果包含它的對象嵌入在另一個對象中,會導致該對象的值變成null。而如果包含它的對象是頂級對象,結果就是undefined

複製代碼

        // 嵌入在另一個對象中
        var person = {
            name : "Lao Wang",
            grade : {                "English" : "88",                "Math" : "98"
            },
            sex : {
                value : "男",
                toJSON : function(){                    return undefined;
                }
            }

        };        var jsonPerson = JSON.stringify(person,null,4);
        console.log(jsonPerson);    /*
        {
            "name": "Lao Wang",
            "grade": {
                "English": "88",
                "Math": "98"
            }
        }    */

        // 嵌入頂級對象
        var person = {
            name : "Lao Wang",
            grade : {                "English" : "88",                "Math" : "98"
            },
            toJSON : function(){                return undefined;
            }
        };        var jsonPerson = JSON.stringify(person,null,4);
        console.log(jsonPerson);        // undefined

複製代碼

 

    原生Date對象有一個toJSON()方法,能夠將JavaScript的Date 對象自動轉換成ISO 8601日期字符串(與在Date對象上調用toISOString() 的結果完全一樣)

        var date = JSON.stringify(new Date("2017-1-18"));
        console.log(date);        // "2017-01-17T16:00:00.000Z"

 

    

    toJSON()可以作爲函數過濾器的補充,因此理解序列化的內部順序十分重要。假設把一個對象傳入JSON.stringify(),序列化該對象的順序如下

      1、如果存在toJSON()方法而且能通過它取得有效的值,則調用該方法。否則,按默認順序執行序列化

      2、如果提供了第二個參數,應用這個函數過濾器。傳入函數過濾器的值是第一步返回的值

      3、對第二步返回的每個值進行相應的序列化

      4、如果提供了第三個參數,執行相應的格式化

 

    ▓▓▓▓▓▓ JSON.parse()     

      JSON.parse()將JSON字符串解析爲JavaScript值

        var person = JSON.parse('{"name":"Lao Wang"}');
        console.log(person.name);        // Lao Wang

 

      注意:如果傳入的字符串不是有效的JSON格式,JSON.parse方法將報錯

 

      JSON.parse()方法也可以接收另一個參數,該參數是一個函數,將在每個鍵值對兒上調用。爲了區別 JSON.stringify()接收的替換(過濾)函數(replacer),這個函數被稱爲還原函數(reviver),還原函數接收兩個參數,一個鍵和一個值,而且需要返回一個值 

      注意:如果還原函數返回 undefined,則表示要從結果中刪除相應的鍵;如果返回其他值,則將該值插入到結果中

複製代碼

        var person = JSON.parse('{"name":"Lao Wang","age":21}',function(key,value){            if(key == "age"){                return undefined;
            }else{                return value;
            }
        });
        console.log(person.name);        // Lao Wang

複製代碼

 

      在將日期字符串轉換爲 Date 對象時,經常要用到還原函數

複製代碼

        var book = {             "title": "Professional JavaScript",             "authors": ["Nicholas C. Zakas"],
             edition: 3,
             year: 2011,
             releaseDate: new Date(2017, 1, 18)
         };        var jsonText = JSON.stringify(book,null,4);
        console.log(jsonText);    /*
        {
            "title": "Professional JavaScript",
            "authors": [
                "Nicholas C. Zakas"
            ],
            "edition": 3,
            "year": 2011,
            "releaseDate": "2017-02-17T16:00:00.000Z"
        }    */

        var bookCopy = JSON.parse(jsonText, function(key, value){             if (key == "releaseDate"){                 return new Date(value);
             }else{                 return value;
             }

        });

        console.log(bookCopy.releaseDate.getFullYear()); 
        // 2017

複製代碼


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章