腳本之家服務器常用軟件

快捷導航

一文搞懂JSON(JavaScript Object Notation)

更新時間：2021年10月29日 10:14:03 作者：JD強子

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

JSON出現(xiàn)

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

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

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

Json結構

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

Json對象

對象結構以{開始、以}結束，中間部分由 0 個或多個以英文,分隔的 key/value 對構成，key 和 value 之間以英文:分隔。對象結構的語法結構如下：

在這里插入圖片描述

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

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

JSON 對象保存在大括號內(nèi)。

就像在 JavaScript 中, 對象可以保存多個鍵/值對

Json對象與JavaScript對象

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

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

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

在這里插入圖片描述

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

在這里插入圖片描述

Json數(shù)組

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

在這里插入圖片描述

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

復雜數(shù)組類型

在這里插入圖片描述

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

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

復雜對象數(shù)組組合

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

對象包含數(shù)組

在這里插入圖片描述

這里我們創(chuàng)建了一個復雜的 siteInfo 的對象。

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

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

數(shù)組包含對象

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

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

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

每個為個對象為員工的記錄（姓和名）。

JSON 語法規(guī)則

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

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

Json鍵值對

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

在這里插入圖片描述

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

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

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

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

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

Json使用JavaScript語法

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

在這里插入圖片描述

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

訪問內(nèi)容

在這里插入圖片描述

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

修改對象的第二個元素的 category：

modules[1].category = "ES6";

Json與JavaScript對象遍歷

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

Json遍歷

我們創(chuàng)建一個 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>

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

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

在這里插入圖片描述

JavaScript對象遍歷

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

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript對象遍歷</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>

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

在這里插入圖片描述

Json與JavaScript數(shù)組遍歷

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

Json數(shù)組遍歷

我們創(chuàng)建一個 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>

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

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

在這里插入圖片描述

JavaScript對象數(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ù)組角標  
 console.log(i+" "+Js_Result[i].firstName
 +" "+Js_Result[i].lastName
 +" "+Js_Result[i].age);
}
//結果輸出為
0 haicoder www.haicoder.net 20
1 JavaScript www.JavaScript.net 30

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

序列化

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

讓我們先把小明這個對象序列化成JSON格式的字符串：

在這里插入圖片描述

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

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

結果：

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

還可以傳入一個函數(shù)，這樣對象的每個鍵值對都會被函數(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定義一個toJSON()的方法，直接返回JSON應該序列化的數(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}'

反序列化

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

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

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()還可以接收一個函數(shù)，用來轉(zhuǎn)換解析出的屬性：

在這里插入圖片描述