快捷導(dǎo)航

一文搞懂JSON(JavaScript Object Notation)

更新時(shí)間：2021年10月29日 10:14:03 作者：JD強(qiáng)子

Json 有兩種基本的結(jié)構(gòu)，即 Json對(duì)象和 Json 數(shù)組。通過 Json 對(duì)象和 Json 數(shù)組這兩種結(jié)構(gòu)的組合可以表示各種復(fù)雜的結(jié)構(gòu)，今天通過本文給大家介紹JavaScript Object Notation的基本知識(shí)，感興趣的朋友一起看看吧

JSON出現(xiàn)

在JSON出現(xiàn)之前，大家一直用XML來傳遞數(shù)據(jù)。因?yàn)閄ML是一種純文本格式，所以它適合在網(wǎng)絡(luò)上交換數(shù)據(jù)。XML本身不算復(fù)雜，但是，加上DTD、XSD、XPath、XSLT等一大堆復(fù)雜的規(guī)范以后，任何正常的軟件開發(fā)人員碰到XML都會(huì)感覺頭大了，最后大家發(fā)現(xiàn)，即使你努力鉆研幾個(gè)月，也未必搞得清楚XML的規(guī)范。

終于，在2002年的一天，道格拉斯·克羅克福特（Douglas Crockford）同學(xué)為了拯救深陷水深火熱同時(shí)又被某幾個(gè)巨型軟件企業(yè)長期愚弄的軟件工程師，發(fā)明了JSON這種超輕量級(jí)的數(shù)據(jù)交換格式。

由于JSON非常簡單，很快就風(fēng)靡Web世界，并且成為ECMA標(biāo)準(zhǔn)。幾乎所有編程語言都有解析JSON的庫，而在JavaScript中，我們可以直接使用JSON，因?yàn)镴avaScript內(nèi)置了JSON的解析。

Json結(jié)構(gòu)

Json 有兩種基本的結(jié)構(gòu)，即 Json對(duì)象 和 Json 數(shù)組。通過 Json 對(duì)象和 Json 數(shù)組這兩種結(jié)構(gòu)的組合可以表示各種復(fù)雜的結(jié)構(gòu)。

Json對(duì)象

對(duì)象結(jié)構(gòu)以{開始、以}結(jié)束，中間部分由 0 個(gè)或多個(gè)以英文,分隔的 key/value 對(duì)構(gòu)成，key 和 value 之間以英文:分隔。對(duì)象結(jié)構(gòu)的語法結(jié)構(gòu)如下：

在這里插入圖片描述

其中，key 必須為 String 類型，需使用雙引號(hào)。value 可以是 String、Number、Object、Array 等數(shù)據(jù)類型。例如，一個(gè) person 對(duì)象包含姓名、密碼、年齡等信息，使用 JSON 的表示形式如下

{
    "pname":"張三",
    "password":"123456",
    "page":40
}

JSON 對(duì)象保存在大括號(hào)內(nèi)。

就像在 JavaScript 中, 對(duì)象可以保存多個(gè) 鍵/值對(duì)

Json對(duì)象與JavaScript對(duì)象

JavaScript 中的所有事物都是對(duì)象，比如字符串、數(shù)字、數(shù)組、日期等等。在 JavaScript 中，對(duì)象是擁有屬性和方法的數(shù)據(jù)。

我們通常說的 Json 對(duì)象，是 Json 格式的 JavaScript 對(duì)象或是符合 Json 數(shù)據(jù)結(jié)構(gòu)要求的 JavaScript 對(duì)象。

