浅谈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
浅谈js的键值对key和value的更多相关文章
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- 浅谈 js 字符串之神奇的转义
原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...
- 浅谈 js 正则之 test 方法
原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...
- 浅谈 js 字符串 trim 方法之正则篇
原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格 等 ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- 浅谈JS严格模式
浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...
- 浅谈JS中 var let const 变量声明
浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...
随机推荐
- DOMContentLoaded和load
/* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * ...
- iOS6的旋屏控制技巧
在iOS5.1 和 之前的版本中, 我们通常利用 shouldAutorotateToInterfaceOrientation: 来单独控制某个UIViewController的旋屏方向支持,比如: ...
- iOS学习之NSPredictae及搜索框的实现
NSPredicate Predicate 即谓词逻辑, Cocoa框架中的NSPredicate用于查询,作用是从数据堆中根据条件进行筛选.计算谓词之后返回的结果永远为BOOL类型的值,当程序使用谓 ...
- eclipse如何导入项目
链接来自百度经验: 点击打开链接
- 银光类似web visio的节点连线控件Essential Diagram免费下载地址
Essential Diagram for Silverlight是一款功能强大的图解拓扑图控件,在XAML支持的情况下提供用户交互式地创建和编辑图解,支持数据绑定和多种布局,可以导出为多种文件格式等 ...
- 【Android】配置APK开发环境
1.安装java jdk去oracle公司下载jdk-7u15-windows-i586.exehttp://www.oracle.com/technetwork/cn/java/javase/dow ...
- php之无限极分类
首先建立分类信息表: CREATE TABLE IF NOT EXISTS `category` ( `categoryId` smallint(5) unsigned NOT NULL AUTO_I ...
- tensorflow4
参考:tensorflow_manual_cn.pdf 一.图像的四维张量和参数的四维张量貌似不同: 二.流程回顾 1.数据准备 2.Page 63 三.状态可视化 四.保存检查点(保存参数) 五.评 ...
- CSS3 里添加自定义字体
添加自定义字体是从 CSS3 开始的,下载到的字体可以在网页中使用. 下载字体 在网上找字体下载,文件后缀名有 ttf.otf 等. 在 CSS 里加载字体 @font-face { font-fam ...
- 【转载】ansys中压力随时间变化的表格加载方法
原文地址:http://wenku.baidu.com/link?url=w9k94Upqbok0SUNU3L7LOLRDLUtP7W_KyQWK68ajK_nEbO00mO6hzbuBQ01rS07 ...