---

文章目錄

• JSON處理
• • JSON.stringify
  • stringify的限制
  • 排除和替換
  • 映射函數(shù)
  • 格式化使用的空格數(shù)量
  • 自定義toJSON方法
  • JSON.parse
  • 使用reviver
  • 總結(jié)

---

JSON處理

JSON（JavaScript Object Notation）是JavaScript表達值和對象的通用數(shù)據(jù)格式，其本質(zhì)就是符合一定規(guī)范的字符串。由于JSON的優(yōu)良特性，非常容易和其他語言進行數(shù)據(jù)交換，尤其在前后端交互方面。即使我們前端使用JavaScript，后端使用Java/PHP/Python同樣可以使用JSON格式的數(shù)據(jù)輕松交換。

JSON.stringify

JavaScript為我們提供了簡單的方法可以實現(xiàn)對象和字符串之間的轉(zhuǎn)化。

JSON.stringify將對象轉(zhuǎn)為JSON字符串；

JSON.parse將JSON字符串轉(zhuǎn)為對象；

例如，我們把一個對象Dog使用 JSON.string轉(zhuǎn)為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)

代碼的執(zhí)行效果：

可見，使用JSON.stringify(obj)方法會返回該對象obj的JSON字符串數(shù)據(jù)，這個轉(zhuǎn)換的過程可以稱作JSON編碼（JSON-encoded）、序列化（serialized），亦或者編組化（marshalled）。當對象轉(zhuǎn)為普通的字符串后，我們就可以以普通數(shù)據(jù)的格式存儲、傳遞這些數(shù)據(jù)。

如果我們把這些字符串寫入數(shù)據(jù)庫，就相當于把JavaScript對象存進了數(shù)據(jù)庫。

注意：

JSON編碼的對象統(tǒng)一使用雙引號，沒有單引號和反引號；

對象的屬性名也用雙引號，這是強制的；

JSON已經(jīng)發(fā)展成為了獨立的數(shù)據(jù)規(guī)范，因此歸屬于JavaScript語言本身的非數(shù)據(jù)屬性會被JSON.stringify跳過。

包括：

對象方法；

Symbol類型

undefined的屬性

let user = {sayHello(){//函數(shù)被忽略console.log('hello world');},[Symbol('id')]:996996,//Symbol被忽略val:undefined//undefined值被忽略 } console.log(JSON.stringify(user))

代碼執(zhí)行效果：

可以看到，里面啥也沒有。

stringify的限制

并非所有的對象都能轉(zhuǎn)為JSON格式，如果對象之間存在循環(huán)引用，就會導(dǎo)致轉(zhuǎn)換失敗。

let father = {} let son = {} father.son = son son.father = father JSON.stringify(father)

代碼執(zhí)行結(jié)果：

這里出現(xiàn)錯誤的原因就是存在對象間的循環(huán)引用，Father引用了Son，而Son又反過來引用了Father。

排除和替換

如果我們只希望將對象的個別屬性轉(zhuǎn)為JSON格式，或者擺出循環(huán)應(yīng)用中的屬性，應(yīng)該怎么做呢？

JSON.stringify已經(jīng)為我們提供了解決方法：

let json = JSON.stringify(obj[,replacer,space])

參數(shù)解讀：

obj：要編碼的對象

replacer：要編碼的屬性數(shù)組或者映射函數(shù)function(k,v)

space：用于格式化的空格數(shù)量

舉個例子：

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']))

代碼的執(zhí)行結(jié)果如下：

如果我們在第二個參數(shù)傳入一個數(shù)組，那么JSON.stringify就會只把數(shù)組中的名稱轉(zhuǎn)為JSON格式，這樣計算對象存在循環(huán)引用，同樣能夠成功的轉(zhuǎn)格式。

如果我們希望序列化出循環(huán)應(yīng)用外的所有對象屬性，只需要把對象的所有屬性名寫入數(shù)組即可，這對對象的子對象同樣生效。

舉個例子：

let father = {name:'father',age:28,car:{car_name : "BYD",car_age:3,} } console.log(JSON.stringify(father,['name','car','car_name']))

代碼執(zhí)行結(jié)果：

但是，還存在一個問題，如果對象屬性特別多，可能數(shù)組就會非常長，代碼也會很冗長。

這種情況下就需要使用映射函數(shù)

映射函數(shù)

我們可以創(chuàng)建一個函數(shù)，代替數(shù)組作為replacer，這個函數(shù)接收(key,value)作為參數(shù)，并決定如何序列化對應(yīng)的屬性。

例如，在解決循環(huán)引用的時候，我們排除引用屬性：

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; }))

