JavaScript對象與JSON格式的轉換及JSON.stringify和JSON.parse的使用方法
JSON處理
JSON（JavaScript Object Notation）是JavaScript表達值和對象的通用數據格式，其本質就是符合一定規范的字符串。由於JSON的優良特性，非常容易和其他語言進行數據交換，尤其在前後端交互方面。即使我們前端使用JavaScript，後端使用Java/PHP/Python同樣可以使用JSON格式的數據輕松交換。
JSON.stringify
JavaScript為我們提供瞭簡單的方法可以實現對象和字符串之間的轉化。
JSON.stringify將對象轉為JSON字符串；JSON.parse將JSON字符串轉為對象；
例如，我們把一個對象Dog使用 JSON.string轉為JSON字符串：
let Dog = {
name:'Peter',
age:187,
gender:'male',
hands:['hand01','hand02','hand03','hand04'],
childs:[
{
name:'little peter01',
age:2,
gender:'male',
hands:['hand01','hand02','hand03','hand04'],
childs:[]
},
{
name:'little peter02',
age:3,
gender:'male',
hands:['hand01','hand02','hand03','hand04'],
childs:[]
}
]
}
let dogJson = JSON.stringify(Dog)
console.log(typeof dogJson)
console.log(dogJson)
代碼的執行效果：
可見，使用JSON.stringify(obj)方法會返回該對象obj的JSON字符串數據，這個轉換的過程可以稱作JSON編碼（JSON-encoded）、序列化（serialized），亦或者編組化（marshalled）。當對象轉為普通的字符串後，我們就可以以普通數據的格式存儲、傳遞這些數據。
如果我們把這些字符串寫入數據庫，就相當於把JavaScript對象存進瞭數據庫。
註意：
JSON編碼的對象統一使用雙引號，沒有單引號和反引號；- 對象的屬性名也用雙引號，這是強制的；
JSON已經發展成為瞭獨立的數據規范，因此歸屬於JavaScript語言本身的非數據屬性會被JSON.stringify跳過。
包括：
- 對象方法；
- Symbol類型
- undefined的屬性
let user = {
sayHello(){//函數被忽略
console.log('hello world');
},
[Symbol('id')]:996996,//Symbol被忽略
val:undefined//undefined值被忽略
}
console.log(JSON.stringify(user))
代碼執行效果：
可以看到，裡面啥也沒有。
stringify的限制
並非所有的對象都能轉為JSON格式，如果對象之間存在循環引用，就會導致轉換失敗。
let father = {}
let son = {}
father.son = son
son.father = father
JSON.stringify(father)
代碼執行結果：
這裡出現錯誤的原因就是存在對象間的循環引用，Father引用瞭Son，而Son又反過來引用瞭Father。
排除和替換
如果我們隻希望將對象的個別屬性轉為JSON格式，或者擺出循環應用中的屬性，應該怎麼做呢？
JSON.stringify已經為我們提供瞭解決方法：
let json = JSON.stringify(obj[,replacer,space])
參數解讀：
obj：要編碼的對象replacer：要編碼的屬性數組或者映射函數function(k,v)space：用於格式化的空格數量
舉個例子：
let father = {
name:'father',
age:28
}
let son = {
name:'son',
age:4
}
father.son = son;
son.father = father;
console.log(JSON.stringify(father,['name','age']))
代碼的執行結果如下：
如果我們在第二個參數傳入一個數組，那麼JSON.stringify就會隻把數組中的名稱轉為JSON格式，這樣計算對象存在循環引用，同樣能夠成功的轉格式。
如果我們希望序列化出循環應用外的所有對象屬性，隻需要把對象的所有屬性名寫入數組即可，這對對象的子對象同樣生效。
舉個例子：
let father = {
name:'father',
age:28,
car:{
car_name : "BYD",
car_age:3,
}
}
console.log(JSON.stringify(father,['name','car','car_name']))
代碼執行結果：
但是，還存在一個問題，如果對象屬性特別多，可能數組就會非常長，代碼也會很冗長。
這種情況下就需要使用映射函數
映射函數
我們可以創建一個函數，代替數組作為replacer，這個函數接收(key,value)作為參數，並決定如何序列化對應的屬性。
例如，在解決循環引用的時候，我們排除引用屬性：
let father = {
name:'father',
age:28,
car:{
car_name : "BYD",
car_age:3,
}
}
let son = {
name:'son',
age:4
}
father.son = son;
son.father = father;
console.log(JSON.stringify(father,function replacer(key,value){
console.log(`${key}:${value}`)
return (key=='son')?undefined:value;
}))
代碼執行結果如下：
由於值為undefined的屬性會被JSON.stringify忽略，這樣我們就可以輕松的排除所有不希望出現的屬性瞭。
格式化使用的空格數量
JSON.stringify(value, replacer, spaces)的第三個參數spaces可以指定JSON字符串的縮進空格數，常用的數值有2、4兩種，相信童鞋們已經在編輯代碼的時候有過修改縮進tab空格數的經歷瞭。
在上文案例中，我們沒有指定縮進空格數量，所以格式化後的JSON字符串都是沒有格式的。
舉個例子：
let Dog = {
name:'Peter',
age:187,
gender:'male',
hands:['hand01','hand02','hand03','hand04'],
childs:[
{
name:'little peter01',
age:2,
gender:'male',
hands:['hand01','hand02','hand03','hand04'],
childs:[]
},
{
name:'little peter02',
age:3,
gender:'male',
hands:['hand01','hand02','hand03','hand04'],
childs:[]
}
]
}
let dogJson = JSON.stringify(Dog,null,2)
console.log(dogJson)
代碼的執行結果：
對比本文的第一個案例，是不是這樣的縮進看起來好看多瞭呢？
自定義toJSON方法
在之前的文章中，我們講到每個對象都有的toString方法，當進行格式轉換時會自動調用。和toString一樣，對象的toJSON方法會在序列化的時候調用，我們可以通過重寫這個方法改變序列化的方式。
例如：
let dog = {
name : 'peter',
age:18
}
console.log(JSON.stringify(dog))
dog.toJSON = function(){
return this.age;
}
console.log(JSON.stringify(dog))
代碼執行結果：
我們可以看到，在重寫瞭對象的toJSON方法後，使用stringify的結果發生瞭改變。
我們可以根據自己的需要重寫toJSON方法，從而達到自己的目的。
JSON.parse
上文講到瞭如何使用JSON.stringify把對象轉為JSON格式的字符串，這裡就詳細介紹如何把JSON字符串轉為對象。
語法：
let obj = JSON.parse(str,[reviver])
str 要解析的 JSON 字符串。
reviver 可選的函數 function(key,value)，該函數將為每個 (key, value) 對調用，並可以對值進行轉換。
例如：
let str_arr = '[1,2,3]'//數組字符串 let arr = JSON.parse(str_arr) console.log(typeof arr)
代碼執行結果：
對於復雜的嵌套對象：
let str_obj = `{
"name": "Peter",
"age": 187,
"gender": "male",
"hands": [
"hand01",
"hand02",
"hand03",
"hand04"
],
"childs": [
{
"name": "little peter01",
"age": 2,
"gender": "male",
"hands": [
"hand01",
"hand02",
"hand03",
"hand04"
],
"childs": []
},
{
"name": "little peter02",
"age": 3,
"gender": "male",
"hands": [
"hand01",
"hand02",
"hand03",
"hand04"
],
"childs": []
}
]
}`
let obj = JSON.parse(str_obj)
console.log(obj.name)
代碼執行結果：
註意：
JSON不支持註釋，在JSON中添加註釋時錯誤的行為有一種名為JSON5的格式，可以有不加引號的鍵、允許註釋，但是這是獨立的庫，補上官方標準。
常規的
JSON格式嚴格，這樣是為瞭保證數據的可靠、快速解析算法
使用reviver
既然JSON.parse能夠直接轉字符串為對象，為啥還要再搞reviver呢？
場景舉例：
如果我們有一個對象字符串如下：
// title: (meetup title), date: (meetup date)
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
現在我們要將它轉為對象，存在什麼問題呢？
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
let obj = JSON.parse(str)
obj.date.getDate();//Error
代碼執行結果如下：
造成這種結果的原因是date屬性被轉為瞭字符串，而不是Date對象。
這個時候就需要我們使用reviver函數將date轉為Date對象：
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
let obj = JSON.parse(str,function(key,value){
if(key=='date')return new Date(value)
return value
})
obj.date.getDate();
代碼執行效果：
順便說一下，這也適用於嵌套對象：
let schedule = `{
"meetups": [
{"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
{"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
]
}`;
schedule = JSON.parse(schedule, function(key, value) {
if (key == 'date') return new Date(value);
return value;
});
alert( schedule.meetups[1].date.getDate() ); // 正常運行瞭！
總結
- JSON是一種數據格式，有獨立的標準和大多數編程語言的支持
- JSON支持Object、array、string、number、boolean和nullJ
- SON.stringify
- JSON.parse
到此這篇關於JavaScript對象與JSON格式的轉換及JSON.stringify和JSON.parse的使用方法的文章就介紹到這瞭,更多相關JS與JSON格式轉換內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- 詳解JSON.parse和JSON.stringify用法
- JavaScript JSON.stringify()的使用總結
- 關於JavaScript中JSON的5個小技巧分享
- 前端進階之教你利用javascript存儲函數
- JavaScript字符串操作的四個實用技巧