JSON 基本使用

歡迎關(guān)注我的CSDN博客，里面發(fā)布了大量學(xué)習(xí)筆記。
https://xdr630.blog.csdn.net/

1. JSON 是什么？

  • JSON，全稱是 JavaScript Object Notation，即 JavaScript對(duì)象標(biāo)記法。
  • JSON是一種輕量級(jí)（Light-Meight)、基于文本的(Text-Based)、可讀的(Human-Readable)格式。
  • JSON 的名稱中雖然帶有JavaScript，但這是指其語法規(guī)則是參考JavaScript對(duì)象的，而不是指只能用于JavaScript 語言。
  • JSON無論對(duì)于人，還是對(duì)于機(jī)器來說，都是十分便于閱讀和書寫的，而且相比 XML(另一種常見的數(shù)據(jù)交換格式)，文件更小，因此迅速成為網(wǎng)絡(luò)上十分流行的交換格式。
  • 近年來JavaScript已經(jīng)成為瀏覽器上事實(shí)上的標(biāo)準(zhǔn)語言，JavaScript 的風(fēng)靡，與JSON 的流行也有密切的關(guān)系。
  • 因?yàn)镴SON本身就是參考JavaScript 對(duì)象的規(guī)則定義的，其語法與JavaScript定義對(duì)象的語法幾乎完全相同。
  • JSON格式的創(chuàng)始人聲稱此格式永遠(yuǎn)不升級(jí)，這就表示這種格式具有長(zhǎng)時(shí)間的穩(wěn)定性，10 年前寫的文件，10年后也能用,沒有任何兼容性問題。

2. JSON 的語法規(guī)則是怎樣的？

JSON 的語法規(guī)則十分簡(jiǎn)單，可稱得上“優(yōu)雅完美”，總結(jié)起來有：

  • 數(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)(“,”）分隔
{
    "name": "xdr630",
    "favorite": "programming"
}

3. JSON 和 XML

JSON常被拿來與XML做比較，因?yàn)镴SON 的誕生本來就多多少少要有取代XNL的意思。相比 XML，JSON的優(yōu)勢(shì)如下:

  • 沒有結(jié)束標(biāo)簽,長(zhǎng)度更短,讀寫更快
  • 能夠直接被JavaScript解釋器解析
  • 可以使用數(shù)組

兩者比較

  • JSON：
{
    "name":"兮動(dòng)人",
    "age":22,
    "fruits":["apple","pear","grape"]
}
  • XML：
<root>
    <name>兮動(dòng)人</name>
    <age>22</age>
    <fruits>apple</fruits>
    <fruits>pear</fruits>
    <fruits>grape</fruits>
</root>

4. JSON的解析和生成（JSON 和 JS 對(duì)象互轉(zhuǎn)）

  • 在JavaScript中，有兩個(gè)方法與此相關(guān): JSON.parse和 JSON.stringify 。

JSON 和 JS 對(duì)象互轉(zhuǎn)

  1. 要實(shí)現(xiàn)從JSON字符串轉(zhuǎn)換為JS對(duì)象，使用 JSON.parse() 方法：
<script>
    var str = '{"name": "兮動(dòng)人","age":22}';
    var obj = JSON.parse(str);
    console.log(obj);
</script>
在這里插入圖片描述
  1. 要實(shí)現(xiàn)從JS對(duì)象轉(zhuǎn)換為JSON字符串，使用 JSON.stringify() 方法：
<script>
    var str = '{"name": "兮動(dòng)人","age":22}';
    var obj = JSON.parse(str);
    console.log(obj);
        
    var jsonstr = JSON.stringify(obj);
    console.log(jsonstr);
</script>
在這里插入圖片描述

5. JSON格式規(guī)定

在這里插入圖片描述

