摘要：系列目錄復(fù)習(xí)資料資料整理個(gè)人整理重溫基礎(chǔ)篇重溫基礎(chǔ)對(duì)象介紹本章節(jié)復(fù)習(xí)的是中的關(guān)于對(duì)象相關(guān)知識(shí)。概念概念有三點(diǎn)全稱(chēng)對(duì)象表示法。對(duì)象沒(méi)有分號(hào)，而對(duì)象有。序列化對(duì)象時(shí)，所有函數(shù)及原型成員都會(huì)被忽略，不體現(xiàn)在結(jié)果上。

本文是 重溫基礎(chǔ) 系列文章的第十六篇。
今日感受：靜。

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理)

【重溫基礎(chǔ)】1-14篇

【重溫基礎(chǔ)】15.JS對(duì)象介紹

本章節(jié)復(fù)習(xí)的是JS中的關(guān)于JSON對(duì)象相關(guān)知識(shí)。

前置知識(shí)：
JSON是一種按照JavaScript對(duì)象語(yǔ)法的數(shù)據(jù)格式。

概念有三點(diǎn)：

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

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

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

JSON語(yǔ)法規(guī)則：

數(shù)據(jù)在名稱(chēng)/值對(duì)中

數(shù)據(jù)由逗號(hào)分隔

花括號(hào)保存對(duì)象

方括號(hào)保存數(shù)組

通常，JSON數(shù)據(jù)書(shū)寫(xiě)格式是名稱(chēng)/鍵值：

"name" : "pingan"

而JSON的值可以是 ：

數(shù)字（整數(shù)或浮點(diǎn)數(shù)）

字符串（在雙引號(hào)中）

邏輯值（true 或 false）

數(shù)組（在方括號(hào)中）

對(duì)象（在花括號(hào)中）

null

JSON常常有三種類(lèi)型：
三種類(lèi)型：簡(jiǎn)單之，對(duì)象和數(shù)組。
必須注意：JSON字符串必須是雙引號(hào)，單引號(hào)會(huì)語(yǔ)法錯(cuò)誤。

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

"hello leo!"

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

1

內(nèi)容放在花括號(hào)內(nèi)，是多個(gè)鍵值對(duì)。
JSON對(duì)象 與 js 對(duì)象的三個(gè)區(qū)別：

JSON對(duì)象 必須加雙引號(hào)，而 js 對(duì)象屬性名可以不加雙引號(hào)。

JSON對(duì)象 沒(méi)有變量聲明，而 js 對(duì)象有。

JSON對(duì)象 沒(méi)有分號(hào)，而 js 對(duì)象有。

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

內(nèi)容放在方括號(hào)內(nèi)。
JSON數(shù)組也沒(méi)有分號(hào)和變量，常?？梢园袹SON數(shù)組和對(duì)象結(jié)合使用，構(gòu)成更復(fù)雜的數(shù)據(jù)集合。

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

JSON最常見(jiàn)的用法就是，從服務(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值。

序列化操作常常使用JSON.stringify()。
簡(jiǎn)單例子:

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"]}"

注意：

默認(rèn)情況下，JSON.stringify()輸出的JSON字符串不包含任何空格字符或縮進(jìn)，因此結(jié)果就像上面那樣。

序列化JavaScript對(duì)象時(shí)，所有函數(shù)及原型成員都會(huì)被忽略，不體現(xiàn)在結(jié)果上。

值為undefined的任何屬性都會(huì)被跳過(guò)。

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

序列化操作常常使用JSON.parse()。
簡(jiǎn)單例子：

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

如果傳入JSON.parse()的字符串不是有效的JSON，則會(huì)拋出錯(cuò)誤。
注意：
雖然pingan和copyPingan屬性相同，但兩者獨(dú)立，沒(méi)有任何關(guān)系。

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

過(guò)濾器：可以是個(gè)數(shù)組，也可以是個(gè)函數(shù)。

選項(xiàng)：表示是否在JSON字符串中保留縮進(jìn)。

多帶帶或組合使用兩者，可以更加全面深入的控制JSON的序列化。

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

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

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

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":"我叫l(wèi)eo","age":"25歲","box":["a","b","c"]}"

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

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

若選項(xiàng)只有一個(gè)值，則表示每個(gè)級(jí)別縮進(jìn)的空格數(shù)，最大值為10，超過(guò)10則只會(huì)是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"
    ]
}"
*/

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

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

若還原函數(shù)返回其他值，則將該值插入結(jié)果中。

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

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

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"}"

W3school JSON教程

《JavaScrip高級(jí)程序設(shè)計(jì)》

本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號(hào)【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .