淺談js的鍵值對key和value

　　> 昨晚無意中看到類似下面結構的一段代碼的取值問題，引起我的興趣，花了點時間寫了個demo給大家分享一下。。。

　　var obj = [
　　　　{"2011":{"name":"jyjin","age":20}},
　　　　{"2012":{"name":"jyjin","age":21}}
　　];

　　var obj1 = {
　　　　"2013":{"name":"jyjin","age":22},
　　　　"2014":{"name":"jyjin","age":23}
　　};

 

　　>仔細觀察上面的結構，大家會發現上面兩種結構與傳統的json或數組數據結構有一些區別，2011、2012、2013、2014這些鍵值對中“鍵”的地方也存儲了數據，這種方式可能大大減小了文件的存儲大小。所以我在取值的時候激動了一下，下面就來討論一下它的取值方式。

　　>#1.鍵值對理解技巧
　　>無論上面的哪種數據結構，數組也好對象也罷，要分清鍵值對，我的技巧就是先找冒號。*冒號左邊的是key，右邊的是value，沒有冒號默認key從0開始依次遞增，顯示值為value*。
　　>那么不難理解

　　

obj的 key value
　　　　0 {"2011":{"name":"jyjin","age":20}}
　　　　1 {"2012":{"name":"jyjin","age":21}}

obj1的 key value
　　　　2013 {"name":"jyjin","age":22}
　　　　2014 {"name":"jyjin","age":23}

 

　　>很清晰的發現obj的value再細分key和value就是obj1的key、value划分結構

　　>#2.鍵值對的取值
　　   　 1.for-in--------------------------------
　　　　　　　for-in的正確理解方式是for(var key in obj)，其中obj是js對象或數組，我用key是為了更加清晰明了指明，它迭代出來的是key值而不是value值。所以用for-in遍歷數組　　　　　　    出來的值是數組下標，遍歷js對象結果是對象屬性名。

　　　　   　

　 　　　　 for(var key in obj){
　　　　　　    console.log(key);
　　　　    }
　　　　　　控制台輸出：
　　　　　　　　0
　　　　　　　　1

　　　　　　for(var key in obj1){
　　　　　　　　console.log(key);
　　　　　　}
　　　　　　控制台輸出：
　　　　　　　　2013
　　　　　　　　2014

 

　　　　　2.$.each()--------------------------------
　　　　　　　　jQuery中$.each()方法是當之無愧的取鍵值對的好方法，可以理解成這樣的代碼$.each(obj,function(key,value){...})，obj可以是js對象或數組，key和value分別對應相　　　　　　應名稱值、鍵值。這里一個很不好的習慣是書寫成function(i,data)這里容易錯誤理解成i代表數組下標，data元素值，其實這種理解是完全錯誤的！

　　

　　　　　　$.each(obj,function(key,value){
　　　　　　　　console.log(key+":"+value);
　　　　　　});
　　　　　　控制台輸出：
　　　　　　　　0:[object Object] 
　　　　　　　　1:[object Object]

　　　　

　　　　　　$.each(obj1,function(key,value){
　　　　　　　　console.log(key+":"+value);
　　　　　　});
　　　　　　控制台輸出：
　　　　　　　　2013:[object Object] 
　　　　　　　　2014:[object Object]
　　

　　　　　　可以看出這里不單單取出for-in可以取出的key，也將value取出了，只不過需要進一步對value的鍵值對取值。。。

　　　　　3.用for-in和$-each混合使用取出obj中的重要數據信息：年份、姓名、年齡
　　　　　　

　　　　　　$.each(obj,function(objkey,objvalue){
　　　　　　　　$.each(objvalue,function(key,value){
　　　　　　　　　　console.log(key+":"+value.name+":"+value.age);
　　　　　　　　});
　　　　　　});
　　　　　　$.each(obj1,function(key,value){
　　　　　　　　console.log(key+":"+value.name+":"+value.age);
　　　　　　});

　　　　　　控制台輸出：
　　　　　　　　2011:jyjin:20 
　　　　　　　　2012:jyjin:21 
　　　　　　　　2013:jyjin:22 
　　　　　　　　2014:jyjin:23

　　

　　　　  　for(var objkey in obj){
　　　　　　　　$.each(obj[objkey],function(key,value){
　　　　　　　　　　console.log(key+":"+value.name+":"+value.age);
　　　　　　　　});
　　　　　　}
　　　　　　for(var obj1key in obj1){
　　　　　　　　console.log(obj1key)
　　　　　　　　$.each(obj1[obj1key],function(key,value){
　　　　　　　　　　console.log(":"+value);
　　　　　　　　});
　　　　　　}

　　　　　　控制台輸出：
　　　　　　　　2011:jyjin:20 
　　　　　　　　2012:jyjin:21 
　　　　　　　　2013
　　　　　　　　:jyjin 
　　　　　　　　:22 
　　　　　　　　2014
　　　　　　　　:jyjin 
　　　　　　　　:23