JSON是什么？

JSON（JavaScript Object Notation, JS對象簡譜）是一種輕量級的數據交換格式。它基于 ECMAScript（European Computer Manufacturers Association, 歐洲計算機協會制定的js規范）的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。 

JSON源自于JavaScript，是一種輕量級（Light-Meight)、基于文本的(Text-Based)、可讀的(Human-Readable)格式。

在現在的開發中，能夠進行數據交換格式的，包括兩個JSON   XML。

JSON是存儲和交換文本信息的語法，類似 XML，JSON比 XML更小、更快，更易解析。

 那么，簡而言之，對JSON的說明總結如下：

• JSON是獨立于任何編程語言的數據格式
• 是一種用于存儲和傳輸數據的輕量級格式
• 語法是自描述的，便于人類閱讀和理解

JSON語法

基本語法：

• 數組（Array）用方括號 "[]" 表示
• 對象（0bject）用大括號 "{}" 表示
• 名稱 / 值 對(name/value）組合成數組和對象
• 名稱( name ）置于雙引號中，值（value）有字符串、數值、布爾值、null、對象和數組
• 并列的數據之間用逗號 "," 分隔
• 名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值

需要注意的是：

JSON不支持注釋。向 JSON添加注釋無效

JSON文件的文件類型是 .json

JSON文本的 MIME 類型是 application/json

獲取JSON數據

 json是以對象的形式存在的，直接獲取JSON數據可通過如下方法：

1. json對象.鍵名

2. json對象["鍵名"]

3. 數組對象[索引]

4. 遍歷 

代碼示例：

    


        


            


            

        

        


            

                //定義基本格式
            

        

    

    


        


            


            

        

        


            

                var person = { name: "張三", age: 23, gender: true };
            

        

    

    


        


            


            

        

        


            

                var persons = [
            

        

    

    


        


            


            

        

        


            

                { name: "張三", age: 23, gender: true },
            

        

    

    


        


            


            

        

        


            

                { name: "李四", age: 24, gender: true },
            

        

    

    


        


            


            

        

        


            

                { name: "王五", age: 25, gender: false },
            

        

    

    


        


            


            

        

        


            

                ];
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //獲取person對象中所有的鍵和值
            

        

    

    


        


            


            

        

        


            

                //for in 循環
            

        

    

    


        


            


            

        

        


            

                /* for(var key in person){
            

        

    

    


        


            


            

        

        


            

                 //這樣的方式獲取不行。因為相當于  person."name"
            

        

    

    


        


            


            

        

        


            

                 //alert(key + ":" + person.key);
            

        

    

    


        


            


            

        

        


            

                 alert(key+":"+person[key]);
            

        

    

    


        


            


            

        

        


            

                 }*/
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //獲取persons中的所有值
            

        

    

    


        


            


            

        

        


            

                for (var i = 0; i < persons.length; i++) {
            

        

    

    


        


            


            

        

        


            

                var p = persons[i];
            

        

    

    


        


            


            

        

        


            

                for (var key in p) {
            

        

    

    


        


            


            

        

        


            

                console.log(key + ":" + p[key]);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    




    

 輸出結果為：

 JSON 解析與序列化（在JavaScript中）

先在控制臺中打印一下JSON對象，看看有什么，如圖：

 顯而易見，在JavaScript中JSON對象僅有兩個方法：parse和stringify。后面會詳細介紹一下這兩個方法

序列化的概念：序列化是將對象轉化為字節序列的過程。對象序列化后可以在網絡上傳輸，或者保存到硬盤上。

將對象序列化成json字符串： JSON.stringify(json對象)；

反序列化：將json字符串反序列化為對象:   JSON.parse(str)

JSON.parse

API介紹：用來解析 JSON字符串，構造由字符串描述的 JavaScript 值或對象，傳入的字符串不符合 JSON規范會報錯

語法：

JSON.parse(str, reviver);

• str：要解析的 JSON字符串
• reviver：可選的函數 function(key,value)，該函數的第一個參數和第二個參數分別代表鍵值對的鍵和值，并可以對值進行轉換（函數返回值當做處理后的value）

代碼示例：

    


        


            


            

        

        


            

                // JSON.parse() 解析JSON字符串， 將JSON轉換為對象
            

        

    

    


        


            


            

        

        


            

                let json = '{"name": ["js", "webpack"], "age": 22, "gridFriend": "ljj"}';
            

        

    

    


        


            


            

        

        


            

                console.log(JSON.parse(json));
            

        

    

    


        


            


            

        

        


            

                // {name: Array(2), age: 22, gridFriend: 'ljj'}
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 第二個參數是一個函數，key和value代表每個key/value對
            

        

    

    


        


            


            

        

        


            

                let result = JSON.parse(json, (key, value) => {
            

        

    

    


        


            


            

        

        


            

                if (key == "age") {
            

        

    

    


        


            


            

        

        


            

                return `年齡：${value}`;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return value;
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                console.log(result);
            

        

    

    


        


            


            

        

        


            

                //{name: Array(2), age: '年齡：22', gridFriend: 'ljj'}
            

        

    

 JSON.stringify

API介紹：將一個 JavaScript 對象或值轉換為 JSON字符串

如果指定了一個 replacer 函數，則可以選擇性地替換值，或者指定的 replacer 是數組，則可選擇性地僅包含數組指定的屬性

語法：

JSON.stringify(value, replacer, space)

value：將要序列化成 一個 JSON 字符串的值

replacer：

• 如果該參數是一個函數，則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理
• 如果該參數是一個數組，則只有包含在這個數組中的屬性名才會被序列化到最終的 JSON 字符串中
• 如果該參數為 null 或者未提供，則對象所有的屬性都會被序列化

space：指定縮進用的空白字符串，用于美化輸出

• 如果參數是個數字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格
• 如果該參數為字符串（當字符串長度超過10個字母，取其前10個字母），該字符串將被作為空格
• 如果該參數沒有提供（或者為 null），將沒有空格

代碼示例：

    


        


            


            

        

        


            

                let obj = {
            

        

    

    


        


            


            

        

        


            

                name: "jsx",
            

        

    

    


        


            


            

        

        


            

                age: 22,
            

        

    

    


        


            


            

        

        


            

                lesson: ["html", "css", "js"],
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                let json = JSON.stringify(obj);
            

        

    

    


        


            


            

        

        


            

                console.log(json);
            

        

    

    


        


            


            

        

        


            

                // {"name":"jsx","age":22,"lesson":["html","css","js"]}
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 第二個參數replacer 為函數時，被序列化的值得屬性都會經過該函數轉換處理
            

        

    

    


        


            


            

        

        


            

                function replacer(key, value) {
            

        

    

    


        


            


            

        

        


            

                if (typeof value === "string") {
            

        

    

    


        


            


            

        

        


            

                return undefined;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return value;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                let result = JSON.stringify(obj, replacer);
            

        

    

    


        


            


            

        

        


            

                console.log(result);
            

        

    

    


        


            


            

        

        


            

                // {"age":22,"lesson":[null,null,null]}
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 當replacer參數為數組，數組的值代表將被序列化成 JSON 字符串的屬性名
            

        

    

    


        


            


            

        

        


            

                let result1 = JSON.stringify(obj, ["name", "lesson"]);
            

        

    

    


        


            


            

        

        


            

                // 只保留 “name” 和 “lesson” 屬性值
            

        

    

    


        


            


            

        

        


            

                console.log(result1);
            

        

    

    


        


            


            

        

        


            

                // {"name":"jsx","lesson":["html","css","js"]}
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 第三個參數spcae,用來控制結果字符串里面的間距
            

        

    

    


        


            


            

        

        


            

                let result2 = JSON.stringify(obj, null, 4);
            

        

    

    


        


            


            

        

        


            

                console.log(result2);
            

        

    

    


        


            


            

        

        


            

                /*{
            

        

    

    


        


            


            

        

        


            

                 "name": "jsx",
            

        

    

    


        


            


            

        

        


            

                 "age": 22,
            

        

    

    


        


            


            

        

        


            

                 "lesson": [
            

        

    

    


        


            


            

        

        


            

                 "html",
            

        

    

    


        


            


            

        

        


            

                 "css",
            

        

    

    


        


            


            

        

        


            

                 "js"
            

        

    

    


        


            


            

        

        


            

                 ]
            

        

    

    


        


            


            

        

        


            

                 }*/
            

        

    




    

 注意：如果replacer是一個函數，則該函數會進行深處理，即如果鍵值對的值也是一個數組，則也會執行該函數

JSON.stringify()原理

• 轉換值如果有 toJSON() 方法，該方法定義什么值將被序列化
• 非數組對象的屬性不能保證以特定的順序出現在序列化后的字符串中
• 布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值，undefined、任意的函數以及 symbol 值，在序列化過程中會被忽略（出現在非數組對象的屬性值中時）或者被轉換成 null（出現在數組中時）。函數、undefined 被單獨轉換時，會返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)
• 對包含循環引用的對象（對象之間相互引用，形成無限循環）執行此方法，會拋出錯誤
• 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們
• Date 日期調用了 toJSON() 將其轉換為了 string 字符串（同Date.toISOString()），因此會被當做字符串處理
• NaN 和 Infinity 格式的數值及 null 都會被當做 null
• 其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

藍藍設計( www.nantongguohuai.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。