浅谈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
 
————————————————
版权声明：本文为优快云博主「jyjin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/jianleking/article/details/54603012