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复选框CHECKBOX全选,取消全选
Aug 30 Javascript
javascript之Partial Application学习
Jan 10 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue中的inject学习教程
Apr 24 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
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
js获取指定的cookie的具体实现
2014/02/20 Javascript
jquery等待效果示例
2014/05/01 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
留学自荐信的技巧
2013/10/17 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
小摄影师教学反思
2014/04/27 职场文书
难忘的一天教学反思
2014/04/30 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
小学科学课教学反思
2016/02/23 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL