溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript對象與JSON格式的轉換及JSON.stringify和JSON.parse如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript對象與JSON格式的轉換及JSON.stringify和JSON.parse如何使用”吧！
JSON（JavaScript Object Notation）是JavaScript表達值和對象的通用數據格式，其本質就是符合一定規范的字符串。由于JSON的優良特性，非常容易和其他語言進行數據交換，尤其在前后端交互方面。即使我們前端使用JavaScript，后端使用Java/PHP/Python同樣可以使用JSON格式的數據輕松交換。
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))代碼執行效果：
可以看到，里面啥也沒有。
并非所有的對象都能轉為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)代碼的執行結果：
對比本文的第一個案例，是不是這樣的縮進看起來好看多了呢？
在之前的文章中，我們講到每個對象都有的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.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格式嚴格，這樣是為了保證數據的可靠、快速解析算法
既然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() ); // 正常運行了！感謝各位的閱讀，以上就是“JavaScript對象與JSON格式的轉換及JSON.stringify和JSON.parse如何使用”的內容了，經過本文的學習后，相信大家對JavaScript對象與JSON格式的轉換及JSON.stringify和JSON.parse如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
