> 昨晚无意中看到类似下面结构的一段代码的取值问题,引起我的兴趣,花了点时间写了个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

浅谈js的键值对key和value的更多相关文章

  1. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  2. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  3. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  4. 浅谈 js 字符串之神奇的转义

    原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...

  5. 浅谈 js 正则之 test 方法

    原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...

  6. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

  7. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  8. 浅谈JS严格模式

    浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...

  9. 浅谈JS中 var let const 变量声明

    浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...

随机推荐

  1. loadrunner的基本操作

    一.遗留问题: 1.controller中,到设置的时间后,仍然在运行: 2.如何对多个用例的结果进行分析,找到系统可以承受的最佳的用户数量点: 3.vuser与实际的用户访问数量是一回事吗?比如vu ...

  2. 用CSS定义每段首行缩进2个字符 转

    应该遵循w3c所制定的html/xhtml标准来使用tag和编写网页.如果你对此不太了解,可以到w3c的网站www.w3.org去找相关资料,或者买一本xhtml的书(注意不要买过时的html的书,尽 ...

  3. 关于CSS reset

    关于CSS resetCSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS 的overwrite,尤其像开心网*{margin: ...

  4. OD调试2

    通过视频学习,实现了一下简单的traceme爆破.这不是把它的序列号破译出来,只是识别了自己的号码,不算真正的爆破.(与期望有点差异) 先来看一下这款软件的逻辑结构. 先输入用户名  以及序列号 然后 ...

  5. addslashes() 函数和stripslashes()函数

    addslashes() 函数 定义和用法 addslashes() 函数在指定的预定义字符前添加反斜杠. 这些预定义字符是: 单引号 (') 双引号 (") 反斜杠 (\) NULL 语法 ...

  6. NullReferenceException UnityEngine.Transform.get_localPosition

    NullReferenceException  UnityEngine.Transform.get_localPosition unity程序中,需要取得GO自身的Transform,出现如上空异常, ...

  7. 引用计数gc机制使用不当导致内存泄漏

    上一篇文章找同事review了一下,收到的反馈是铺垫太长了,我尽量直入正题,哈哈 最近dbd压测时发现内存泄漏,其实这个问题去年已经暴露了,参见这篇博客[压测周].当时排查不够仔细,在此检讨下.关于d ...

  8. oracle中的装换函数

    日期装换成字符的函数:TO_CHAR(date[,fmt[,params]]) 默认格式:DD-MON-RR 参数说明: date:将要装换的日期 fmt:装换的格式 params:日期的语言(可以不 ...

  9. android之 listview加载性能优化ViewHolder

    在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...

  10. 【转载】ANSYS有限元分析中的单位问题

    原文地址:http://www.cnblogs.com/ylhome/archive/2009/02/26/1398756.html ansys中没有单位的概念,只要统一就行了.所以,很多人在使用时, ...