浅谈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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。