• 浅谈js的键值对key和value


      > 昨晚无意中看到类似下面结构的一段代码的取值问题,引起我的兴趣,花了点时间写了个demo给大家分享一下。。。

    1   var obj = [
    2     {"2011":{"name":"jyjin","age":20}},
    3     {"2012":{"name":"jyjin","age":21}}
    4   ];
    5 
    6   var obj1 = {
    7     "2013":{"name":"jyjin","age":22},
    8     "2014":{"name":"jyjin","age":23}
    9   };


      >仔细观察上面的结构,大家会发现上面两种结构与传统的json或数组数据结构有一些区别,2011、2012、2013、2014这些键值对中“键”的地方也存储了数据,这种方式可能大大减小了文件的存储大小。所以我在取值的时候激动了一下,下面就来讨论一下它的取值方式。

      >#1.键值对理解技巧
      >无论上面的哪种数据结构,数组也好对象也罢,要分清键值对,我的技巧就是先找冒号。*冒号左边的是key,右边的是value,没有冒号默认key从0开始依次递增,显示值为value*。
      >那么不难理解

      

    1 obj的 key value
    2     0 {"2011":{"name":"jyjin","age":20}}
    3     1 {"2012":{"name":"jyjin","age":21}}
    4 
    5 obj1的 key value
    6     2013 {"name":"jyjin","age":22}
    7     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对象结果是对象属性名。

            

     1        for(var key in obj){
     2           console.log(key);
     3         }
     4       控制台输出:
     5         0
     6         1
     7 
     8       for(var key in obj1){
     9         console.log(key);
    10       }
    11       控制台输出:
    12         2013
    13         2014

         2.$.each()--------------------------------
            jQuery中$.each()方法是当之无愧的取键值对的好方法,可以理解成这样的代码$.each(obj,function(key,value){...}),obj可以是js对象或数组,key和value分别对应相      应名称值、键值。这里一个很不好的习惯是书写成function(i,data)这里容易错误理解成i代表数组下标,data元素值,其实这种理解是完全错误的!

      

     1       $.each(obj,function(key,value){
     2         console.log(key+":"+value);
     3       });
     4       控制台输出:
     5         0:[object Object] 
     6         1:[object Object]
     7 
     8     
     9 
    10       $.each(obj1,function(key,value){
    11         console.log(key+":"+value);
    12       });
    13       控制台输出:
    14         2013:[object Object] 
    15         2014:[object Object]
    16   
    17 
    18       可以看出这里不单单取出for-in可以取出的key,也将value取出了,只不过需要进一步对value的键值对取值。。。
    19 
    20      3.用for-in和$-each混合使用取出obj中的重要数据信息:年份、姓名、年龄
    21       
    22 
    23       $.each(obj,function(objkey,objvalue){
    24         $.each(objvalue,function(key,value){
    25           console.log(key+":"+value.name+":"+value.age);
    26         });
    27       });
    28       $.each(obj1,function(key,value){
    29         console.log(key+":"+value.name+":"+value.age);
    30       });
    31 
    32       控制台输出:
    33         2011:jyjin:20 
    34         2012:jyjin:21 
    35         2013:jyjin:22 
    36         2014:jyjin:23

      

     1        for(var objkey in obj){
     2         $.each(obj[objkey],function(key,value){
     3           console.log(key+":"+value.name+":"+value.age);
     4         });
     5       }
     6       for(var obj1key in obj1){
     7         console.log(obj1key)
     8         $.each(obj1[obj1key],function(key,value){
     9           console.log(":"+value);
    10         });
    11       }
    12 
    13       控制台输出:
    14         2011:jyjin:20 
    15         2012:jyjin:21 
    16         2013
    17         :jyjin 
    18         :22 
    19         2014
    20         :jyjin 
    21         :23
  • 相关阅读:
    android studio导出apk
    Android开发入门经典实例
    L1-Day32
    L1-Day33
    L1-Day30
    Oracle中的null与空字符串''的区别
    Oracle中的job(定时任务)
    Oracle中的加解密函数
    LeetCode33题——搜索旋转排序数组
    Oracle中的DBMS_LOCK包的使用
  • 原文地址:https://www.cnblogs.com/jyjin/p/4180455.html
Copyright © 2020-2023  润新知