大致介紹

JSON(JavaScript Object Notation  JavaScript對(duì)象表示法),JSON是一種數(shù)據(jù)格式，不是一種編程語(yǔ)言。雖然它的名字中有JavaScript但是它卻不屬于JavaScript,就像Java和JavaScript的關(guān)系一樣。而且，并不是只有JavaScript才使用它,畢竟 JSON 只是一種數(shù)據(jù)格式。很多編程語(yǔ)言都有針對(duì) JSON 的解析器和序列化器。

JSON是由Douglas Crockford在2001年提出，為了取代XML

語(yǔ)法

JSON的語(yǔ)法可以包含三種類(lèi)型的值：

　◆ 簡(jiǎn)單值

　◆ 對(duì)象

　◆ 數(shù)組

簡(jiǎn)單值

簡(jiǎn)單值：使用與 JavaScript 相同的語(yǔ)法，可以在 JSON 中表示字符串、數(shù)值、布爾值和 null

注意：【1】JSON 不支持 JavaScript 中的特殊值 undefined

           【2】JSON 字符串必須使用雙引號(hào)（單引號(hào)會(huì)導(dǎo)致語(yǔ) 法錯(cuò)誤）

 // 有效的JSON數(shù)據(jù)
 "Hellow World!"
 5
 true
 null

對(duì)象

對(duì)象作為一種復(fù)雜的數(shù)據(jù)類(lèi)型，表示的是一組有序的鍵值對(duì)，每個(gè)鍵值對(duì)中的值既可以是簡(jiǎn)單值也可以是復(fù)雜數(shù)據(jù)類(lèi)型的值

JSON中的對(duì)象和JavaScript中的字面量稍微有一些不同：

  1、沒(méi)有聲明變量

  2、在末尾不需要加分號(hào)

  3、JSON 中對(duì)象的屬性名任何時(shí)候都必須加雙引號(hào)

注意：同一個(gè)對(duì)象中絕對(duì)不應(yīng)該出現(xiàn)兩個(gè)同名屬性

// JavaScript中的字面量
 var person = {
 name : "Lao Wang",
 age : 21
 };
 // JSON
 {
 "name" : "Lao Wang",
 "age" : 21
 }
 // 可以在對(duì)象中嵌入對(duì)象
 {
 "name" : "Lao Wang",
 "age" : 21,
 "school" :　{
 "name" : "TJLG",
 "location" : "西青"
 }
 }

數(shù)組

JSON 數(shù)組采用的就是 JavaScript 中的數(shù)組字面量形式

 // JavaScript
 var values = [21,"西青",true];
 // JSON
 values = [21,"西青",true]

JSON對(duì)象

早期的 JSON 解析器基本上就是使用 JavaScript 的 eval()函數(shù)。由于 JSON 是 JavaScript 語(yǔ)法的子 集，因此 eval()函數(shù)可以解析、解釋并返回 JavaScript 對(duì)象和數(shù)組,但是使用eval()函數(shù)對(duì)JSON數(shù)據(jù)結(jié)構(gòu)求值存在風(fēng)險(xiǎn)，應(yīng)為可能會(huì)執(zhí)行一些惡意代碼，所以要盡量少的使用eval()函數(shù)

ECMAScript 5 對(duì)解析 JSON 的行 為進(jìn)行規(guī)范，定義了全局對(duì)象 JSON。支持這個(gè)對(duì)象的瀏覽器有 IE 8+、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10.5+。對(duì)于較早版本的瀏覽器，可以使用一個(gè) shim：https://github.com/douglascrockford/JSON-js。

JSON對(duì)象有兩個(gè)方法：

1、stringify()

2、parse()

stringify()

stringify()方法將JavaScript對(duì)象序列化為JSON字符串

注意：

【1】默認(rèn)情況下，JSON.stringify()輸出的 JSON 字符串不包含任何空格字符或縮進(jìn)

var person = {
 name : "Lao Wang",
 grade : {
 "English" : "88",
 "Math" : "98"
 }
 };
 var jsonPerson = JSON.stringify(person);
 console.log(jsonPerson);
 // {"name":"Lao Wang","grade":{"English":"88","Math":"98"}}

【2】 如果對(duì)象的成員是undefined或者函數(shù)，該成員會(huì)被忽略

如果數(shù)組的成員是undefined或者函數(shù)，則這些值會(huì)被轉(zhuǎn)成null

var person = {
 name : function(){},
 sex : undefined,
 age : 21,
 grade : [undefined,function(){},"English"],
 }
 var jsonPerson = JSON.stringify(person);
 console.log(jsonPerson);
 // {"age":21,"grade":[null,null,"English"]}

【3】JSON.stringify()會(huì)忽略對(duì)象的不可遍歷屬性

