「JavaScript 從入門到精通」16.JSON對(duì)象介紹

置知識(shí)：

JSON是一種按照J(rèn)avaScript對(duì)象語法的數(shù)據(jù)格式。

1.概念

概念有三點(diǎn)：

JSON全稱JavaScript 對(duì)象表示法（JavaScript Object Notation）。
JSON 是存儲(chǔ)和交換文本信息的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
———— 摘自 W3school JSON教程

JSON 使用 JavaScript 語法來描述數(shù)據(jù)對(duì)象，但是 JSON 仍然獨(dú)立于語言和平臺(tái)。JSON 解析器和 JSON 庫支持許多不同的編程語言。

2.語法

JSON在使用過程中可作為一個(gè)對(duì)象或者字符串存在，當(dāng)作為對(duì)象時(shí)，用于獲取JSON中的數(shù)據(jù)，而作為字符串時(shí)常用于網(wǎng)絡(luò)數(shù)據(jù)傳輸。

JSON語法規(guī)則：

數(shù)據(jù)在名稱/值對(duì)中
數(shù)據(jù)由逗號(hào)分隔
花括號(hào)保存對(duì)象
方括號(hào)保存數(shù)組

通常，JSON數(shù)據(jù)書寫格式是名稱/鍵值：

"name" : "pingan"

而JSON的值可以是：

數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
字符串（在雙引號(hào)中）
邏輯值（true 或 false）
數(shù)組（在方括號(hào)中）
對(duì)象（在花括號(hào)中）
null

JSON常常有三種類型：

三種類型：簡(jiǎn)單之，對(duì)象和數(shù)組。

必須注意：JSON字符串必須是雙引號(hào)，單引號(hào)會(huì)語法錯(cuò)誤。

2.1 簡(jiǎn)單值

簡(jiǎn)單值可以是字符串:

"hello leo!"

也可以是數(shù)字,邏輯值：

2.2 對(duì)象類型

內(nèi)容放在花括號(hào)內(nèi)，是多個(gè)鍵值對(duì)。

JSON對(duì)象與 js 對(duì)象的三個(gè)區(qū)別：

JSON對(duì)象必須加雙引號(hào)，而 js 對(duì)象屬性名可以不加雙引號(hào)。
JSON對(duì)象沒有變量聲明，而 js 對(duì)象有。
JSON對(duì)象沒有分號(hào)，而 js 對(duì)象有。

2.3 數(shù)組類型

內(nèi)容放在方括號(hào)內(nèi)。

JSON數(shù)組也沒有分號(hào)和變量，常常可以把JSON數(shù)組和對(duì)象結(jié)合使用，構(gòu)成更復(fù)雜的數(shù)據(jù)集合。

3. 使用

JSON最常見的用法就是，從服務(wù)端獲取JSON數(shù)據(jù)，再將JSON數(shù)據(jù)轉(zhuǎn)成JavaScrip對(duì)象使用。

JSON對(duì)象有兩個(gè)方法：

JSON.stringify()：序列化操作，將JavaScript對(duì)象轉(zhuǎn)換成JSON字符串。
JSON.prase()：反序列化操作，將JSON字符串解析成JavaScript值。

3.1 序列化操作

序列化操作常常使用JSON.stringify()。

簡(jiǎn)單例子:

注意：

默認(rèn)情況下，JSON.stringify()輸出的JSON字符串不包含任何空格字符或縮進(jìn)，因此結(jié)果就像上面那樣。
序列化JavaScript對(duì)象時(shí)，所有函數(shù)及原型成員都會(huì)被忽略，不體現(xiàn)在結(jié)果上。
值為undefined的任何屬性都會(huì)被跳過。

因此，最終的值都是有效的JSON數(shù)據(jù)類型的實(shí)例屬性。

3.2 反序列化操作

序列化操作常常使用JSON.parse()。

簡(jiǎn)單例子：

如果傳入JSON.parse()的字符串不是有效的JSON，則會(huì)拋出錯(cuò)誤。

注意：

雖然pingan和copyPingan屬性相同，但兩者獨(dú)立，沒有任何關(guān)系。

4.序列化選項(xiàng)

JSON.stringify()除了要傳入序列化對(duì)象作為參數(shù)，還可以接收其他兩個(gè)參數(shù)，用來指定序列化JavaScript對(duì)象的方式：

過濾器：可以是個(gè)數(shù)組，也可以是個(gè)函數(shù)。
選項(xiàng)：表示是否在JSON字符串中保留縮進(jìn)。

單獨(dú)或組合使用兩者，可以更加全面深入的控制JSON的序列化。

4.1 過濾器

若過濾器的參數(shù)是數(shù)組，則JSON.stringify()返回的結(jié)果將只包含數(shù)組中的屬性：

若過濾器的參數(shù)是函數(shù)，則情況就不一樣了，傳入的函數(shù)需有兩個(gè)參數(shù)（屬性名和屬性值）：

注意：使用switch的時(shí)候，必須指定default否則會(huì)返回undefined。

4.2 選項(xiàng)

JSON.stringify()第三個(gè)參數(shù)是個(gè)選項(xiàng)，控制結(jié)果中的縮進(jìn)和空白符。

若選項(xiàng)只有一個(gè)值，則表示每個(gè)級(jí)別縮進(jìn)的空格數(shù)，最大值為10，超過10則只會(huì)是10。

5.解析選項(xiàng)

JSON.parse()可以接收一個(gè)函數(shù)作為參數(shù)，對(duì)每個(gè)鍵值對(duì)調(diào)用，為了跟JSON.stringify()的過濾函數(shù)區(qū)別，這個(gè)函數(shù)成為還原函數(shù)。

若還原函數(shù)返回undefined，則表示要從結(jié)果中刪除對(duì)應(yīng)的鍵。
若還原函數(shù)返回其他值，則將該值插入結(jié)果中。

還原函數(shù)接收兩個(gè)參數(shù)：屬性名和屬性值。

舉例，在日期字符串轉(zhuǎn)換為Date對(duì)象中，經(jīng)常要用到還原函數(shù)：

公眾號(hào)：前端自習(xí)課

往期回顧

「JavaScript 從入門到精通」1.語法和數(shù)據(jù)類型

「JavaScript 從入門到精通」2.流程控制和錯(cuò)誤處理

「JavaScript 從入門到精通」3.循環(huán)和迭代

「JavaScript 從入門到精通」4.函數(shù)

「JavaScript 從入門到精通」5.表達(dá)式和運(yùn)算符

「JavaScript 從入門到精通」6.數(shù)字

「JavaScript 從入門到精通」7.時(shí)間對(duì)象

「JavaScript 從入門到精通」8.字符串

「JavaScript 從入門到精通」9.正則表達(dá)式

「JavaScript 從入門到精通」10.數(shù)組

「JavaScript 從入門到精通」11.Map和Set對(duì)象

「JavaScript 從入門到精通」12.使用對(duì)象

「JavaScript 從入門到精通」13.迭代器和生成器

「JavaScript 從入門到精通」14.元編程

「JavaScript 從入門到精通」15.JS對(duì)象介紹

JavaScript中，你可以使用in運(yùn)算符或hasOwnProperty()方法來檢查一個(gè)JSON對(duì)象是否包含某個(gè)屬性（字段）。如果對(duì)象包含該字段，你可以直接使用點(diǎn)符號(hào)（.）或方括號(hào)（[]）表示法來讀取它的值。

以下是使用in運(yùn)算符和hasOwnProperty()方法檢查對(duì)象屬性并讀取其值的示例程序：

// 假設(shè)我們有一個(gè)JSON對(duì)象  
var jsonObject = {  
    "name": "Alice",  
    "age": 30,  
    "city": "New York"  
};  
  
// 要檢查的字段名  
var fieldName = "age";  
  
// 使用 'in' 運(yùn)算符檢查字段是否存在  
if (fieldName in jsonObject) {  
    console.log("字段 '" + fieldName + "' 存在，其值為：" + jsonObject[fieldName]);  
} else {  
    console.log("字段 '" + fieldName + "' 不存在");  
}  
  
// 或者使用 'hasOwnProperty()' 方法檢查字段是否存在  
if (jsonObject.hasOwnProperty(fieldName)) {  
    console.log("字段 '" + fieldName + "' 存在，其值為：" + jsonObject.age);  
    // 或者使用動(dòng)態(tài)屬性訪問方式  
    console.log("字段 '" + fieldName + "' 存在，其值為：" + jsonObject[fieldName]);  
} else {  
    console.log("字段 '" + fieldName + "' 不存在");  
}  
  
// 如果要讀取的字段名是動(dòng)態(tài)的，則必須使用方括號(hào)表示法  
var dynamicFieldName = "city";  
if (dynamicFieldName in jsonObject) {  
    console.log("動(dòng)態(tài)字段 '" + dynamicFieldName + "' 存在，其值為：" + jsonObject[dynamicFieldName]);  
}

