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,或掃描下面的二維碼添加關注: