一文搞懂JSON(JavaScript Object Notation)
JSON（JavaScript Object Notation, JS 對象標(biāo)記）是一種輕量級的數(shù)據(jù)交換格式，通常用于服務(wù)端向網(wǎng)頁傳遞數(shù)據(jù) 。與 XML 一樣，JSON 也是基于純文本的數(shù)據(jù)格式。
Json 文件的文件后綴是 .Json，Json 文本的 MIME 類型是 application/Json。
JSON出現(xiàn)
在JSON出現(xiàn)之前，大家一直用XML來傳遞數(shù)據(jù)。因為XML是一種純文本格式，所以它適合在網(wǎng)絡(luò)上交換數(shù)據(jù)。XML本身不算復(fù)雜，但是，加上DTD、XSD、XPath、XSLT等一大堆復(fù)雜的規(guī)范以后，任何正常的軟件開發(fā)人員碰到XML都會感覺頭大了，最后大家發(fā)現(xiàn)，即使你努力鉆研幾個月，也未必搞得清楚XML的規(guī)范。
終于，在2002年的一天，道格拉斯·克羅克福特（Douglas Crockford）同學(xué)為了拯救深陷水深火熱同時又被某幾個巨型軟件企業(yè)長期愚弄的軟件工程師，發(fā)明了JSON這種超輕量級的數(shù)據(jù)交換格式。
由于JSON非常簡單，很快就風(fēng)靡Web世界，并且成為ECMA標(biāo)準(zhǔn)。幾乎所有編程語言都有解析JSON的庫，而在JavaScript中，我們可以直接使用JSON，因為JavaScript內(nèi)置了JSON的解析。
Json結(jié)構(gòu)
Json 有兩種基本的結(jié)構(gòu)，即 Json對象 和 Json 數(shù)組。通過 Json 對象和 Json 數(shù)組這兩種結(jié)構(gòu)的組合可以表示各種復(fù)雜的結(jié)構(gòu)。
Json對象
對象結(jié)構(gòu)以{開始、以}結(jié)束，中間部分由 0 個或多個以英文,分隔的 key/value 對構(gòu)成，key 和 value 之間以英文:分隔。對象結(jié)構(gòu)的語法結(jié)構(gòu)如下：
其中，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ù)結(jié)構(gòu)要求的 JavaScript 對象。
| 對比 | Json | JavaScript |
|---|---|---|
| 含義 | 僅僅是一種數(shù)據(jù)格式 | 表示類的實(shí)例 |
| 傳輸 | 可以跨平臺數(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ù)組結(jié)構(gòu)以[開始、以]結(jié)束，中間部分由 0 個或多個以英文,分隔的值的列表組成。數(shù)組結(jié)構(gòu)的語法結(jié)構(gòu)如下：
Json 數(shù)組的元素類型可以不一致，如 item1 可以是字符串類型， item2 可以是數(shù)字類型， item3 可以是對象類型。數(shù)組的最后一個元素后面不可以加逗號。
復(fù)雜數(shù)組類型
這里我們創(chuàng)建了一個包含三個對象的數(shù)組。
第一個為 HTML 對象，該對象同時也是一個包含 5 個元素的數(shù)組。第二個為 JavaScript 對象，該對象同時也是一個包含 4 個元素的數(shù)組。第三個為 Server 對象，該對象同時也是一個包含 3 個元素的數(shù)組。
復(fù)雜對象數(shù)組組合
上述兩種（對象、數(shù)組）數(shù)據(jù)結(jié)構(gòu)也可以分別組合構(gòu)成更加復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。
對象包含數(shù)組
這里我們創(chuàng)建了一個復(fù)雜的 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"}
]
在以上實(shí)例中，對象 “employees” 是一個數(shù)組。包含了三個對象。
每個為個對象為員工的記錄（姓和名）。
JSON 語法規(guī)則
- 數(shù)據(jù)為 鍵/值 對。
- 數(shù)據(jù)由逗號分隔。
- 大括號保存對象方括號保存數(shù)組
為了統(tǒng)一解析，JSON的字符串規(guī)定必須用雙引號""，Object的鍵也必須用雙引號""。
Json鍵值對
Json 數(shù)據(jù)的書寫格式是：名稱/值對。就像 JavaScript 對象屬性。一個名稱對應(yīng)一個值，名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值
Json值的數(shù)據(jù)類型
Json值可以是如下幾種類型：
| 類型 | 描述 |
|---|---|
| 數(shù)字型（Number） | Json 數(shù)字類型可以支持整型或者浮點(diǎn)型，但不能使用八進(jìn)制和十六進(jìn)制格式。 Json 數(shù)字類型也不能使用 NaN 和 Infinity。 |
| 字符串型（String） | Json 字符串必須寫在雙引號之間，且只能是雙引號。包裹的 Unicode 字符和反斜杠轉(zhuǎn)義字符。在 Json 中沒有字符型，字符型就是單個字符串。 |
| 布爾型（Boolean） | Json 布爾值的 true 或者 false，只能小寫。使用雙引號引用的值，不是布爾值。 |
| 數(shù)組（Array） | 【 有序的值序列 】 。 |
| 對象（Object） | { 無序的鍵:值對集合。} |
| null | 空。 |
JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本。
文本可以被任何編程語言讀取及作為數(shù)據(jù)格式傳遞。
道格拉斯同學(xué)長期擔(dān)任雅虎的高級架構(gòu)師，自然鐘情于 JavaScript。他設(shè)計的 Json 實(shí)際上是 JavaScript語法的一個子集，是 JavaScript 對象的字符串表示法。Json 是使用文本表示一個 JavaScript 對象的信息，本質(zhì)是一個字符串。
Json使用JavaScript語法
因為 Json 使用的是 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 Json。
這里我們通過 JavaScript，創(chuàng)建了一個對象數(shù)組，并對該對象數(shù)組進(jìn)行了賦值。
訪問內(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 對應(yīng)的 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 對應(yīng)的 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ù)組的下標(biāo)，jsonArr[k] 為 Json數(shù)組下標(biāo) key 對應(yīng)的 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ù)組角標(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 對象保存到數(shù)組 Js_Result 使用 for 循環(huán)遍歷 Json_Result,，i 為數(shù)組角標(biāo)，通過 Js_Result[i].firstName 的方式獲取對應(yīng)的值 。
序列化
把任何JavaScript對象變成JSON，就是把這個對象序列化成一個JSON格式的字符串，這樣才能夠通過網(wǎng)絡(luò)傳遞給其他計算機(jī)。
讓我們先把小明這個對象序列化成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"
]
}
還可以傳入一個函數(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應(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ù)。
拿到一個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)換解析出的屬性：
Json的特性
- Json 易于機(jī)器的解析和生成，客戶端 JavaScript 可以簡單的通過 eval() 進(jìn)行 Json 數(shù)據(jù)的讀取。
- Json 天生具有自我描述性，易于人的閱讀和編寫。
- Json 采用完全獨(dú)立于語言的文本格式。格式都是壓縮的，占用帶寬小。
- Json 解析器和 Json 庫支持許多不同的編程語言， 目前幾乎所有的編程語言都支持 Json。
- 因為 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript基礎(chǔ)知識之方法匯總結(jié)
本文給大家分享了javascript基礎(chǔ)知識，包括數(shù)組的方法，函數(shù)的方法，數(shù)字的方法，對象的方法，字符串的方法，常規(guī)方法，正則表達(dá)式方法，本文介紹的非常詳細(xì)，具有參考價值特此分享供大家參考2016-01-01
項目中需要前端書寫登錄頁面，用戶輸入賬號密碼，本文主要介紹了js前端登錄加密解決方案，具有一定的參考價值，感興趣的可以了解一下2024-02-02
javascript性能優(yōu)化之DOM交互操作實(shí)例分析
這篇文章主要介紹了javascript性能優(yōu)化之DOM交互操作技巧,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對DOM操作過程中的各種常見優(yōu)化操作技巧,需要的朋友可以參考下2015-12-12
JavaScript實(shí)現(xiàn)圖片輪播組件代碼示例
本篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片輪播組件代碼示例，對圖片輪播效果感興趣的小伙伴們可以參考一下。2016-11-11
用過JavaScript的同學(xué)們肯定都對prototype如雷貫耳，但是這究竟是個什么東西卻讓初學(xué)者莫衷一是，只知道函數(shù)都會有一個prototype屬性，可以為其添加函數(shù)供實(shí)例訪問，其它的就不清楚了，最近看了一些 JavaScript高級程序設(shè)計，終于揭開了其神秘面紗2013-08-08
非常不錯的，收藏效果代碼，增加當(dāng)前頁的現(xiàn)實(shí)，實(shí)現(xiàn)對比2008-08-08
JavaScript 十六進(jìn)制RGB色碼轉(zhuǎn)換器
JavaScript 十六進(jìn)制RGB色碼轉(zhuǎn)換器,大家可以學(xué)習(xí)下思路。2009-08-08
異步加載JS文件的實(shí)現(xiàn)函數(shù)代碼。2009-07-07
這篇文章主要介紹了js實(shí)現(xiàn)黑白div塊畫空心的圖形，畫出矩形、三角形、菱形、圓形，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
flatpickr 是一個輕量級、注重精益、由 UX 驅(qū)動和可擴(kuò)展的 JavaScript 日期時間選擇器。這篇文章主要介紹了JavaScript 日期時間選擇器,需要的朋友可以參考下2018-04-04