var person = {};
 Object.defineProperties(person,{
 'name' : {
 value : "Lao Wang",
 enumerable : true
 },
 'age' : {
 value : 21,
 enumerable : false
 }
 });
 var jsonPerson = JSON.stringify(person);
 console.log(jsonPerson);
 // {"name":"Lao Wang"}

實(shí)際上，JSON.stringify()除了要序列化的 JavaScript 對(duì)象外，還可以接收另外兩個(gè)參數(shù)，這兩 個(gè)參數(shù)用于指定以不同的方式序列化 JavaScript 對(duì)象

第一個(gè)參數(shù)是個(gè)過(guò)濾器，可以是一個(gè)數(shù)組，也可 以是一個(gè)函數(shù)

第二個(gè)參數(shù)是一個(gè)選項(xiàng)，表示是否在 JSON 字符串中保留縮進(jìn)

1、當(dāng)?shù)谝粋€(gè)參數(shù)是數(shù)組時(shí)

如果過(guò)濾器參數(shù)是數(shù)組，那么 JSON.stringify()的結(jié)果中將只包含數(shù)組中列出的屬性

注意：

【1】、過(guò)濾器只對(duì)對(duì)象的第一層屬性有效

var person = {
 name : "Lao Wang",
 grade : {
 "English" : "88",
 "Math" : "98"
 }
 };
 var jsonPerson = JSON.stringify(person,["name","Math"]);
 console.log(jsonPerson);
 // {"name":"Lao Wang"}

【2】過(guò)濾器對(duì)數(shù)組無(wú)效

 var values = [21,"he",true,"we"];
 var jsonValues = JSON.stringify(values,["he"]);
 console.log(jsonValues);
 // [21,"he",true,"we"]

2、當(dāng)?shù)谝粋€(gè)參數(shù)是函數(shù)時(shí)

傳入的函數(shù)接收兩個(gè)參數(shù)，屬性（鍵）名和屬性值。根據(jù)屬性（鍵）名可以知道應(yīng)該如何處理要序列化的對(duì)象中的屬性。屬性名只能是字符串，而在值并非鍵值對(duì)兒結(jié)構(gòu)的值時(shí)，鍵名可以是空字符串。 為了改變序列化對(duì)象的結(jié)果，函數(shù)返回的值就是相應(yīng)鍵的值。

注意：如果函數(shù)返回了undefined或沒(méi)有返回值，那么相應(yīng)的屬性會(huì)被忽略

var values = {
 name : "Lao Wang",
 age : 21,
 sex : "男"
 }
 var jsonValues = JSON.stringify(values,function(key,value){
 if(key == "sex"){
 return undefined;
 }else{
 return value;
 }
 });
 console.log(jsonValues);
 // {"name":"Lao Wang","age":21}

3、當(dāng)給定第三個(gè)參數(shù)時(shí)

JSON.stringify()方法的第三個(gè)參數(shù)用于控制結(jié)果中的縮進(jìn)和空白符。如果這個(gè)參數(shù)是一個(gè)數(shù)值，那它表示的是每個(gè)級(jí)別縮進(jìn)的空格數(shù)

注意：

【1】只要傳入有效的控制縮進(jìn)的參數(shù)值，結(jié)果字符串就會(huì)包含換行符

【2】最大縮進(jìn)空格數(shù)為10，所有大于10的值都會(huì)自動(dòng)轉(zhuǎn)換為10

【3】如果縮進(jìn)參數(shù)是一個(gè)字符串而非數(shù)值，則這個(gè)字符串將在 JSON 字符串中被用作縮進(jìn)字符（不再使用空格）

// 參數(shù)是數(shù)值
 var person = {
 name : "Lao Wang",
 grade : {
 "English" : "88",
 "Math" : "98"
 }
 };
 var jsonPerson = JSON.stringify(person,null,4);
 console.log(jsonPerson);
 /*
 {
 "name": "Lao Wang",
 "grade": {
 "English": "88",
 "Math": "98"
 }
 }
 */
 // 參數(shù)是字符串
 var person = {
 name : "Lao Wang",
 grade : {
 "English" : "88",
 "Math" : "98"
 }
 };
 var jsonPerson = JSON.stringify(person,null,"-_-||");
 console.log(jsonPerson);
 /* 
 {
 -_-||"name": "Lao Wang",
 -_-||"grade": {
 -_-||-_-||"English": "88",
 -_-||-_-||"Math": "98"
 -_-||}
 }
 */

toJSON()

有時(shí)候，JSON.stringify()還是不能滿(mǎn)足對(duì)某些對(duì)象進(jìn)行自定義序列化的需求。在這些情況下， 可以通過(guò)對(duì)象上調(diào)用toJSON()方法，返回其自身的JSON數(shù)據(jù)格式

