整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
JSON是一種按照JavaScript對象語法的數據格式。
概念有三點：
JSON全稱JavaScript 對象表示法（JavaScript Object Notation）。
JSON 是存儲和交換文本信息的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
———— 摘自 W3school JSON教程
JSON 使用 JavaScript 語法來描述數據對象，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。
JSON在使用過程中可作為一個對象或者字符串存在，當作為對象時，用于獲取JSON中的數據，而作為字符串時常用于網絡數據傳輸。
JSON語法規則：
通常，JSON數據書寫格式是名稱/鍵值：
"name" : "pingan"
而JSON的值可以是 ：
JSON常常有三種類型：
三種類型：簡單之，對象和數組。
必須注意：JSON字符串必須是雙引號，單引號會語法錯誤。
2.1 簡單值
簡單值可以是字符串:
"hello leo!"
也可以是數字,邏輯值：
1
2.2 對象類型
內容放在花括號內，是多個鍵值對。
JSON對象 與 js 對象的三個區別：
2.3 數組類型
內容放在方括號內。
JSON數組也沒有分號和變量，常常可以把JSON數組和對象結合使用，構成更復雜的數據集合。
JSON最常見的用法就是，從服務端獲取JSON數據，再將JSON數據轉成JavaScrip對象使用。
JSON對象有兩個方法：
3.1 序列化操作
序列化操作常常使用JSON.stringify()。
簡單例子:
注意：
因此，最終的值都是有效的JSON數據類型的實例屬性。
3.2 反序列化操作
序列化操作常常使用JSON.parse()。
簡單例子：
如果傳入JSON.parse()的字符串不是有效的JSON，則會拋出錯誤。
注意：
雖然pingan和copyPingan屬性相同，但兩者獨立，沒有任何關系。
JSON.stringify()除了要傳入序列化對象作為參數，還可以接收其他兩個參數，用來指定序列化JavaScript對象的方式：
單獨或組合使用兩者，可以更加全面深入的控制JSON的序列化。
4.1 過濾器
若過濾器的參數是數組，則JSON.stringify()返回的結果將只包含數組中的屬性：
若過濾器的參數是函數，則情況就不一樣了，傳入的函數需有兩個參數（屬性名和屬性值）：
注意：使用switch的時候，必須指定default否則會返回undefined。
4.2 選項
JSON.stringify()第三個參數是個選項，控制結果中的縮進和空白符。
JSON.parse()可以接收一個函數作為參數，對每個鍵值對調用，為了跟JSON.stringify()的過濾函數區別，這個函數成為還原函數。
還原函數接收兩個參數：屬性名和屬性值。
舉例，在日期字符串轉換為Date對象中，經常要用到還原函數：
公眾號：前端自習課
「JavaScript 從入門到精通」1.語法和數據類型
「JavaScript 從入門到精通」2.流程控制和錯誤處理
「JavaScript 從入門到精通」3.循環和迭代
「JavaScript 從入門到精通」4.函數
「JavaScript 從入門到精通」5.表達式和運算符
「JavaScript 從入門到精通」6.數字
「JavaScript 從入門到精通」7.時間對象
「JavaScript 從入門到精通」8.字符串
「JavaScript 從入門到精通」9.正則表達式
「JavaScript 從入門到精通」10.數組
「JavaScript 從入門到精通」11.Map和Set對象
「JavaScript 從入門到精通」12.使用對象
「JavaScript 從入門到精通」13.迭代器和生成器
「JavaScript 從入門到精通」14.元編程
「JavaScript 從入門到精通」15.JS對象介紹
JavaScript中，你可以使用in運算符或hasOwnProperty()方法來檢查一個JSON對象是否包含某個屬性（字段）。如果對象包含該字段，你可以直接使用點符號（.）或方括號（[]）表示法來讀取它的值。
以下是使用in運算符和hasOwnProperty()方法檢查對象屬性并讀取其值的示例程序：
// 假設我們有一個JSON對象
var jsonObject = {
"name": "Alice",
"age": 30,
"city": "New York"
};
// 要檢查的字段名
var fieldName = "age";
// 使用 'in' 運算符檢查字段是否存在
if (fieldName in jsonObject) {
console.log("字段 '" + fieldName + "' 存在，其值為：" + jsonObject[fieldName]);
} else {
console.log("字段 '" + fieldName + "' 不存在");
}
// 或者使用 'hasOwnProperty()' 方法檢查字段是否存在
if (jsonObject.hasOwnProperty(fieldName)) {
console.log("字段 '" + fieldName + "' 存在，其值為：" + jsonObject.age);
// 或者使用動態屬性訪問方式
console.log("字段 '" + fieldName + "' 存在，其值為：" + jsonObject[fieldName]);
} else {
console.log("字段 '" + fieldName + "' 不存在");
}
// 如果要讀取的字段名是動態的，則必須使用方括號表示法
var dynamicFieldName = "city";
if (dynamicFieldName in jsonObject) {
console.log("動態字段 '" + dynamicFieldName + "' 存在，其值為：" + jsonObject[dynamicFieldName]);
}在這個示例中，我們首先定義了一個名為jsonObject的JSON對象，然后定義了一個要檢查的字段名fieldName。我們使用in運算符和hasOwnProperty()方法來檢查該字段是否存在于對象中。如果存在，我們就使用點符號（在字段名已知且不是動態的情況下）或方括號表示法（在字段名是動態的情況下）來讀取它的值。
請注意，雖然在這個例子中我們使用了術語“JSON對象”，但實際上jsonObject是一個普通的JavaScript對象。在JavaScript中，JSON（JavaScript Object Notation）通常用于表示數據的序列化格式，即字符串形式的對象表示。但是，一旦JSON字符串被解析成JavaScript對象（例如，通過JSON.parse()方法），你就可以像處理任何其他JavaScript對象一樣處理它。
SON對象是什么？
JSON代表JavaScript對象表示法，是一種基于JavaScript對象語法的結構化數據的標準文本格式。JSON僅定義了兩種數據結構：對象和數組。JSON對象是由花括號括起來的鍵/值對組成的數據類型。JSON數組是值的列表。當數據從服務器發送到網頁或在文件或數據庫中存儲數據時，通常會使用JSON對象。JSON與JavaScript對象文字語法非常相似，但可以獨立于JavaScript使用。許多編程環境支持讀取和生成JSON。
JSON對象的特點
JSON提供了幾個優點，使其成為表示結構化數據的熱門選擇：
JSON對象示例
基本JSON對象：{"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null} |
嵌套JSON對象：這是一種由名稱/值對列表組成的數據類型，其中一個或多個值是另一個JSON對象。{"person": {"name": "Natalie", "age": 21}, "address": {"street": "123 XYZ Street", "City": "New York", "State" : "NY", "zip": "10001"}} |
JSON對象數組：[ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ] |
解析JSON對象
解析是將JSON對象轉換為本機JavaScript對象的方法。
JSON.parse()方法：JSON.parse()方法解析字符串并返回一個JavaScript對象。字符串必須是JSON格式。
語法：JSON.parse(string, function)
參數 | 必需/可選 | 描述 |
字符串 | 必需 | 以JSON格式編寫的字符串 |
Reviver函數 | 可選 | 一個接受鍵和值作為參數并返回修改后的值或undefined以刪除屬性的函數。對每個項目調用該函數。任何嵌套對象在父對象之前轉換。 |
示例
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對象轉換為字符串。在將數據發送到Web服務器時，數據必須是字符串。JSON.stringify()也適用于數組。
語法：JSON.stringify(obj, replacer, space)
參數 | 必需/可選 | 描述 |
Obj | 必需 | 要轉換為字符串的值 |
Replacer | 可選 | 用于轉換結果的函數或數組。對每個項目調用replacer。 |
Space | 可選 | 用作空格的字符串（最多10個字符）或數字，從0到10，表示要用作空格的空格字符數。 |
示例
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}
/*為每個空格插入單詞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對象導航
可以使用點（.）或方括號（[]）表示法導航到其屬性并訪問它們的值。
// 使用點表示法訪問名稱
var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};
console.log(obj.name); 輸出：Natalie// 使用點表示法訪問城市
console.log(obj["city"]; 輸出：New Yorkvar obj_array = [ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ]// 使用點和方括號表示法訪問第一個成員的名稱
console.log(obj_array[0].name); 輸出：Natalie// 使用點和方括號表示法訪問第二個成員的年齡
console.log(obj_array[1][ "age"]); 輸出：37Object.keys()方法
keys()方法返回給定對象的自身可枚舉字符串鍵屬性的數組。作為靜態方法的keys()方法使用Object類名調用。
語法：Object.keys(obj)
參數 | 必需/可選 | 描述 |
obj | 必需 | 要返回其可枚舉屬性的對象 |
Object.values()方法
values()方法返回給定對象的自身可枚舉字符串鍵屬性值的數組。作為靜態方法的values()方法使用Object類名調用。
語法：Object.values(obj)
參數 | 必需/可選 | 描述 |
obj | 必需 | 要返回其可枚舉屬性的對象 |
Object.entries()方法
該方法返回對象的可枚舉屬性的鍵值對數組。作為靜態方法的entries()方法使用Object類名調用。
語法：Object.entries(obj)
參數 | 必需/可選 | 描述 |
obj | 必需 | 要返回其可枚舉屬性的對象 |
示例
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循環
for循環重復執行，直到指定的條件評估為false。
語法：for (初始化; 條件; 表達式) {要執行的代碼塊}
參數 | 必需/可選 | 描述 |
初始化 | 必需 | 在執行代碼塊之前執行一次 |
條件 | 必需 | 執行代碼塊的條件 |
表達式 | 必需 | 在執行代碼塊后每次執行 |
示例
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"]); //使用方括號表示法
console.log("Married Status: " + obj[i].married); //使用點表示法
}輸出
輸出
Name: Natalie
Married Status: true
Name: David
Married Status: false
Name: Mark
Married Status: truefor…in循環
for...in語句遍歷對象的所有可枚舉字符串非符號屬性，包括繼承的可枚舉屬性。循環內部的代碼塊對每個屬性執行一次。
語法：for (item in object) {要執行的代碼塊}
參數 | 必需/可選 | 描述 |
item | 必需 | 用于迭代屬性的變量 |
object | 必需 | 要迭代的對象 |
示例
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"]); //使用方括號表示法
console.log("Married Status: " + obj[item].married); //使用點表示法
}輸出
Name: Natalie
Married Status: true
Name: David
Married Status: false
Name: Mark
Married Status: truefor…of循環
for..of循環按順序操作來自可迭代對象的值。
語法：array.forEach(iterable object) {statement}
參數 | 必需/可選 | 描述 |
Variable | 必需 | 對于每次迭代，下一個屬性的值被賦給變量。變量可以使用const、let或var聲明。 |
Iterable object | 必需 | 循環操作的值來源。 |
Name: Natalie
Married Status: true
Name: David
Married Status: false
Name: Mark
Married Status: true
## `forEach()`**方法**
`forEach()`方法對數組中的每個元素調用一個函數。它必須至少接受一個參數，該參數表示數組的元素。
*語法:*`array.forEach(function(currentValue, index, array), thisValue)`
| | | |
| --- | --- | --- |
| **參數** | **必需/可選** | **描述** |
| Function | 必需 | 用于對數組每個元素運行的函數 |
| currentvalue | 必需 | 當前元素的值 |
| index | 可選 | 當前元素的索引 |
| Array | 可選 | 當前元素的數組 |
| Thisvalue | 可選 | 作為this值傳遞給函數的值。默認為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
年齡: 43JSON通常用于在服務器和Web應用程序之間傳輸數據。JSON的靈活性、易解析性和簡單性使軟件開發人員能夠在各種編程環境中高效地處理結構化數據。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
