欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

JavaScript核心技術(shù)之JSON詳解

2023-3-31 前端達人

JSON是什么？

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

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

在現(xiàn)在的開發(fā)中，能夠進行數(shù)據(jù)交換格式的，包括兩個JSON XML。

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

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

JSON是獨立于任何編程語言的數(shù)據(jù)格式

是一種用于存儲和傳輸數(shù)據(jù)的輕量級格式

語法是自描述的，便于人類閱讀和理解

JSON語法

基本語法：

數(shù)組（Array）用方括號 "[]" 表示

對象（0bject）用大括號 "{}" 表示

名稱 / 值對(name/value）組合成數(shù)組和對象

名稱( name ）置于雙引號中，值（value）有字符串、數(shù)值、布爾值、null、對象和數(shù)組

并列的數(shù)據(jù)之間用逗號 "," 分隔

名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值

需要注意的是：

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

JSON文件的文件類型是 .json

JSON文本的 MIME 類型是 application/json

獲取JSON數(shù)據(jù)

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

1. json對象.鍵名

2. json對象["鍵名"]

3. 數(shù)組對象[索引]

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 循環(huán)
            

        

    

    

        

            

            

        

        

            
                /* for(var key in person){
            

        

    

    

        

            

            

        

        

            
                 //這樣的方式獲取不行。因為相當(dāng)于  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]);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

輸出結(jié)果為：

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

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

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

序列化的概念：序列化是將對象轉(zhuǎn)化為字節(jié)序列的過程。對象序列化后可以在網(wǎng)絡(luò)上傳輸，或者保存到硬盤上。

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

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

JSON.parse

API介紹：用來解析 JSON字符串，構(gòu)造由字符串描述的 JavaScript 值或?qū)ο?，傳入的字符串不符?nbsp;JSON規(guī)范會報錯

語法：

JSON.parse(str, reviver);

str：要解析的 JSON字符串

reviver：可選的函數(shù) function(key,value)，該函數(shù)的第一個參數(shù)和第二個參數(shù)分別代表鍵值對的鍵和值，并可以對值進行轉(zhuǎn)換（函數(shù)返回值當(dāng)做處理后的value）

代碼示例：




    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 第二個參數(shù)是一個函數(shù)，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 對象或值轉(zhuǎn)換為 JSON字符串

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

語法：

JSON.stringify(value, replacer, space)

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

replacer：

如果該參數(shù)是一個函數(shù)，則在序列化過程中，被序列化的值的每個屬性都會經(jīng)過該函數(shù)的轉(zhuǎn)換和處理

如果該參數(shù)是一個數(shù)組，則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中

如果該參數(shù)為 null 或者未提供，則對象所有的屬性都會被序列化

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

如果參數(shù)是個數(shù)字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格

如果該參數(shù)為字符串（當(dāng)字符串長度超過10個字母，取其前10個字母），該字符串將被作為空格

如果該參數(shù)沒有提供（或者為 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"]}
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 第二個參數(shù)replacer 為函數(shù)時，被序列化的值得屬性都會經(jīng)過該函數(shù)轉(zhuǎn)換處理
            

        

    

    

        

            

            

        

        

            
                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]}
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 當(dāng)replacer參數(shù)為數(shù)組，數(shù)組的值代表將被序列化成 JSON 字符串的屬性名
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                // 只保留 “name” 和 “l(fā)esson” 屬性值
            

        

    

    

        

            

            

        

        

            
                console.log(result1);
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 第三個參數(shù)spcae,用來控制結(jié)果字符串里面的間距
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                console.log(result2);
            

        

    

    

        

            

            

        

        

            
                /*{
            

        

    

    

        

            

            

        

        

            
                 "name": "jsx",
            

        

    

    

        

            

            

        

        

            
                 "age": 22,
            

        

    

    

        

            

            

        

        

            
                 "lesson": [
            

        

    

    

        

            

            

        

        

            
                 "html",
            

        

    

    

        

            

            

        

        

            
                 "css",
            

        

    

    

        

            

            

        

        

            
                 "js"
            

        

    

    

        

            

            

        

        

            
                 ]
            

        

    

    

        

            

            

        

        

            
                 }*/

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

JSON.stringify()原理

轉(zhuǎn)換值如果有 toJSON() 方法，該方法定義什么值將被序列化

非數(shù)組對象的屬性不能保證以特定的順序出現(xiàn)在序列化后的字符串中

布爾值、數(shù)字、字符串的包裝對象在序列化過程中會自動轉(zhuǎn)換成對應(yīng)的原始值，undefined、任意的函數(shù)以及 symbol 值，在序列化過程中會被忽略（出現(xiàn)在非數(shù)組對象的屬性值中時）或者被轉(zhuǎn)換成 null（出現(xiàn)在數(shù)組中時）。函數(shù)、undefined 被單獨轉(zhuǎn)換時，會返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)

對包含循環(huán)引用的對象（對象之間相互引用，形成無限循環(huán)）執(zhí)行此方法，會拋出錯誤

所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數(shù)中強制指定包含了它們

Date 日期調(diào)用了 toJSON() 將其轉(zhuǎn)換為了 string 字符串（同Date.toISOString()），因此會被當(dāng)做字符串處理

NaN 和 Infinity 格式的數(shù)值及 null 都會被當(dāng)做 null

其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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