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

2023-3-31 前端達(dá)人

JSON是什么？

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

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

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

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

那么，簡(jiǎn)而言之，對(duì)JSON的說(shuō)明總結(jié)如下：

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

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

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

JSON語(yǔ)法

基本語(yǔ)法：

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

對(duì)象（0bject）用大括號(hào) "{}" 表示

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

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

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

名稱/值對(duì)包括字段名稱（在雙引號(hào)中），后面寫(xiě)一個(gè)冒號(hào)，然后是值

需要注意的是：

JSON不支持注釋。向 JSON添加注釋無(wú)效

JSON文件的文件類型是 .json

JSON文本的 MIME 類型是 application/json

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

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

1. json對(duì)象.鍵名

2. json對(duì)象["鍵名"]

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

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對(duì)象中所有的鍵和值
            

        

    

    

        

            

            

        

        

            
                //for in 循環(huán)
            

        

    

    

        

            

            

        

        

            
                /* for(var key in person){
            

        

    

    

        

            

            

        

        

            
                 //這樣的方式獲取不行。因?yàn)橄喈?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中）

先在控制臺(tái)中打印一下JSON對(duì)象，看看有什么，如圖：

顯而易見(jiàn)，在JavaScript中JSON對(duì)象僅有兩個(gè)方法：parse和stringify。后面會(huì)詳細(xì)介紹一下這兩個(gè)方法

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

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

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

JSON.parse

API介紹：用來(lái)解析 JSON字符串，構(gòu)造由字符串描述的 JavaScript 值或?qū)ο螅瑐魅氲淖址环?nbsp;JSON規(guī)范會(huì)報(bào)錯(cuò)

語(yǔ)法：

JSON.parse(str, reviver);

str：要解析的 JSON字符串

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

代碼示例：




    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 第二個(gè)參數(shù)是一個(gè)函數(shù)，key和value代表每個(gè)key/value對(duì)
            

        

    

    

        

            

            

        

        

            
                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介紹：將一個(gè) JavaScript 對(duì)象或值轉(zhuǎn)換為 JSON字符串

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

語(yǔ)法：

JSON.stringify(value, replacer, space)

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

replacer：

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

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

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

space：指定縮進(jìn)用的空白字符串，用于美化輸出

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

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

如果該參數(shù)沒(méi)有提供（或者為 null），將沒(méi)有空格

代碼示例：




    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 第二個(gè)參數(shù)replacer 為函數(shù)時(shí)，被序列化的值得屬性都會(huì)經(jīng)過(guò)該函數(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"]}
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                console.log(result2);
            

        

    

    

        

            

            

        

        

            
                /*{
            

        

    

    

        

            

            

        

        

            
                 "name": "jsx",
            

        

    

    

        

            

            

        

        

            
                 "age": 22,
            

        

    

    

        

            

            

        

        

            
                 "lesson": [
            

        

    

    

        

            

            

        

        

            
                 "html",
            

        

    

    

        

            

            

        

        

            
                 "css",
            

        

    

    

        

            

            

        

        

            
                 "js"
            

        

    

    

        

            

            

        

        

            
                 ]
            

        

    

    

        

            

            

        

        

            
                 }*/

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

JSON.stringify()原理

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

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

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

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

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

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

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

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

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

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

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