對(duì)比	Json	JavaScript
含義	僅僅是一種數(shù)據(jù)格式	表示類的實(shí)例
傳輸	可以跨平臺(tái)數(shù)據(jù)傳輸，速度快	不能傳輸
表現(xiàn)	1.鍵必須加雙引號(hào) 2.值不能是方法函數(shù)，不能是 undefined/NaN	1.鍵不加引號(hào) 2.值可以是函數(shù)、對(duì)象、字符串、數(shù)字、 boolean 等
相互轉(zhuǎn)換	Json轉(zhuǎn)換JavaScript： 1. Json.parse(JsonStr); (不兼容IE7) 2. eval("("+JsonStr+")"); (兼容所有瀏覽器	JavaScript對(duì)象轉(zhuǎn)換Json： Json.stringify(jsObj);

在這里插入圖片描述

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

在這里插入圖片描述

Json數(shù)組

數(shù)組結(jié)構(gòu)以[開始、以]結(jié)束，中間部分由 0 個(gè)或多個(gè)以英文,分隔的值的列表組成。數(shù)組結(jié)構(gòu)的語法結(jié)構(gòu)如下：

在這里插入圖片描述

Json 數(shù)組的元素類型可以不一致，如 item1 可以是字符串類型， item2 可以是數(shù)字類型， item3 可以是對(duì)象類型。數(shù)組的最后一個(gè)元素后面不可以加逗號(hào)。

復(fù)雜數(shù)組類型

在這里插入圖片描述

這里我們創(chuàng)建了一個(gè)包含三個(gè)對(duì)象的數(shù)組。

第一個(gè)為 HTML 對(duì)象，該對(duì)象同時(shí)也是一個(gè)包含 5 個(gè)元素的數(shù)組。第二個(gè)為 JavaScript 對(duì)象，該對(duì)象同時(shí)也是一個(gè)包含 4 個(gè)元素的數(shù)組。第三個(gè)為 Server 對(duì)象，該對(duì)象同時(shí)也是一個(gè)包含 3 個(gè)元素的數(shù)組。

復(fù)雜對(duì)象數(shù)組組合

上述兩種（對(duì)象、數(shù)組）數(shù)據(jù)結(jié)構(gòu)也可以分別組合構(gòu)成更加復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。

對(duì)象包含數(shù)組

在這里插入圖片描述

這里我們創(chuàng)建了一個(gè)復(fù)雜的 siteInfo 的對(duì)象。

siteInfo 的對(duì)象 siteUrl 屬性的值為 www.haicoder.com，siteInfo 的對(duì)象 siteAddr 屬性的值為 shanghai，siteInfo 的對(duì)象 sitePriority 屬性的值為 1，siteInfo 的對(duì)象 siteModule 屬性是一個(gè)數(shù)組。

siteModule 數(shù)組有兩個(gè)元素，第一個(gè)元素是 HTML，第二個(gè)元素是 JavaScript。這兩個(gè)元素也都是一個(gè)數(shù)組類型。

數(shù)組包含對(duì)象

就像在 JavaScript 中, 數(shù)組可以包含對(duì)象：

"employees":[  
    {"firstName":"John", "lastName":"Doe"},  
    {"firstName":"Anna", "lastName":"Smith"},  
    {"firstName":"Peter", "lastName":"Jones"}  
]

在以上實(shí)例中，對(duì)象 “employees” 是一個(gè)數(shù)組。包含了三個(gè)對(duì)象。

每個(gè)為個(gè)對(duì)象為員工的記錄（姓和名）。

JSON 語法規(guī)則

數(shù)據(jù)為鍵/值對(duì)。
數(shù)據(jù)由逗號(hào)分隔。
大括號(hào)保存對(duì)象方括號(hào)保存數(shù)組

為了統(tǒng)一解析，JSON的字符串規(guī)定必須用雙引號(hào)""，Object的鍵也必須用雙引號(hào)""。

Json鍵值對(duì)

Json 數(shù)據(jù)的書寫格式是：名稱/值對(duì)。就像 JavaScript 對(duì)象屬性。一個(gè)名稱對(duì)應(yīng)一個(gè)值，名稱/值對(duì)包括字段名稱（在雙引號(hào)中），后面寫一個(gè)冒號(hào)，然后是值

在這里插入圖片描述

Json值的數(shù)據(jù)類型

Json值可以是如下幾種類型：

類型	描述
數(shù)字型（Number）	Json 數(shù)字類型可以支持整型或者浮點(diǎn)型，但不能使用八進(jìn)制和十六進(jìn)制格式。 Json 數(shù)字類型也不能使用 NaN 和 Infinity。
字符串型（String）	Json 字符串必須寫在雙引號(hào)之間，且只能是雙引號(hào)。包裹的 Unicode 字符和反斜杠轉(zhuǎn)義字符。在 Json 中沒有字符型，字符型就是單個(gè)字符串。
布爾型（Boolean）	Json 布爾值的 true 或者 false，只能小寫。使用雙引號(hào)引用的值，不是布爾值。
數(shù)組（Array）	【有序的值序列】。
對(duì)象（Object）	{ 無序的鍵:值對(duì)集合。}
null	空。

JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個(gè)文本。
文本可以被任何編程語言讀取及作為數(shù)據(jù)格式傳遞。

道格拉斯同學(xué)長期擔(dān)任雅虎的高級(jí)架構(gòu)師，自然鐘情于 JavaScript。他設(shè)計(jì)的 Json 實(shí)際上是 JavaScript語法的一個(gè)子集，是 JavaScript 對(duì)象的字符串表示法。Json 是使用文本表示一個(gè) JavaScript 對(duì)象的信息，本質(zhì)是一個(gè)字符串。

Json使用JavaScript語法

因?yàn)?Json 使用的是 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 Json。

在這里插入圖片描述

這里我們通過 JavaScript，創(chuàng)建了一個(gè)對(duì)象數(shù)組，并對(duì)該對(duì)象數(shù)組進(jìn)行了賦值。

訪問內(nèi)容

在這里插入圖片描述

修改數(shù)據(jù)

修改對(duì)象的第二個(gè)元素的 category：

modules[1].category = "ES6";

Json與JavaScript對(duì)象遍歷

Json 字符串的遍歷和 JavaScript對(duì)象 的遍歷都是使用 for-in循環(huán)來遍歷。

Json遍歷

我們創(chuàng)建一個(gè) haicoder.html 的文件，并輸入以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json遍歷</title>
    <script type="text/javascript">
        console.log("嗨客網(wǎng)(www.haicoder.net)");
        var str = {"name":"haicoder", "url":"www.haicoder.net"};
        for (var k in str) {
            console.log(k + " -> " + str[k]);
        }
    </script>
</head>
<body>
</body>
</html>

首先，我們定義了一個(gè) Json 字符串 str。接著，我們使用 for 循環(huán)，遍歷該 Json 字符串，k 為 Json字符串中的 key，str[k] 為 Json字符串 key 對(duì)應(yīng)的 value。

用瀏覽器打開該文件，瀏覽器輸出如下圖所示：

在這里插入圖片描述

JavaScript對(duì)象遍歷

我們創(chuàng)建一個(gè) haicoder.html 的文件，并輸入以下代碼：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript對(duì)象遍歷</title>
    <script type="text/javascript">
        console.log("嗨客網(wǎng)(www.haicoder.net)");
        var obj = {name:"haicoder", url:"www.haicoder.net"};
        for (var k in obj) {
            console.log(k + " -> " + obj[k]);
        }
    </script>
</head>
<body>
</body>
</html>

首先，我們定義了一個(gè) JavaScript 對(duì)象 obj。接著，我們使用 for 循環(huán)，遍歷該 JavaScript 對(duì)象，k 為 JavaScript 對(duì)象的 key，obj[k] 為 JavaScript 對(duì)象 key 對(duì)應(yīng)的 value。

在這里插入圖片描述

Json與JavaScript數(shù)組遍歷

Json 數(shù)組的遍歷和 JavaScript數(shù)組的遍歷都是使用 for-in 循環(huán)來遍歷

Json數(shù)組遍歷

我們創(chuàng)建一個(gè) haicoder.html 的文件，并輸入以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json數(shù)組遍歷</title>
    <script type="text/javascript">
        console.log("嗨客網(wǎng)(www.haicoder.net)");
        var jsonArr = [
            {"mod":"json", "url":"www.haicoder.net/json"},
            {"mod":"vue", "url":"www.haicoder.net/vue"},
            {"mod":"python", "url":"www.haicoder.net/python"}
        ]
        for (var k in jsonArr) {
            console.log(k + " -> " + jsonArr[k].mod + " -> " + jsonArr[k].url);
        }
    </script>