在這個(gè)示例中，我們首先定義了一個(gè)名為jsonObject的JSON對(duì)象，然后定義了一個(gè)要檢查的字段名fieldName。我們使用in運(yùn)算符和hasOwnProperty()方法來檢查該字段是否存在于對(duì)象中。如果存在，我們就使用點(diǎn)符號(hào)（在字段名已知且不是動(dòng)態(tài)的情況下）或方括號(hào)表示法（在字段名是動(dòng)態(tài)的情況下）來讀取它的值。

請(qǐng)注意，雖然在這個(gè)例子中我們使用了術(shù)語“JSON對(duì)象”，但實(shí)際上jsonObject是一個(gè)普通的JavaScript對(duì)象。在JavaScript中，JSON（JavaScript Object Notation）通常用于表示數(shù)據(jù)的序列化格式，即字符串形式的對(duì)象表示。但是，一旦JSON字符串被解析成JavaScript對(duì)象（例如，通過JSON.parse()方法），你就可以像處理任何其他JavaScript對(duì)象一樣處理它。

SON對(duì)象是什么？

JSON代表JavaScript對(duì)象表示法，是一種基于JavaScript對(duì)象語法的結(jié)構(gòu)化數(shù)據(jù)的標(biāo)準(zhǔn)文本格式。JSON僅定義了兩種數(shù)據(jù)結(jié)構(gòu)：對(duì)象和數(shù)組。JSON對(duì)象是由花括號(hào)括起來的鍵/值對(duì)組成的數(shù)據(jù)類型。JSON數(shù)組是值的列表。當(dāng)數(shù)據(jù)從服務(wù)器發(fā)送到網(wǎng)頁或在文件或數(shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)時(shí)，通常會(huì)使用JSON對(duì)象。JSON與JavaScript對(duì)象文字語法非常相似，但可以獨(dú)立于JavaScript使用。許多編程環(huán)境支持讀取和生成JSON。

JSON對(duì)象的特點(diǎn)

它們以逗號(hào)分隔的鍵/值對(duì)形式編寫。鍵是用雙引號(hào)括起來的字符串，值必須是以下JSON數(shù)據(jù)類型字符串?dāng)?shù)字對(duì)象數(shù)組布爾值空值
它們由花括號(hào){}括起來。花括號(hào)也可以用于在對(duì)象內(nèi)部嵌套對(duì)象，從而創(chuàng)建分層結(jié)構(gòu)。
數(shù)組用方括號(hào)[]括起來，它們的值用逗號(hào)(,)分隔。數(shù)組中的每個(gè)值可以是不同的類型，包括另一個(gè)數(shù)組或?qū)ο蟆?/span>
它們區(qū)分大小寫，這意味著鍵和值在拼寫和大小寫上必須完全匹配。
它們不允許尾隨逗號(hào)。簡(jiǎn)單來說，花括號(hào)外部或雙引號(hào)內(nèi)部不應(yīng)該有任何不屬于鍵/值對(duì)的文本。
它們不允許注釋。

JSON提供了幾個(gè)優(yōu)點(diǎn)，使其成為表示結(jié)構(gòu)化數(shù)據(jù)的熱門選擇：

簡(jiǎn)單易讀：JSON簡(jiǎn)單直觀，易于理解。與XML等更冗長(zhǎng)的格式不同，JSON相對(duì)容易閱讀。其簡(jiǎn)潔的語法允許高效的數(shù)據(jù)表示。
解析簡(jiǎn)便：JSON的解析比XML更簡(jiǎn)單快速。
靈活性：JSON支持各種數(shù)據(jù)類型和對(duì)象層次結(jié)構(gòu)，并且關(guān)系可以在傳輸過程中保持并在接收端適當(dāng)?shù)刂匦陆M裝。
廣泛應(yīng)用：大多數(shù)現(xiàn)代API接受JSON請(qǐng)求并發(fā)出JSON響應(yīng)，使其成為系統(tǒng)之間數(shù)據(jù)交換的通用格式。

JSON對(duì)象示例

基本JSON對(duì)象：{"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null}

嵌套JSON對(duì)象：這是一種由名稱/值對(duì)列表組成的數(shù)據(jù)類型，其中一個(gè)或多個(gè)值是另一個(gè)JSON對(duì)象。{"person": {"name": "Natalie", "age": 21}, "address": {"street": "123 XYZ Street", "City": "New York", "State" : "NY", "zip": "10001"}}

JSON對(duì)象數(shù)組：[ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ]

解析JSON對(duì)象

解析是將JSON對(duì)象轉(zhuǎn)換為本機(jī)JavaScript對(duì)象的方法。

JSON.parse()方法：JSON.parse()方法解析字符串并返回一個(gè)JavaScript對(duì)象。字符串必須是JSON格式。

語法：JSON.parse(string, function)

參數(shù)	必需/可選	描述
字符串	必需	以JSON格式編寫的字符串
Reviver函數(shù)	可選	一個(gè)接受鍵和值作為參數(shù)并返回修改后的值或undefined以刪除屬性的函數(shù)。對(duì)每個(gè)項(xiàng)目調(diào)用該函數(shù)。任何嵌套對(duì)象在父對(duì)象之前轉(zhuǎn)換。

示例

var text = '{"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null}';
var obj = JSON.parse(text, function (key, value) {
     if (key === "name") {
       return value.toUpperCase();
     } else {
       return value;
     }
});
console.log(obj);

輸出

{
     name: 'NATALIE',
     married: false,
     age: 21,
     city: 'New York',
     zip: '10001',
     awards: null
}

JSON.stringify()方法

該方法將JavaScript對(duì)象轉(zhuǎn)換為字符串。在將數(shù)據(jù)發(fā)送到Web服務(wù)器時(shí)，數(shù)據(jù)必須是字符串。JSON.stringify()也適用于數(shù)組。

語法：JSON.stringify(obj, replacer, space)

參數(shù)	必需/可選	描述
Obj	必需	要轉(zhuǎn)換為字符串的值
Replacer	可選	用于轉(zhuǎn)換結(jié)果的函數(shù)或數(shù)組。對(duì)每個(gè)項(xiàng)目調(diào)用replacer。
Space	可選	用作空格的字符串（最多10個(gè)字符）或數(shù)字，從0到10，表示要用作空格的空格字符數(shù)。

示例

var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};
var text = JSON.stringify(obj, function (key, value) {
     if (key === "name") {
       return value.toUpperCase();
     } else {
       return value;
     }
});
console.log(text);

輸出

{"name":"NATALIE","married":false,"age":21,"city":"New York","zip":"10001","awards":null}

/*為每個(gè)空格插入單詞SPACE：*/
var newText = JSON.stringify(obj, null, "space");
console.log(“Text with the word space “+ newText);

輸出

Text with the word space {
space"name": "Natalie",
space"married": false,
space"age": 21,
space"city": "New York",
space"zip": "10001",
space"awards": null
}

JSON對(duì)象導(dǎo)航

可以使用點(diǎn)（.）或方括號(hào)（[]）表示法導(dǎo)航到其屬性并訪問它們的值。

// 使用點(diǎn)表示法訪問名稱
var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};
console.log(obj.name);                      輸出：Natalie

// 使用點(diǎn)表示法訪問城市
console.log(obj["city"];                      輸出：New York

var obj_array = [ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ]

// 使用點(diǎn)和方括號(hào)表示法訪問第一個(gè)成員的名稱
console.log(obj_array[0].name);       輸出：Natalie

// 使用點(diǎn)和方括號(hào)表示法訪問第二個(gè)成員的年齡
console.log(obj_array[1][ "age"]);     輸出：37

Object.keys()方法

keys()方法返回給定對(duì)象的自身可枚舉字符串鍵屬性的數(shù)組。作為靜態(tài)方法的keys()方法使用Object類名調(diào)用。

語法：Object.keys(obj)

參數(shù)	必需/可選	描述
obj	必需	要返回其可枚舉屬性的對(duì)象

Object.values()方法

values()方法返回給定對(duì)象的自身可枚舉字符串鍵屬性值的數(shù)組。作為靜態(tài)方法的values()方法使用Object類名調(diào)用。

語法：Object.values(obj)

參數(shù)	必需/可選	描述
obj	必需	要返回其可枚舉屬性的對(duì)象

Object.entries()方法

該方法返回對(duì)象的可枚舉屬性的鍵值對(duì)數(shù)組。作為靜態(tài)方法的entries()方法使用Object類名調(diào)用。

語法：Object.entries(obj)

參數(shù)	必需/可選	描述
obj	必需	要返回其可枚舉屬性的對(duì)象

示例

var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};
var keys = Object.keys(obj);
var values = Object.values(obj);
var entries = Object.entries(obj);
console.log("Array of keys :");
console.log(keys);
console.log("Array of values :");
console.log(values);
console.log("Array of entries :");
console.log(entries);

輸出

Array of keys :
[ 'name', 'married', 'age', 'city', 'zip', 'awards' ]
Array of values :
[ 'Natalie', false, 21, 'New York', '10001', null ]
Array of entries :
[
     [ 'name', 'Natalie' ],
     [ 'married', false ],
     [ 'age', 21 ],
     [ 'city', 'New York' ],
     [ 'zip', '10001' ],
     [ 'awards', null ]
]

for循環(huán)

for循環(huán)重復(fù)執(zhí)行，直到指定的條件評(píng)估為false。

語法：for (初始化; 條件; 表達(dá)式) {要執(zhí)行的代碼塊}

參數(shù)	必需/可選	描述
初始化	必需	在執(zhí)行代碼塊之前執(zhí)行一次
條件	必需	執(zhí)行代碼塊的條件
表達(dá)式	必需	在執(zhí)行代碼塊后每次執(zhí)行

示例

var obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];
for(var i=0; i<obj.length; i++) {
           console.log("Name:  " + obj[i]["name"]); //使用方括號(hào)表示法
           console.log("Married Status:     " + obj[i].married); //使用點(diǎn)表示法
}

輸出

輸出
Name:     Natalie
Married Status:  true
Name:     David
Married Status:  false
Name:     Mark
Married Status:  true

for…in循環(huán)

for...in語句遍歷對(duì)象的所有可枚舉字符串非符號(hào)屬性，包括繼承的可枚舉屬性。循環(huán)內(nèi)部的代碼塊對(duì)每個(gè)屬性執(zhí)行一次。

語法：for (item in object) {要執(zhí)行的代碼塊}

參數(shù)	必需/可選	描述
item	必需	用于迭代屬性的變量
object	必需	要迭代的對(duì)象

示例

var obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];
for(item in obj) {
           console.log("Name:  " + obj[item]["name"]); //使用方括號(hào)表示法
           console.log("Married Status:     " + obj[item].married); //使用點(diǎn)表示法
}

輸出

Name:     Natalie
Married Status:  true
Name:     David
Married Status:  false
Name:     Mark
Married Status:  true

for…of循環(huán)

for..of循環(huán)按順序操作來自可迭代對(duì)象的值。

語法：array.forEach(iterable object) {statement}

參數(shù)	必需/可選	描述
Variable	必需	對(duì)于每次迭代，下一個(gè)屬性的值被賦給變量。變量可以使用const、let或var聲明。
Iterable object	必需	循環(huán)操作的值來源。

Name: Natalie
Married Status: true
Name: David
Married Status: false
Name: Mark
Married Status: true

## `forEach()`**方法** 

`forEach()`方法對(duì)數(shù)組中的每個(gè)元素調(diào)用一個(gè)函數(shù)。它必須至少接受一個(gè)參數(shù)，該參數(shù)表示數(shù)組的元素。

*語法:*`array.forEach(function(currentValue, index, array), thisValue)`

|  |  |  |
| --- | --- | --- |
| **參數(shù)**  | **必需/可選**  | **描述**  |
| Function  | 必需 | 用于對(duì)數(shù)組每個(gè)元素運(yùn)行的函數(shù) |
| currentvalue | 必需 | 當(dāng)前元素的值 |
| index | 可選 | 當(dāng)前元素的索引 |
| Array | 可選 | 當(dāng)前元素的數(shù)組 |
| Thisvalue | 可選 | 作為this值傳遞給函數(shù)的值。默認(rèn)為undefined。 |

### 示例

```json
var obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];
obj.forEach((item, index, arr) => {
       console.log("元素詳情:     " +index);
       console.log("姓名:      "+arr[index]["name"]);
       console.log("年齡:      "+item.age);
});

輸出

元素詳情:  0
姓名:      Natalie
年齡:      21
元素詳情:  1
姓名:      David
年齡:      37
元素詳情:  2
姓名:      Mark
年齡:      43

結(jié)論

JSON通常用于在服務(wù)器和Web應(yīng)用程序之間傳輸數(shù)據(jù)。JSON的靈活性、易解析性和簡(jiǎn)單性使軟件開發(fā)人員能夠在各種編程環(huán)境中高效地處理結(jié)構(gòu)化數(shù)據(jù)。

在線咨詢

上一篇：HTML <code> 標(biāo)簽
下一篇：萬能的HTML5，這次我們用javascript畫流動(dòng)的瀑布

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商