代碼執(zhí)行結(jié)果如下：

由于值為undefined的屬性會被JSON.stringify忽略，這樣我們就可以輕松的排除所有不希望出現(xiàn)的屬性了。

格式化使用的空格數(shù)量

JSON.stringify(value, replacer, spaces)的第三個參數(shù)spaces可以指定JSON字符串的縮進空格數(shù)，常用的數(shù)值有2、4兩種，相信童鞋們已經(jīng)在編輯代碼的時候有過修改縮進tab空格數(shù)的經(jīng)歷了。

在上文案例中，我們沒有指定縮進空格數(shù)量，所以格式化后的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)

代碼的執(zhí)行結(jié)果：

對比本文的第一個案例，是不是這樣的縮進看起來好看多了呢？

自定義toJSON方法

在之前的文章中，我們講到每個對象都有的toString方法，當進行格式轉(zhuǎn)換時會自動調(diào)用。和toString一樣，對象的toJSON方法會在序列化的時候調(diào)用，我們可以通過重寫這個方法改變序列化的方式。

例如：

let dog = {name : 'peter',age:18 } console.log(JSON.stringify(dog)) dog.toJSON = function(){return this.age; } console.log(JSON.stringify(dog))

代碼執(zhí)行結(jié)果：

我們可以看到，在重寫了對象的toJSON方法后，使用stringify的結(jié)果發(fā)生了改變。

我們可以根據(jù)自己的需要重寫toJSON方法，從而達到自己的目的。

JSON.parse

上文講到了如何使用JSON.stringify把對象轉(zhuǎn)為JSON格式的字符串，這里就詳細介紹如何把JSON字符串轉(zhuǎn)為對象。

語法：

let obj = JSON.parse(str,[reviver])

str 要解析的 JSON 字符串。

reviver 可選的函數(shù) function(key,value)，該函數(shù)將為每個 (key, value) 對調(diào)用，并可以對值進行轉(zhuǎn)換。

例如：

let str_arr = '[1,2,3]'//數(shù)組字符串 let arr = JSON.parse(str_arr) console.log(typeof arr)

代碼執(zhí)行結(jié)果：

對于復(fù)雜的嵌套對象：

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)

代碼執(zhí)行結(jié)果：

注意：JSON不支持注釋，在JSON中添加注釋時錯誤的行為

有一種名為JSON5的格式，可以有不加引號的鍵、允許注釋，但是這是獨立的庫，補上官方標準。

常規(guī)的JSON格式嚴格，這樣是為了保證數(shù)據(jù)的可靠、快速解析算法

使用reviver

既然JSON.parse能夠直接轉(zhuǎn)字符串為對象，為啥還要再搞reviver呢？

場景舉例：

如果我們有一個對象字符串如下：

// title: (meetup title), date: (meetup date) let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

現(xiàn)在我們要將它轉(zhuǎn)為對象，存在什么問題呢？

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}'; let obj = JSON.parse(str) obj.date.getDate();//Error

代碼執(zhí)行結(jié)果如下：

造成這種結(jié)果的原因是date屬性被轉(zhuǎn)為了字符串，而不是Date對象。

這個時候就需要我們使用reviver函數(shù)將date轉(zhuǎn)為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();

代碼執(zhí)行效果：

順便說一下，這也適用于嵌套對象：

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() ); // 正常運行了！

總結(jié)

JSON是一種數(shù)據(jù)格式，有獨立的標準和大多數(shù)編程語言的支持

JSON支持Object、array、string、number、boolean和null

JSON.stringify

JSON.parse

總結(jié)

以上是生活随笔為你收集整理的37.JavaScript对象与JSON格式的转换，JSON.stringify、JSON.parse方法的使用方法和注意事项的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。