</head>
<body>
</body>
</html>

首先，我們定義了一個(gè) Json 數(shù)組，該數(shù)組里面每一個(gè)元素都是一個(gè)對(duì)象。接著，我們使用 for 循環(huán)遍歷該 Json 數(shù)組，k 為 Json 數(shù)組的下標(biāo)，jsonArr[k] 為 Json數(shù)組下標(biāo) key 對(duì)應(yīng)的 value。

Json 數(shù)組中的每一個(gè)對(duì)象的值我們使用 . 來獲取。

在這里插入圖片描述

JavaScript對(duì)象數(shù)組遍歷

var Js_Result = [
  {
    name: "haicoder",
    url: "www.haicoder.net",
    age: 20
  },
  {
    name: "JavaScript",
    url: "www.JavaScript.net",
    age: 30
  }
]
for (var i in Js_Result ){             //  i為數(shù)組角標(biāo)  
 console.log(i+" "+Js_Result[i].firstName
 +" "+Js_Result[i].lastName
 +" "+Js_Result[i].age);
}
//結(jié)果輸出為
0 haicoder www.haicoder.net 20
1 JavaScript www.JavaScript.net 30

將 JavaScript 對(duì)象保存到數(shù)組 Js_Result 使用 for 循環(huán)遍歷 Json_Result,，i 為數(shù)組角標(biāo)，通過 Js_Result[i].firstName 的方式獲取對(duì)應(yīng)的值。

序列化

把任何JavaScript對(duì)象變成JSON，就是把這個(gè)對(duì)象序列化成一個(gè)JSON格式的字符串，這樣才能夠通過網(wǎng)絡(luò)傳遞給其他計(jì)算機(jī)。

讓我們先把小明這個(gè)對(duì)象序列化成JSON格式的字符串：

在這里插入圖片描述

要輸出得好看一些，可以加上參數(shù)，按縮進(jìn)輸出：

JSON.stringify(xiaoming, null, ' ');

結(jié)果：

{
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" Middle School",
"skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
]
}

還可以傳入一個(gè)函數(shù)，這樣對(duì)象的每個(gè)鍵值對(duì)都會(huì)被函數(shù)先處理：

function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
}

JSON.stringify(xiaoming, convert, '  ');

上面的代碼把所有屬性值都變成大寫：

{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON",
    "LISP"
  ]
}

如果我們還想要精確控制如何序列化小明，可以給xiaoming定義一個(gè)toJSON()的方法，直接返回JSON應(yīng)該序列化的數(shù)據(jù)：

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只輸出name和age，并且改變了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

反序列化

通常我們從服務(wù)器中讀取 JSON 數(shù)據(jù)，并在網(wǎng)頁中顯示數(shù)據(jù)。

拿到一個(gè)JSON格式的字符串，我們直接用JSON.parse()把它變成一個(gè)JavaScript對(duì)象：

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse()還可以接收一個(gè)函數(shù)，用來轉(zhuǎn)換解析出的屬性：

在這里插入圖片描述

Json的特性

Json 易于機(jī)器的解析和生成，客戶端 JavaScript 可以簡單的通過 eval() 進(jìn)行 Json 數(shù)據(jù)的讀取。
Json 天生具有自我描述性，易于人的閱讀和編寫。
Json 采用完全獨(dú)立于語言的文本格式。格式都是壓縮的，占用帶寬小。
Json 解析器和 Json 庫支持許多不同的編程語言，目前幾乎所有的編程語言都支持 Json。
因?yàn)?Json 格式能夠直接為服務(wù)器端代碼使用，大大簡化了服務(wù)器端和客戶端的代碼開發(fā)量，但是完成的任務(wù)不變，且易于維護(hù)。
Json 比 XML 更小、更快，更易解析。
Json 還規(guī)定了字符集必須是 UTF-8，這樣表示多語言就沒有問題了。

到此這篇關(guān)于一文搞懂JSON(JavaScript Object Notation)的文章就介紹到這了,更多相關(guān)JSON(JavaScript Object Notation)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: