Javascript的数组与字典用法与遍历对象的属性技巧


Posted in Javascript onNovember 07, 2012

Javascript 的数组Array,既是一个数组,也是一个字典(Dictionary)。先举例看看数组的用法。

var a = new Array(); 
a[0] = "Acer"; 
a[1] = "Dell"; 
for (var i = 0; i < a.length; i++) { 
alert(a[i]); 
}

下面再看一下字典的用法。
var computer_price = new Array(); 
computer_price["Acer"] = 500; 
computer_price["Dell"] = 600; 
alert(computer_price["Acer"]);

我们甚至可以同样象上面那样遍历这个数组(字典)
for (var i in computer_price) { 
alert(i + ": " + computer_price[i]); 
}

这里的 i 即为字典的每个键值。输出结果为:
Acer: 500
Dell: 600

另外 computer_price 是一个字典对象,而它的每个键值就是一个属性。也就是说 Acer 是 computer_price 的一个属性。我们可以这样使用它:
computer_price.Acer

再来看一下字典和数组的简化声明方式。
var array = [1, 2, 3]; // 数组
var array2 = { "Acer": 500, "Dell": 600 }; // 字典
alert(array2.Acer); // 500
这样对字典的声明是和前面的一样的。在我们的例子中,Acer又是键值,也可是作为字典对象的属性了。

下面再来看看如何对一个对象的属性进行遍历。我们可以用 for in 来遍历对象的属性。

function Computer(brand, price) { 
this.brand = brand; 
this.price = price; 
} 
var mycomputer = new Computer("Acer", 500); 
for (var prop in mycomputer) { 
alert("computer[" + prop + "]=" + mycomputer[prop]); 
}

上面的代码中,Computer有两个属性,brand 和 price.所以输出结果为:
computer[brand]=Acer
computer[price]=500
上面的这种用法可以用来查看一个对象都有哪些属性。当你已经知道Computer对象有一个brand属性时,就可以用
mycomputer.brand
或 mycomputer[brand]
来获取属性值了。
总结:Javascript中的数组也可以用来做字典。字典的键值也是字典对象的属性。对一个对象的属性进行遍历时,可以用for in。

数组遍历与属性
虽然在 JavaScript 中数组是是对象,但是没有好的理由去使用 for in 循环 遍历数组。
相反,有一些好的理由不去使用 for in 遍历数组。
注意: JavaScript 中数组不是 关联数组。
JavaScript 中只有对象 来管理键值的对应关系。但是关联数组是保持顺序的,而对象不是。
由于 for in 循环会枚举原型链上的所有属性,唯一过滤这些属性的方式是使用hasOwnProperty 函数,
因此会比普通的 for 循环慢上好多倍。
遍历
为了达到遍历数组的最佳性能,推荐使用经典的 for 循环。

var list = [1, 2, 3, 4, 5, ...... 100000000]; 
for(var i = 0, l = list.length; i < l; i++) { 
console.log(list[i]); 
}

上面代码有一个处理,就是通过 l = list.length 来缓存数组的长度。
虽然 length 是数组的一个属性,但是在每次循环中访问它还是有性能开销。
可能最新的 JavaScript 引擎在这点上做了优化,但是我们没法保证自己的代码是否运行在这些最近的引擎之上。
实际上,不使用缓存数组长度的方式比缓存版本要慢很多。
length 属性
length 属性的 getter 方式会简单的返回数组的长度,而 setter 方式会截断数组。
var foo = [1, 2, 3, 4, 5, 6]; 
foo.length = 3; 
foo; // [1, 2, 3] 
foo.length = 6; 
foo; // [1, 2, 3]

译者注:
在 Firebug 中查看此时 foo 的值是: [1, 2, 3, undefined, undefined, undefined]
但是这个结果并不准确,如果你在 Chrome 的控制台查看 foo 的结果,你会发现是这样的: [1, 2, 3]
因为在 JavaScript 中 undefined 是一个变量,注意是变量不是关键字,因此上面两个结果的意义是完全不相同的。
// 译者注:为了验证,我们来执行下面代码,看序号 5 是否存在于 foo 中。
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 false
foo[5] = undefined;
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 true
为 length 设置一个更小的值会截断数组,但是增大 length 属性值不会对数组产生影响。
结论
为了更好的性能,推荐使用普通的 for 循环并缓存数组的 length 属性。
使用 for in 遍历数组被认为是不好的代码习惯并倾向于产生错误和导致性能问题。
Javascript 相关文章推荐
基于jquery的气泡提示效果
May 31 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
Angular短信模板校验代码
Sep 23 Javascript
JS正则中的RegExp对象对象
Nov 07 #Javascript
js模拟点击事件实现代码
Nov 06 #Javascript
js判断变量是否未定义的代码
Mar 28 #Javascript
jquery判断浏览器类型的代码
Nov 05 #Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 #Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 #Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 #Javascript
You might like
Yii中表单用法实例详解
2016/01/05 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python3.6简单反射操作示例
2018/06/14 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python列表解析操作实例总结
2020/02/26 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
高一家长会邀请函
2014/01/12 职场文书
考研英语复习计划
2015/01/19 职场文书
2015年采购部工作总结
2015/04/23 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS