初識json

標籤：轉換   逗號   idt   區別   1.4   str   語言環境   相對   ges   

一、JSON是一種格式，基於文本，優於輕量，用於交換資料　　如果沒有去過JSON的官方介紹可以去一下這裡，官方介紹第一、二段已經很清楚地表述了JSON是什麼，我將JSON是什麼提煉成以下幾個方面：　　1. 一種資料格式　　什麼是格式？就是規範你的資料要怎麼表示，舉個栗子，有個人叫“二百六”，身高“160cm”，體重“60kg”，現在你要將這個人的這些資訊傳給別人或者別的什麼東西，你有很多種選擇：姓名“二百六”，身高“160cm”，體重“60kg”name="二百六"&height="160cm"&weight="60kg"<person><name>二百六</name><height>160</height><weight>60</weight></person>{"name":"二百六","height":160,"weight":60}... ...　　以上所有選擇，傳遞的資料是一樣的，但是你可以看到形式是可以各式各樣的，這就是各種不同格式化後的資料，JSON是其中一種表示方式。　　2. 基於文本的資料格式　　JSON是基於文本的資料格式，相對於基於二進位的資料，所以JSON在傳遞的時候是傳遞符合JSON這種格式(至於JSON的格式是什麼我們第二部分再說)的字串，我們常會稱為“JSON字串”。　　3. 輕量級的資料格式　　在JSON之前，有一個資料格式叫xml，現在還是廣泛在用，但是JSON更加輕量，如xml需要用到很多標籤，像上面的例子中，你可以明顯看到xml格式的資料中標籤本身佔據了很多空間，而JSON比較輕量，即相同資料，以JSON的格式佔據的頻寬更小，這在有大量資料請求和傳遞的情況下是有明顯優勢的。　　4. 被廣泛地用於資料交換　　輕量已經是一個用於資料交換的優勢了，但更重要的JSON是易於閱讀、編寫和機器解析的，即這個JSON對人和機器都是友好的，而且又輕，獨立於語言（因為是基於文本的），所以JSON被廣泛用於資料交換。　　以前端JS進行ajax的POST請求為例，後端PHP處理請求為例：前端構造一個JS對象，用於封裝要傳遞的資料，然後將JS對象轉化為JSON字串，再發送請求到後端；後端PHP接收到這個JSON字串，將JSON字串轉化為PHP對象，然後處理請求。　　可以看到，相同的資料在這裡有3種不同的表現形式，分別是前端的JS對象、傳輸的JSON字串、後端的PHP對象，JS對象和PHP對象明顯不是一個東西，但是由於大家用的都是JSON來傳遞資料，大家都能理解這種資料格式，都能把JSON這種資料格式很容易地轉化為自己能理解的資料結構，這就方便啦，在其他各種語言環境中交換資料都是如此。　二、JSON和JS對象之間的“八卦”　　很多時候都聽到“JSON是JS的一個子集”這句話，而且這句話我曾經也一直這麼認為，每個符合JSON格式的字串你解析成js都是可以的，直到後來發現了一個奇奇怪怪的東西...　　1. 兩個本質不同的東西為什麼那麼密切　　JSON和JS對象本質上完全不是同一個東西，就像“斑馬線”和“斑馬”，“斑馬線”基於“斑馬”身上的條紋來呈現和命名，但是斑馬是活的，斑馬線是非生物。　　同樣，"JSON"全名"JavaScript Object Notation"，所以它的格式（文法）是基於JS的，但它就是一種格式，而JS對象是一個執行個體，是存在於記憶體的一個東西。　　說句玩笑話，如果JSON是基於PHP的，可能就叫PON了，形式可能就是這樣的了[‘propertyOne‘ => ‘foo‘, ‘propertyTwo‘ => 42,]，如果這樣，那麼JSON可能現在是和PHP比較密切了。　　此外，JSON是可以傳輸的，因為它是文字格式設定，但是JS對象是沒辦法傳輸的，在文法上，JSON也會更加嚴格，但是JS對象就很鬆了。　　那麼兩個不同的東西為什麼那麼密切，因為JSON畢竟是從JS中演變出來的，文法相近。　　2. JSON格式別JS對象文法表現上嚴格在哪　　先就以“索引值對為表現的對象”形式上，對比下兩者的不同，至於JSON還能以怎樣的形式表現，對比完後再羅列。

 

