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

時間 2019-11-08

標籤重溫基礎 16.json json 對象介紹欄目 JavaScript 简体版

原文原文鏈接

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

系列目錄：git

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

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

1.概念

概念有三點：json

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

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

2.語法

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

JSON語法規則：編程語言

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

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

"name" : "pingan"
複製代碼

而JSON的值能夠是：

數字（整數或浮點數）
字符串（在雙引號中）
邏輯值（true 或 false）
數組（在方括號中）
對象（在花括號中）
null

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

2.1 簡單值

簡單值能夠是字符串:

"hello leo!"
複製代碼

也能夠是數字,邏輯值：

1
複製代碼

2.2 對象類型

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

JSON對象必須加雙引號，而 js 對象屬性名能夠不加雙引號。
JSON對象沒有變量聲明，而 js 對象有。
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"]}"
複製代碼

注意：

默認狀況下，JSON.stringify()輸出的JSON字符串不包含任何空格字符或縮進，所以結果就像上面那樣。
序列化JavaScript對象時，全部函數及原型成員都會被忽略，不體如今結果上。
值爲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對象的方式：

過濾器：能夠是個數組，也能夠是個函數。
選項：表示是否在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()第三個參數是個選項，控制結果中的縮進和空白符。

若選項只有一個值，則表示每一個級別縮進的空格數，最大值爲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"}"
複製代碼