浅谈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  };
js获取json的key和value  >仔细观察上⾯的结构,⼤家会发现上⾯两种结构与传统的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,functi
on(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

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。