【重溫基礎】16.JSON對象介紹

本文是 重溫基礎 系列文章的第十六篇。
今日感覺：靜。

系列目錄：

• 【複習資料】ES6/ES7/ES8/ES9資料整理(我的整理)
• 【重溫基礎】1-14篇
• 【重溫基礎】15.JS對象介紹

本章節複習的是JS中的關於JSON對象相關知識。

前置知識：
JSON是一種按照JavaScript對象語法的數據格式。

1.概念

概念有三點：

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

JSON 使用 JavaScript 語法來描述數據對象，可是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不一樣的編程語言。

2.語法

JSON在使用過程當中可做爲一個對象或者字符串存在，看成爲對象時，用於獲取JSON中的數據，而做爲字符串時經常使用於網絡數據傳輸。

JSON語法規則：

1. 數據在名稱/值對中
2. 數據由逗號分隔
3. 花括號保存對象
4. 方括號保存數組

一般，JSON數據書寫格式是名稱/鍵值：

"name" : "pingan"

而JSON的值能夠是 ：

1. 數字（整數或浮點數）
2. 字符串（在雙引號中）
3. 邏輯值（true 或 false）
4. 數組（在方括號中）
5. 對象（在花括號中）
6. null

JSON經常有三種類型：
三種類型：簡單之，對象和數組。
必須注意：JSON字符串必須是雙引號，單引號會語法錯誤。

2.1 簡單值

簡單值能夠是字符串:

"hello leo!"

也能夠是數字,邏輯值：

1

2.2 對象類型

內容放在花括號內，是多個鍵值對。
JSON對象 與 js 對象的三個區別：

1. JSON對象 必須加雙引號，而 js 對象屬性名能夠不加雙引號。
2. JSON對象 沒有變量聲明，而 js 對象有。
3. JSON對象 沒有分號，而 js 對象有。

// js 對象
var obj = {
    name : "pingan",
    age  : "25",
};
// json 對象
{
    "name" : "pingan",
    "age"  : "25",
    "box"  : [
        "a","b","c"
    ]
}

2.3 數組類型

內容放在方括號內。
JSON數組也沒有分號和變量，經常能夠把JSON數組和對象結合使用，構成更復雜的數據集合。

[
    {
        "name" : "leo",
        "age"  : 25,
        "box"  : ["a","b","c"]
    },
    {
        "name" : "pingan",
        "age"  : 25,
        "box"  : ["a","b","c"]
    }
]

3. 使用

JSON最多見的用法就是，從服務端獲取JSON數據，再將JSON數據轉成JavaScrip對象使用。
JSON對象有兩個方法：

• JSON.stringify()： 序列化操做，將JavaScript對象轉換成JSON字符串。
• JSON.prase()：反序列化操做，將JSON字符串解析成JavaScript值。

3.1 序列化操做

序列化操做經常使用JSON.stringify()。
簡單例子:

let leo =  {
    name : "leo",
    age  : 25,
    box  : ["a","b","c"]
}
let pingan = JSON.stringify(leo);
console.log(pingan); // "{"name":"leo","age":25,"box":["a","b","c"]}"

注意：

1. 默認狀況下，JSON.stringify()輸出的JSON字符串不包含任何空格字符或縮進，所以結果就像上面那樣。
2. 序列化JavaScript對象時，全部函數及原型成員都會被忽略，不體如今結果上。
3. 值爲undefined的任何屬性都會被跳過。

所以，最終的值都是有效的JSON數據類型的實例屬性。

3.2 反序列化操做

序列化操做經常使用JSON.parse()。
簡單例子：

let copyPingan = JSON.parse(pingan);
copyPingan; // {name: "leo", age: 25, box: Array(3)}

若是傳入JSON.parse()的字符串不是有效的JSON，則會拋出錯誤。
注意：
雖然pingan和copyPingan屬性相同，但二者獨立，沒有任何關係。

4.序列化選項

JSON.stringify()除了要傳入序列化對象做爲參數，還能夠接收其餘兩個參數，用來指定序列化JavaScript對象的方式：

1. 過濾器：能夠是個數組，也能夠是個函數。
2. 選項：表示是否在JSON字符串中保留縮進。

單獨或組合使用二者，能夠更加全面深刻的控制JSON的序列化。

4.1 過濾器

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

var leo =  {
    name : "leo",
    age  : 25,
    box  : ["a","b","c"]
}
var pingan = JSON.stringify(leo,["name","age"]);
console.log(pingan); // "{"name":"leo","age":25}"

若過濾器的參數是函數，則狀況就不同了，傳入的函數需有兩個參數（屬性名和屬性值）：

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "box"  : ["a","b","c"]
}
var pingan = JSON.stringify(leo,function(key, value){
    switch(key){
        case "name":
            return "我叫" + value
        case "age":
            return value + "歲"
        default:
            return value
    }
});
console.log(pingan); // "{"name":"我叫leo","age":"25歲","box":["a","b","c"]}"

注意：使用switch的時候，必須指定default不然會返回undefined。

4.2 選項

JSON.stringify()第三個參數是個選項，控制結果中的縮進和空白符。

1. 若選項只有一個值，則表示每一個級別縮進的空格數，最大值爲10，超過10則只會是10。

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "box"  : ["a","b","c"]
}
var pingan = JSON.stringify(leo, null, 4);
console.log(pingan);
/*
"{
    "name": "leo",
    "age": 25,
    "box": [
        "a",
        "b",
        "c"
    ]
}"
*/

5.解析選項

JSON.parse()能夠接收一個函數做爲參數，對每一個鍵值對調用，爲了跟JSON.stringify()的過濾函數區別，這個函數成爲還原函數。

• 若還原函數返回undefined，則表示要從結果中刪除對應的鍵。
• 若還原函數返回其餘值，則將該值插入結果中。

還原函數接收兩個參數：屬性名和屬性值。

舉例，在日期字符串轉換爲Date對象中，常常要用到還原函數：

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "date" : new Date(1993, 9, 9)
}
var pingan = JSON.stringify(leo);
var copy = JSON.parse(pingan,function (key, value){
    // return key == "date" ? new Date(value) : value;
    if(key == "date"){
        return new Date(value);
    }else{
        return value; 
    }
})
console.log(copy);
// "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"}"

參考文章：

1. W3school JSON教程
2. 《JavaScrip高級程序設計》

本部份內容到這結束

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	https://github.com/pingan8787...
JS小冊	js.pingan8787.com

歡迎關注微信公衆號【前端自習課】天天早晨，與您一塊兒學習一篇優秀的前端技術博文 .