一文搞懂JSON(JavaScript Object Notation)

阿新 • • 發佈：2021-10-29

JSON出現

在JSON出現之前，大家一直用XML來傳遞資料。因為XML是一種純文字格式，所以它適合在網路上交換資料。XML本身不算複雜，但是，加上DTD、XSD、XPath、XSLT等一大堆複雜的規範以後，任何正常的軟體開發人員碰到XML都會感覺頭大了，最後大家發現，即使你努力鑽研幾個月，也未必搞得清楚XML的規範。

終於，在2002年的一天，道格拉斯克羅克福特（Douglas Crockford）同學為了拯救深陷水深火熱同時又被某幾個巨型軟體企業長期愚弄的軟體工程師，發明了JSON這種超輕量級的資料交換格式。

由於JSON非常簡單，很快就風靡Web世界，並且成為ECMA標準。幾乎所有語言都有解析JSON的庫，而在JavaScript中，我們可以直接使用JSON，因為JavaScript內建了JSON的解析。

Json結構

Json 有兩種基本的結構，即 Json物件 和 Json 陣列。通過 Json 物件和 Json 陣列這兩種結構的組合可以表示各種複雜的結構。

Json物件

物件結構以{開始、以}結束，中間部分由 0 個或多個以英文,分隔的 key/value 對構成，key 和 value 之間以英文:

分隔。物件結構的語法結構如下：

在這裡插入圖片描述

其中，key 必須為 String 型別，需使用雙引號。value 可以是 String、Number、Object、Array 等資料型別。例如，一個 person 物件包含姓名、密碼、年齡等資訊，使用 JSON 的表示形式如下

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

JSON 物件儲存在大括號內。

就像在 JavaScript 中,物件可以儲存多個鍵/值對

Json物件與JavaScript物件

JavaScript 中的所有事物都是物件，比如字串、數字、陣列、日期等等。在 JavaScript 中，物件是擁有屬性和方法的資料。

我們通常說的 Json 物件，是 Json 格式的 JavaScript 物件或是符合 Json 資料結構要求的 JavaScript 物件。

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

在這裡插入圖片描述

JSON 和 JavaScript 物件互轉

在這裡插入圖片描述

Json陣列

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

在這裡插入圖片描述

Json 陣列的元素型別可以不一致，如 item1 可以是字串型別， item2 可以是數字型別， item3 可以是物件型別。陣列的最後一個元素後面不可以加逗號。

複雜陣列型別

在這裡插入圖片描述

這裡我們建立了一個包含三個物件的陣列。

第一個為 HTML 物件，該物件同時也是一個包含 5 個元素的陣列。第二個為 JavaScript 物件，該物件同時也是一個包含 4 個元素的陣列。第三個為 Server 物件，該物件同時也是一個包含 3 個元素的陣列。

複雜物件陣列組合

上述兩種（物件、陣列）資料結構也可以分別組合構成更加複雜的資料結構。

物件包含陣列

在這裡插入圖片描述

這裡我們建立了一個複雜的 siteInfo 的物件。

siteInfo 的物件 siteUrl 屬性的值為 www.haicoder.com，siteInfo 的物件 siteAddr 屬性的值為 shanghai，siteInfo 的物件 sitePriority 屬性的值為 1，siteInfo 的物件 siteModule 屬性是一個數組。

siteModule 陣列有兩個元素，第一個元素是 HTML，第二個元素是 JavaScript。這兩個元素也都是一個數組型別。

陣列包含物件

就像在 JavaScript 中,陣列可以包含物件：

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

在以上例項中，物件 “employees” 是一個數組。包含了三個物件。

每個為個物件為員工的記錄（姓和名）。

JSON 語法規則

資料為鍵/值對。
資料由逗號分隔。
大括號儲存物件方括號儲存陣列

為了統一解析，JSON的字串規定必須用雙引號""，Object的鍵也必須用雙引號""。

Json鍵值對

Json 資料的書寫格式是：名稱/值對。就像 JavaScript 物件屬性。一個名稱對應一個值，名稱/值對包括欄位名稱（在雙引號中），後面寫一個冒號，然後是值

在這裡插入圖片描述

Json值的資料型別

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

型別	描述
數字型（Number）	Json 數字型別可以支援整型或者浮點型，但不能使用八進位制和十六進位制格式。 Json 數字型別也不能使用 NaN 和 Infinity。
字串型（String）	Json 字串必須寫在雙引號之間，且只能是雙引號。包裹的 Unicode 字元和反斜槓轉義字元。在 Json 中沒有字元型，字元型就是單個字串。
布林型（Boolean）	Json 布林值的 true 或者 false，只能小寫。使用雙引號引用的值，不是布林值。
陣列（Array）	【有序的值序列】。
物件（Object）	{ 無序的鍵:值對集合。}
null	空。

JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文字。
文字可以被任何程式語言讀取及作為資料格式傳遞。

道格拉斯同學長期擔任雅虎的高階架構師，自然鍾情於 JavaScript。他設計的 Json 實際上是 JavaScript語法的一個子集，是 JavaScript 物件的字串表示法。Json 是使用文字表示一個 JavaScript 物件的資訊，本質是一個字串。

Json使用JavaScript語法

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

在這裡插入圖片描述

這裡我們通過 JavaScript，建立了一個物件陣列，並對該物件陣列進行了賦值。

訪問內容

在這裡插入圖片描述

修改資料

修改物件的第二個元素的 category：

modules[1].category = "ES6";

Json與JavaScript物件遍歷

Json 字串的遍歷和 JavaScript物件 的遍歷都是使用 for-in迴圈來遍歷。

Json遍歷

我們建立一個 haicoder.html 的檔案，並輸入以下程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json遍歷</title>
    <script type="text/javascript">
        console.log("嗨客網(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 迴圈，遍歷該 Json 字串，k 為 Json字串中的 key，str[k] 為 Json字串 key 對應的 value。

用瀏覽器開啟該檔案，瀏覽器輸出如下圖所示：

在這裡插入圖片描述

JavaScript物件遍歷

我們建立一個 haicoder.html 的檔案，並輸入以下程式碼：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript物件遍歷</title>
    <script type="text/javascript">
        console.log("嗨客網(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 迴圈，遍歷該 JavaScript 物件，k 為 JavaScript 物件的 key，obj[k] 為 JavaScript 物件 key 對應的 value。

在這裡插入圖片描述

Json與JavaScript陣列遍歷

Json 陣列的遍歷和 JavaScript陣列的遍歷都是使用 for-in 迴圈來遍歷

Json陣列遍歷

我們建立一個 haicoder.html 的檔案，並輸入以下程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json陣列遍歷</title>
    <script type="text/javascript">
        console.log("嗨客網(www.haicoder.net)");
        var jsonArr = [
            {"mod":"json","url":"www.haicoder.net/json"},{"mod":"","url":"www.haicoder.net/vue"},"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 陣列，該數組裡面每一個元素都是一個物件。接著，我們使用 for 迴圈遍歷該 Json 陣列，k 為 Json 陣列的下標，jsonArr[k] 為 Json陣列下標 key 對應的 value。

Json 陣列中的每一個物件的值我們使用 . 來獲取。

在這裡插入圖片描述

JavaScript物件陣列遍歷

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為陣列角標  
 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 物件儲存到陣列 Js_Result 使用 for 迴圈遍歷 Json_Result,，i 為陣列角標，通過 Js_Result[i].firstName 的方式獲取對應的值。

序列化

把任何JavaScript物件變成JSON，就是把這個物件序列化成一個JSON格式的字串，這樣才能夠通過網路傳遞給其他計算機。

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

在這裡插入圖片描述

要輸出得好看一些，可以加上引數，按縮排輸出：

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

結果：

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

還可以傳入一個函式，這樣物件的每個鍵值對都會被函式先處理：

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",www.cppcns.com "LISP"
  ]
}

如果我們還想要精確控制如何序列化小明，可以給xiaoming定義一個toJSON()的方法，直接返回JSON應該序列化的資料：

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 資料，並在網頁中顯示資料。

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

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

JSON.parse()還可以接收一個函式，用來轉換解析出的屬性：

在這裡插入圖片描述

Json的特性

Json 易於機器的解析和生成，客戶端 JavaScript 可以簡單的通過 eval() 進行 Json 資料的讀取。
Json 天生具有自我描述性，易於人的閱讀和編寫。
Json 採用完全獨立於語言的文字格式。格式都是壓縮的，佔用頻寬小。
Json 解析器和 Json 庫支援許多不同的程式語言，目前幾乎所有的程式語言都支援 Json。
因為 Json 格式能夠直接為伺服器端程式碼使用，大大簡化了伺服器端和客戶端的程式碼開發量，但是完成的任務不變，且易於維護。
Json 比 XML 更小、更快，更易解析。
Json 還規定了字符集必須是 UTF-8，這樣表示多語言www.cppcns.com就沒有問題了。

到此這篇關於一文搞懂JSON(JavaScript Object Notation)的文章就介紹到這了,更多相關JSON(JavaScript Object Notation)內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

一文搞懂JSON(JavaScript Object Notation)

目錄

JSON出現

Json結構

Json物件

Json物件與JavaScript物件

JSON 和 JavaScript 物件互轉

Json陣列

複雜陣列型別

複雜物件陣列組合

物件包含陣列

陣列包含物件

JSON 語法規則

Json鍵值對

Json值的資料型別

一文搞懂JSON(JavaScript Object Notation)

一文搞懂 Redis降低記憶體佔用方式

一文搞懂Session和Cookie的用法及區別

一文搞懂四種同步工具類

一文搞懂 Prometheus 的直方圖

一文搞懂c# await,async執行流

一文搞懂C++ 动态内存

一文搞懂JAVA 修飾符

一文搞懂MySQL預編譯

一文搞懂Python函式（匿名函式、巢狀函式、閉包、裝飾器）！

一文搞懂JAVA 列舉（enum）

一文搞懂C# 資料型別

一文搞懂Java8 Lambda表示式(附帶視訊教程)

一文搞懂Java中的反射機制

一文搞懂Cortex-A9 ADC裸機和基於Linux驅動編寫方法

一文搞懂並學會使用SpringBoot的Actuator執行狀態監控元件的詳細教程

一文搞懂WordPress建站

一文搞懂Cookie,Session,Token,JWT

一文搞懂線性表的初始化、取元素、插元素、找元素、刪元素

一文搞懂PV、UV、VV、IP及其關係與計算

一文搞懂JSON(JavaScript Object Notation)

目錄

JSON出現

Json結構

Json物件

Json物件與JavaScript物件

JSON 和 JavaScript 物件互轉

Json陣列

複雜陣列型別

複雜物件陣列組合

物件包含陣列

陣列包含物件

JSON 語法規則

Json鍵值對

Json值的資料型別

相關推薦