var person = {
 name : "Lao Wang",
 grade : {
 "English" : "88",
 "Math" : "98"
 },
 toJSON : function(){
 return "toJSON方法";
 }
 };
 var jsonPerson = JSON.stringify(person);
 console.log(jsonPerson);
 // "toJSON方法"

注意：如果toJSON()方法返回undefined，此時(shí)如果包含它的對(duì)象嵌入在另一個(gè)對(duì)象中，會(huì)導(dǎo)致該對(duì)象的值變成null。而如果包含它的對(duì)象是頂級(jí)對(duì)象，結(jié)果就是undefined

// 嵌入在另一個(gè)對(duì)象中
 var person = {
 name : "Lao Wang",
 grade : {
 "English" : "88",
 "Math" : "98"
 },
 sex : {
 value : "男",
 toJSON : function(){
 return undefined;
 }
 }
 };
 var jsonPerson = JSON.stringify(person,null,4);
 console.log(jsonPerson);
 /*
 {
 "name": "Lao Wang",
 "grade": {
 "English": "88",
 "Math": "98"
 }
 }
 */
 // 嵌入頂級(jí)對(duì)象
 var person = {
 name : "Lao Wang",
 grade : {
 "English" : "88",
 "Math" : "98"
 },
 toJSON : function(){
 return undefined;
 }
 };
 var jsonPerson = JSON.stringify(person,null,4);
 console.log(jsonPerson);
 // undefined

原生Date對(duì)象有一個(gè)toJSON()方法，能夠?qū)avaScript的Date 對(duì)象自動(dòng)轉(zhuǎn)換成ISO 8601日期字符串（與在Date對(duì)象上調(diào)用toISOString() 的結(jié)果完全一樣）

 var date = JSON.stringify(new Date("2017-1-18"));
 console.log(date);
 // "2017-01-17T16:00:00.000Z"

toJSON()可以作為函數(shù)過(guò)濾器的補(bǔ)充，因此理解序列化的內(nèi)部順序十分重要。假設(shè)把一個(gè)對(duì)象傳入JSON.stringify()，序列化該對(duì)象的順序如下

1、如果存在toJSON()方法而且能通過(guò)它取得有效的值，則調(diào)用該方法。否則，按默認(rèn)順序執(zhí)行序列化

2、如果提供了第二個(gè)參數(shù)，應(yīng)用這個(gè)函數(shù)過(guò)濾器。傳入函數(shù)過(guò)濾器的值是第一步返回的值

3、對(duì)第二步返回的每個(gè)值進(jìn)行相應(yīng)的序列化

4、如果提供了第三個(gè)參數(shù)，執(zhí)行相應(yīng)的格式化

JSON.parse()　　　　　

JSON.parse()將JSON字符串解析為JavaScript值

var person = JSON.parse('{"name":"Lao Wang"}');
console.log(person.name);
// Lao Wang

注意：如果傳入的字符串不是有效的JSON格式，JSON.parse方法將報(bào)錯(cuò)

JSON.parse()方法也可以接收另一個(gè)參數(shù)，該參數(shù)是一個(gè)函數(shù)，將在每個(gè)鍵值對(duì)兒上調(diào)用。為了區(qū)別 JSON.stringify()接收的替換（過(guò)濾）函數(shù)（replacer），這個(gè)函數(shù)被稱(chēng)為還原函數(shù)（reviver），還原函數(shù)接收兩個(gè)參數(shù)，一個(gè)鍵和一個(gè)值，而且需要返回一個(gè)值

注意：如果還原函數(shù)返回 undefined，則表示要從結(jié)果中刪除相應(yīng)的鍵；如果返回其他值，則將該值插入到結(jié)果中

var person = JSON.parse('{"name":"Lao Wang","age":21}',function(key,value){
 if(key == "age"){
 return undefined;
 }else{
 return value;
 }
 });
 console.log(person.name);
 // Lao Wang

在將日期字符串轉(zhuǎn)換為 Date 對(duì)象時(shí)，經(jīng)常要用到還原函數(shù)

var book = {
 "title": "Professional JavaScript",
 "authors": ["Nicholas C. Zakas"],
 edition: 3,
 year: 2011,
 releaseDate: new Date(2017, 1, 18)
 };
 var jsonText = JSON.stringify(book,null,4);
 console.log(jsonText);
 /*
 {
 "title": "Professional JavaScript",
 "authors": [
 "Nicholas C. Zakas"
 ],
 "edition": 3,
 "year": 2011,
 "releaseDate": "2017-02-17T16:00:00.000Z"
 }
 */
 var bookCopy = JSON.parse(jsonText, function(key, value){
 if (key == "releaseDate"){
 return new Date(value);
 }else{
 return value;
 }
 });
 console.log(bookCopy.releaseDate.getFullYear()); 
 // 2017

參考資料：

JSON對(duì)象 詳解及實(shí)例代碼

JavaScript高級(jí)程序設(shè)計(jì)中文版第三版

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論