　　可以看到，相對於JS對象，JSON的格式更嚴格，所以大部分寫的JS對象是不符合JSON的格式的。以下代碼引用自這裡var obj1 = {}; // 這隻是 JS 對象// 可把這個稱做：JSON 格式的 JavaScript 對象 var obj2 = {"width":100,"height":200,"name":"rose"};// 可把這個稱做：JSON 格式的字串var str1 = ‘{"width":100,"height":200,"name":"rose"}‘;// 這個可叫 JSON 格式的數組，是 JSON 的稍複雜一點的形式var arr = [      {"width":100,"height":200,"name":"rose"},    {"width":100,"height":200,"name":"rose"},    {"width":100,"height":200,"name":"rose"},];// 這個可叫稍複雜一點的 JSON 格式的字串     var str2=‘[‘+      ‘{"width":100,"height":200,"name":"rose"},‘+    ‘{"width":100,"height":200,"name":"rose"},‘+    ‘{"width":100,"height":200,"name":"rose"},‘+‘]‘;  　　另外，除了常見的“正常的”JSON格式，要麼表現為一個對象形式{...}，要麼表現為一個數組形式[...]，任何單獨的一個10進位數值、雙引號字串、布爾值和null都是有效符合JSON格式的。　　這裡有完整的JSON文法參考　　3. 一個有意思的地方，JSON不是JS的子集　　首先看下面的代碼，你可以copy到控制台執行下：var code = ‘"\u2028\u2029"‘;  JSON.parse(code); // works fine  eval(code); // fails  　　這兩個字元\u2028和\u2029分別表示行分隔字元和段落分隔字元，JSON.parse可以正常解析，但是當做js解析時會報錯。　三、這幾個JS中的JSON函數，弄啥嘞　　在JS中我們主要會接觸到兩個和JSON相關的函數，分別用於JSON字串和JS資料結構之間的轉化，一個叫JSON.stringify，它很聰明，聰明到你寫的不符合JSON格式的JS對象都能幫你處理成符合JSON格式的字串，所以你得知道它到底幹了什麼，免得它只是自作聰明，然後讓你Debug long time；另一個叫JSON.parse，用於轉化json字串到JS資料結構，它很嚴格，你的JSON字串如果構造地不對，是沒辦法解析的。　　而它們的參數不止一個，雖然我們經常用的時候只傳入一個參數。　　此外，還有一個toJSON函數，我們較少看到，但是它會影響JSON.stringify。　　1. 將JS資料結構轉化為JSON字串——JSON.stringify　　這個函數的函數簽名是這樣的：JSON.stringify(value[, replacer [, space]])  　　下面將分別展開帶1~3個參數的用法，最後是它在序列化時做的一些“聰明”的事，要特別注意。　　1.1 基本使用——僅需一個參數　　這個大家都會使用，傳入一個JSON格式的JS對象或者數組，JSON.stringify({"name":"Good Man","age":18})返回一個字串"{"name":"Good Man","age":18}"。　　可以看到本身我們傳入的這個JS對象就是符合JSON格式的，用的雙引號，也沒有JSON不接受的屬性值，那麼如果像開頭那個例子中的一樣，how to play？不急，我們先舉簡單的例子來說明這個函數的幾個參數的意義，再來說這個問題。　　1.2 第二個參數可以是函數，也可以是一個數組如果第二個參數是一個函數，那麼序列化過程中的每個屬性都會被這個函數轉化和處理如果第二個參數是一個數組，那麼只有包含在這個數組中的屬性才會被序列化到最終的JSON字串中如果第二個參數是null，那作用上和空著沒啥區別，但是不想設定第二個參數，只是想設定第三個參數的時候，就可以設定第二個參數為null　　這第二個參數若是函數var friend={      "firstName": "Good",    "lastName": "Man",    "phone":"1234567",    "age":18};var friendAfter=JSON.stringify(friend,function(key,value){      if(key==="phone")        return "(000)"+value;    else if(typeof value === "number")        return value + 10;    else        return value; //如果你把這個else分句刪除，那麼結果會是undefined});console.log(friendAfter);  //輸出：{"firstName":"Good","lastName":"Man","phone":"(000)1234567","age":28}　　如果制定了第二個參數是函數，那麼這個函數必須對每一項都有返回，這個函數接受兩個參數，一個鍵名，一個是屬性值，函數必須針對每一個原來的屬性值都要有新屬性值的返回。　　那麼問題來了，如果傳入的不是索引值對的對象形式，而是方括弧的數組形式呢？，比如上面的friend變成這樣：friend=["Jack","Rose"]，那麼這個逐屬性處理的函數接收到的key和value又是什嗎？如果是數組形式，那麼key是索引，而value是這個數組項，你可以在控制台在這個函數內部列印出來這個key和value驗證。　　這第二個參數若是數組var friend={      "firstName": "Good",    "lastName": "Man",    "phone":"1234567",    "age":18};//注意下面的數組有一個值並不是上面對象的任何一個屬性名稱var friendAfter=JSON.stringify(friend,["firstName","address","phone"]);console.log(friendAfter);  //{"firstName":"Good","phone":"1234567"}//指定的“address”由於沒有在原來的對象中找到而被忽略　　如果第二個參數是一個數組，那麼只有在數組中出現的屬性才會被序列化進結果字串，只要在這個提供的數組中找不到的屬性就不會被包含進去，而這個數組中存在但是源JS對象中不存在的屬性會被忽略，不會報錯。　　1.3 第三個參數用於美化輸出——不建議用　　指定縮排用的空白字元，可以取以下幾個值：是1-10的某個數字，代表用幾個空白字元是字串的話，就用該字串代替空格，最多取這個字串的前10個字元沒有提供該參數 等於 設定成null 等於 設定一個小於1的數var friend={      "firstName": "Good",    "lastName": "Man",    "phone":{"home":"1234567","work":"7654321"}};//直接轉化是這樣的：//{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":"7654321"}}var friendAfter=JSON.stringify(friend,null,4);  console.log(friendAfter);  /*{    "firstName": "Good",    "lastName": "Man",    "phone": {        "home": "1234567",        "work": "7654321"    }}*/var friendAfter=JSON.stringify(friend,null,"HAHAHAHA");  console.log(friendAfter);  /*{HAHAHAHA"firstName": "Good",  HAHAHAHA"lastName": "Man",  HAHAHAHA"phone": {  HAHAHAHAHAHAHAHA"home": "1234567",  HAHAHAHAHAHAHAHA"work": "7654321"  HAHAHAHA}  }*/var friendAfter=JSON.stringify(friend,null,"WhatAreYouDoingNow");  console.log(friendAfter);  /* 最多隻取10個字元{WhatAreYou"firstName": "Good",  WhatAreYou"lastName": "Man",  WhatAreYou"phone": {  WhatAreYouWhatAreYou"home": "1234567",  WhatAreYouWhatAreYou"work": "7654321"  WhatAreYou}  }*/　　笑笑就好，別這樣用，序列化是為了傳輸，傳輸就是能越小越好，加莫名其妙的縮排符，解析困難（如果是字串的話），也弱化了輕量化這個特點。。　　1.4 注意這個函數的“小聰明”（重要）　　如果有其他不確定的情況，那麼最好的辦法就是"Have a try"，控制台做下實驗就明了。鍵名不是雙引號的（包括沒有引號或者是單引號），會自動變成雙引號；字串是單引號的，會自動變成雙引號最後一個屬性後面有逗號的，會被自動去掉非數組對象的屬性不能保證以特定的順序出現在序列化後的字串中這個好理解，也就是對非數組對象在最終字串中不保證屬性順序和原來一致布爾值、數字、字串的封裝對象在序列化過程中會自動轉換成對應的原始值也就是你的什麼new String("bala")會變成"bala"，new Number(2017)會變成2017undefined、任意的函數（其實有個函數會發生神奇的事，後面會說）以及 symbol 值（symbol詳見ES6對symbol的介紹）出現在非數組對象的屬性值中：在序列化過程中會被忽略出現在數組中時：被轉換成 nullJSON.stringify({x: undefined, y: function(){return 1;}, z: Symbol("")});  //出現在非數組對象的屬性值中被忽略："{}"JSON.stringify([undefined, Object, Symbol("")]);  //出現在數組對象的屬性值中，變成null："[null,null,null]"NaN、Infinity和-Infinity，不論在數組還是非數組的對象中，都被轉化為null所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們不可枚舉的屬性會被忽略　　2. 將JSON字串解析為JS資料結構——JSON.parse　　這個函數的函數簽名是這樣的：JSON.parse(text[, reviver])  　　如果第一個參數，即JSON字串不是合法的字串的話，那麼這個函數會拋出錯誤，所以如果你在寫一個後端返回JSON字串的指令碼，最好調用語言本身的JSON字串相關序列化函數，而如果是自己去拼接實現的序列化字串，那麼就尤其要注意序列化後的字串是否是合法的，合法指這個JSON字串完全符合JSON要求的嚴格格式。　　值得注意的是這裡有一個可選的第二個參數，這個參數必須是一個函數，這個函數作用在屬性已經被解析但是還沒返回前，將屬性處理後再返回。var friend={      "firstName": "Good",    "lastName": "Man",    "phone":{"home":"1234567","work":["7654321","999000"]}};//我們先將其序列化var friendAfter=JSON.stringify(friend);  //‘{"firstName":"Good","lastName":"Man","phone":{"home":"1234567","work":["7654321","999000"]}}‘//再將其解析出來，在第二個參數的函數中列印出key和valueJSON.parse(friendAfter,function(k,v){      console.log(k);    console.log(v);    console.log("----");});/*firstName  Good  ----lastName  Man  ----home  1234567  ----0  7654321  ----1  999000  ----work  []----phone  Object  ----Object  ----*/　　仔細看一下這些輸出，可以發現這個遍曆是由內而外的，可能由內而外這個詞大家會誤解，最裡層是內部數組裡的兩個值啊，但是輸出是從第一個屬性開始的，怎麼就是由內而外的呢？　　這個由內而外指的是對於複合屬性來說的，通俗地講，遍曆的時候，從頭到尾進行遍曆，如果是簡單屬性值（數值、字串、布爾值和null），那麼直接遍曆完成，如果是遇到屬性值是對象或者數組形式的，那麼暫停，先遍曆這個子JSON，而遍曆的原則也是一樣的，等這個複合屬性遍曆完成，那麼再完成對這個屬性的遍曆返回。　　本質上，這就是一個深度優先的遍曆。　　有兩點需要注意：如果 reviver 返回 undefined，則當前屬性會從所屬對象中刪除，如果返回了其他值，則返回的值會成為當前屬性新的屬性值。你可以注意到上面例子最後一組輸出看上去沒有key，其實這個key是一個Null 字元串，而最後的object是最後解析完成對象，因為到了最上層，已經沒有真正的屬性了。　　3. 影響 JSON.stringify 的神奇函數——object.toJSON　　如果你在一個JS對象上實現了toJSON方法，那麼調用JSON.stringify去序列化這個JS對象時，JSON.stringify會把這個對象的toJSON方法返回的值作為參數去進行序列化。var info={      "msg":"I Love You",    "toJSON":function(){        var replaceMsg=new Object();        replaceMsg["msg"]="Go Die";        return replaceMsg;    }};JSON.stringify(info);  //出si了，返回的是：‘"{"msg":"Go Die"}"‘,說好的忽略函數呢　　這個函數就是這樣子的。　　其實Date類型可以直接傳給JSON.stringify做參數，其中的道理就是，Date類型內建了toJSON方法。

　　

初識json