1、對(duì)象（0bject)

  • 對(duì)象用大括號(hào)(“{}”）括起來，大括號(hào)里是一系列的“名稱/值對(duì)”，請(qǐng)看概念圖。

    在這里插入圖片描述

  • 兩個(gè)并列的數(shù)據(jù)之間用逗號(hào)(“,”）隔開，注意兩點(diǎn):

  1. 使用英文的逗號(hào)（“,”)，不要用中文的逗號(hào)(“，”)
  2. 最后一個(gè)“名稱/值對(duì)“之后不要加逗號(hào)

  • JSON在線檢查語法：https://www.json.cn/

  • 這里報(bào)錯(cuò)說明JSON中Key/Value不能使用單引號(hào)

    在這里插入圖片描述

  • 正確寫法


    在這里插入圖片描述

    2、數(shù)組（Array）

  • 數(shù)組表示一系列有序的值，用方括號(hào)(“[]”)包圍起來，并列的值之間用逗號(hào)分隔，請(qǐng)看概念圖。

    在這里插入圖片描述

  • 例如，以下的數(shù)組是合法的:

[1,2,"three","four",true,false,null,[1,2],{"name":"兮動(dòng)人"}]
在這里插入圖片描述

3、名稱/值對(duì)（Name/Value）

  • 名稱（Name）是一個(gè)字符串，要用雙引號(hào)括起來，不能用單引號(hào)，也不能沒有引號(hào)，這一點(diǎn)與JavaScript不同。
  • 值的類型只有七種:字符串（string)、數(shù)值(number)、對(duì)象（object)、數(shù)組（array), true、false、null。不能有這之外的類型，例如undefined、函數(shù)等。請(qǐng)看概念圖。
    在這里插入圖片描述

字符串（string）的規(guī)則如下:

  1. 英文雙引號(hào)括起來,不能用單引號(hào)，也不能沒有。
  2. 字符串中不能單獨(dú)出現(xiàn)雙引號(hào)（”）和右斜杠（“\")。
  3. 如果要打雙引號(hào)或右斜杠，需要使用“右斜杠+字符”的形式，例如\”和\\，其它的轉(zhuǎn)義字符也是如此字符串的概念圖。
    在這里插入圖片描述
  • 轉(zhuǎn)義字符
{
"string":"\\ \" "
}
在這里插入圖片描述

  • 數(shù)值類型，可以使用科學(xué)計(jì)數(shù)法表示


    在這里插入圖片描述
{
"number":1e3,
"n1":1e2,
"n2":-100
}
在這里插入圖片描述

6. 字符串轉(zhuǎn)化成對(duì)象

在這里插入圖片描述
  • 解析：是指將符合JSON 語法規(guī)則的字符串轉(zhuǎn)換成對(duì)象的過程。
  • 不同的編程語言都提供了解析JSON字符串的方法，在這里主要講解JavaScript中的解析方法。主要有三種:
  1. 使用eval()
  2. 使用JSON.parse()
  3. 使用第三方庫,例如JQuery等

1、 eval()

  • eval(）函數(shù)的參數(shù)是一個(gè)字符串，其作用是直接執(zhí)行其中的 JavaScript代碼。
  • 案例：eval()解析字符串
<script>
    var str = "console.log('hello')";
    eval(str);
</script>
  • eval 解析字符串的結(jié)果：
在這里插入圖片描述
  • eval(）能夠解析JSON字符串。從這里也可以看得出，JSON 和JavaScript是高度嵌合的。
  • 案例：eval()解析JSON字符串
<script>
    var str = '{"name":"兮動(dòng)人","age":22}';
    var obj = eval("("+str+")");
    console.log(obj)
</script>
在這里插入圖片描述
  • 但是,現(xiàn)在已經(jīng)很少直接使用eval()來解析了，如果您的瀏覽器版本真的是很舊，可能才需要這個(gè)方法。此外，eval()是一個(gè)相對(duì)危險(xiǎn)的函數(shù)，因?yàn)樽址锌赡芎形粗蛩?。在這里，作為學(xué)習(xí)，還是要知道這也是一種方法。
  • 請(qǐng)注意 eval()的參數(shù)，在字符串兩旁加了括號(hào)，這是必須的，否則會(huì)報(bào)錯(cuò)。
  • 因?yàn)镴SON字符串是被大括號(hào)（“{}”）包圍的，直接放到 eval()會(huì)被當(dāng)成語句塊來執(zhí)行，因此要在兩旁加上括號(hào)，使其變成表達(dá)式。

2、JSON. parse()

  • 現(xiàn)在絕大多數(shù)瀏覽器都以支持JSON.parse()，是推薦使用的方式。
  • 如果輸入了不符合規(guī)范的字符串,會(huì)報(bào)錯(cuò)。

案例：JSON字符串轉(zhuǎn)換為JS對(duì)象

<script>
    var str = '{"name":"兮動(dòng)人","age":22}';
    var obj = JSON.parse(str)
    console.log(obj)
</script>
在這里插入圖片描述
  • JSON.parse()可以有第二個(gè)參數(shù)，是一個(gè)函數(shù)。此函數(shù)有兩個(gè)參數(shù):name和value，分別代表名稱和值。當(dāng)傳入一個(gè)JSON字符串后，JSON的每一組名稱/值對(duì)都要調(diào)用此函數(shù)。該函數(shù)有返回值，返回值將賦值給當(dāng)前的名稱(name)。
  • 利用第二個(gè)參數(shù)，可以在解析JSON字符串的同時(shí)對(duì)數(shù)據(jù)進(jìn)行一些處理。

