JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse如何使用

這篇文章主要講解了“JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse如何使用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse如何使用”吧！

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)引用，就會導致轉(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é)果：

對于復雜的嵌套對象：

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

感謝各位的閱讀，以上就是“JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse如何使用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對JavaScript對象與JSON格式的轉(zhuǎn)換及JSON.stringify和JSON.parse如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！