8 JSON

    因平時工作時，使用JSON的場景比較多，其JSON語法不再介紹，僅介紹在JavaScript中JSON的解析和序列化。

8.1 JSON 對象

    JSON對象有兩個方法：

• stringify()：將JavaScript序列化為JSON字元串
• parse()：將JSON解析為原生JavaScript值

let personInfo={
    name:"Surpass",
    age:28,
    location:"Shanghai",
    from:"Wuhan",
    to:"Nanjing"
};

let jsonText=JSON.stringify(personInfo);
let jsonObj=JSON.parse(jsonText);
console.log(jsonText); // {"name":"Surpass","age":28,"location":"Shanghai","from":"Wuhan","to":"Nanjing"}
console.log(jsonObj); // {name: 'Surpass', age: 28, location: 'Shanghai', from: 'Wuhan', to: 'Nanjing'}

    註意事項如下所示：

• 在序列化JavaScript對象時，所有函數和原型成員都會在結果中省略，值為undefined的任何屬性也會被跳過，最終得到的就是所有實例屬性均為有效JSON數據類型的表示
• JSON.parse()傳入的JSON字元串無效，則會導致拋出錯誤

8.2 序列化選項

    JSON.stringify()方法除了要序列化的對象，還可以接收兩個參數，單獨或組合使用這些參數可以更好地控制JSON序列化

• 第一個參數是過濾器，可以是數組或函數
• 第二個參數是用於縮進結果JSON字元串的選項

8.2.1 過濾結果

• 1.過濾器為數組

    如果第二個參數是一個數組，那麼JSON.stringify()返回的結果只會包含該數組中列出的對象屬性。

let personInfo={
    name:"Surpass",
    age:28,
    location:"Shanghai",
    from:"Wuhan",
    to:"Nanjing"
};

let jsonText=JSON.stringify(personInfo,["name","from"]);
console.log(jsonText); // {"name":"Surpass","from":"Wuhan"}

• 2.過濾器是函數

    如果第二個參數是一個函數，則函數接收兩個參數：屬性名（key）和屬性值（value）。可以根據key決定要對其屬性執行什麼操作。key始終是字元串，當值不屬於某個鍵/值對時則為空字元串。否則返回的值就是相應key對應的值。若返回undefined會導致屬性被忽略。代碼如下所示：

let personInfo={
    name:"Surpass",
    age:28,
    location:"Shanghai",
    from:"Wuhan",
    to:"Nanjing"
};

let jsonText=JSON.stringify(personInfo,(key,value)=>{
   switch (key) {
       case "name":
           return value+"@";
       case "from":
           return value+"+";
        case "age":
            return value+28;
        case "location":
            return undefined;
       default:
           return value;
   }
});

console.log(jsonText);

輸出結果如下所示：

{"name":"Surpass@","age":56,"from":"Wuhan+","to":"Nanjing"}

8.2.2 字元串縮進

    JSON.stringify()方法的第三個參數控制縮進和空格。在這個參數是數值時，表示每一級縮進的空格數。示例代碼如下所示：

let personInfo={
    name:"Surpass",
    age:28,
    location:"Shanghai",
    from:"Wuhan",
    to:"Nanjing"
};

let jsonText=JSON.stringify(personInfo,(key,value)=>{
   switch (key) {
       case "name":
           return value+"@";
       case "from":
           return value+"+";
        case "age":
            return value+28;
        case "location":
            return undefined;
       default:
           return value;
   }
},4);

console.log(jsonText);

輸出結果如下所示：

{
    "name": "Surpass@",
    "age": 56,
    "from": "Wuhan+",
    "to": "Nanjing"
}

最大縮進值為10，大於10 的值會自動設置為10
如果縮進參數是一個字元串而非數值，那麼JSON字元串中就會使用這個字元串而不是空格來縮進

let personInfo={
    name:"Surpass",
    age:28,
    location:"Shanghai",
    from:"Wuhan",
    to:"Nanjing"
};
let jsonText=JSON.stringify(personInfo,null,"++++");
console.log(jsonText);

輸出結果如下所示：

{
++++"name": "Surpass",
++++"age": 28,
++++"location": "Shanghai",
++++"from": "Wuhan",
++++"to": "Nanjing"
}

8.3 解析選項

    JSON.parse()方法也可以接收一個額外的參數，這個函數會針對每個鍵/值對都調用一次，也接收兩個參數屬性名（key）和屬性值（value），同時也需要返回值。如果函數返回undefined，則結果中刪除相應的鍵。如果返回了其他任何值，則該值就會成為相應鍵的值插入到結果中。

let personInfo={
    name:"Surpass",
    age:28,
    location:"Shanghai",
    from:"Wuhan",
    to:"Nanjing",
    neighbour:["Surpass"]
};

let neighbourArray=["Kevin","Tina","Jeniffer"];

let jsonText=JSON.stringify(personInfo);

let jsonObj=JSON.parse(jsonText,
    (key,value)=> key == "neighbour" ? neighbourArray:value
);

console.log(JSON.stringify(jsonObj,null,4));

輸出結果如下所示：

{
    "name": "Surpass",
    "age": 28,
    "location": "Shanghai",
    "from": "Wuhan",
    "to": "Nanjing",
    "neighbour": [
        "Kevin",
        "Tina",
        "Jeniffer"
    ]
}

原文地址：https://www.jianshu.com/p/aca2b3177540

本文同步在微信訂閱號上發佈，如各位小伙伴們喜歡我的文章，也可以關註我的微信訂閱號：woaitest，或掃描下麵的二維碼添加關註：

作者： Surpassme

來源： http://www.jianshu.com/u/28161b7c9995/

         http://www.cnblogs.com/surpassme/

聲明：本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出 原文鏈接 ，否則保留追究法律責任的權利。如有問題，可發送郵件 聯繫。讓我們尊重原創者版權，共同營造良好的IT朋友圈。