案例：

<script>
    var str = '{"name":"兮動(dòng)人","age":22}';
    var obj = JSON.parse(str,fun);
    function fun(name,value){
        console.log(name+":"+value);
        return value
    }
    console.log(obj)
</script>
在這里插入圖片描述
  • 可以做判斷處理，當(dāng)JSON字符串的 name=age 時(shí)，設(shè)置age的value=14
<script>
    var str = '{"name":"兮動(dòng)人","age":22}';
    var obj = JSON.parse(str,fun);
    function fun(name,value){
    if (name == "age")
        value = 14;
        return value
    }
    console.log(obj)
</script>
在這里插入圖片描述

7. JS對(duì)象轉(zhuǎn)化為字符串

在這里插入圖片描述
  • 序列化，指將 JavaScript 值轉(zhuǎn)化為JSON字符串的過程。
  • JSON.stringify(）能夠?qū)avaScript值轉(zhuǎn)換成JSON字符串。JSON.stringify()生成的字符串可以用JSON.parse()再還原成JavaScript值。

1、參數(shù)的含義

JSON.stringify(value[, replacer[, space]])
  1. value:必選參數(shù)。被變換的JavaScript值，一般是對(duì)象或數(shù)組。
  2. replace:可以省略。有兩種選擇:函數(shù)或數(shù)組。
  • 如果是函數(shù)，則每一組名稱/值對(duì)都會(huì)調(diào)用此函數(shù)，該函數(shù)返回一個(gè)值，作為名稱的值變換到結(jié)果字符串中,如果返回undefined，則該成員被忽略。

案例：

<script>
        var obj = {
            name: "兮動(dòng)人",
            age: 22
        };
        console.log(obj);

        var jsonstr = JSON.stringify(obj,fun);

        function fun(name,value) {
            if (name=="age")
                value = 18;
                return value;
         }

        console.log(jsonstr)

</script>
在這里插入圖片描述
  • 如果是數(shù)組，則只有數(shù)組中存在名稱才能夠被轉(zhuǎn)換，且轉(zhuǎn)換后順序與數(shù)組中的值保持一致。
  • 案例：
<script>
        var obj = {
            a: 1,
            b: 2,
            c: 3,
            d: 4
        };
        console.log(obj);

        var jsonstr = JSON.stringify(obj,["a","b","c"]);
        
        console.log(jsonstr)
</script>
在這里插入圖片描述
  • 把順序改下，對(duì)應(yīng)轉(zhuǎn)換的JSON字符串的數(shù)值不變
var jsonstr = JSON.stringify(obj,["c","a","b"]);
在這里插入圖片描述
  1. space:可以省略。這是為了排版、方便閱讀而存在的。可以在JSON字符串中添加空白或制表符等。

2、value的用法

<script>
var obj = {
            name: "兮動(dòng)人",
            age: 22
        }
    console.log(obj);
    var jsonstr = JSON.stringify(obj);
    console.log(jsonstr)
</script>
在這里插入圖片描述
  • 當(dāng)有不符合JSON語法規(guī)則時(shí)，就不會(huì)被轉(zhuǎn)換成JSON字符串。
  • 數(shù)組中有函數(shù)時(shí)會(huì)被轉(zhuǎn)換成 null 
<script>
    var obj = {
            name: "兮動(dòng)人",
            age: 22,
            a: undefined,
            f: function () {

            },
            b:[function () {}]
        }
    console.log(obj);
    var jsonstr = JSON.stringify(obj);
    console.log(jsonstr)        
</script>
在這里插入圖片描述

3、replace的用法

4、space的用法

  • 案例：在上面的基礎(chǔ)上添加
<script>
        var obj = {
            a: 1,
            b: 2,
            c: 3,
            d: 4
        };
        console.log(obj);

        var jsonstr = JSON.stringify(obj,["c","a","b"],"one");

        console.log(jsonstr)
</script>
在這里插入圖片描述
  • 改成制表符：\t 
<script>
        var obj = {
            a: 1,
            b: 2,
            c: 3,
            d: 4
        };
        console.log(obj);

        var jsonstr = JSON.stringify(obj,["c","a","b"],"\t");

        console.log(jsonstr)
</script>
在這里插入圖片描述
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容