数组Array进行原型prototype扩展后带来的for in遍历问题


Posted in Javascript onFebruary 07, 2010

通常在JavaScript中用for与for in遍历数组结果是没有什么区别的,它的循环变量i都是从0开始的数组索引(for in如果遍历的是非数组对象的属性集合,则这个i就是属性名,或称之为key)。另外要注意一点是:用for in遍历数组,循环变量i是字符串类型的。如果对Array进行原型扩展后,再用for in来对数组进行遍历时就要注意些问题了。
测试代码:

Array.prototype.max = function() 
{ 
return Math.max.apply({}, this); 
}; 
var company = ['Adobe','Apple','Google','Intel','Microsoft','Oracle','IBM','SUN']; 
alert(company.length); //这里输出的长度是8,与上面定义的数组长度一致 
//下面循环了9次,在IE6、IE7第一次循环时i值不是0而是上面原型扩展的方法名max,而在IE8、FF浏览器最后一次循环时i值才为max 
for (var i in company) 
{ 
alert('index is:'+i+'\nvalue is:'+company[i]); 
} 
//此时,你若仅想打印上面8个公司列表,用for in循环是不行了,即使你非要这样做,也要在循环内部做点判断,比如像下面这样: 
for (var i in company) 
{ 
if (!isNaN(i)) 
alert('index is:'+i+'\nvalue is:'+company[i]); 
} 
//当然,为了安全起见,也不要那么懒,就写成普通的for循环才是最科学的,像下面这样: 
for (var i=0; i< company.length; i++) 
{ 
alert('index is:'+i+'\nvalue is:'+company[i]); 
} 
//这种对数组原型扩展属性带来的循环问题通常是导致你得不到预期的结果,但不注意也可能给你代码带来难以发现的问题,看看下面的例子: 
var userInfo = [["Tom",21,"020-12345678"],["Mike",23,"020-87654321"]]; //显然这里是数组嵌套 
for (var i in userInfo) 
{ 
//此时通过userInfo[i][0]可能根本得不到你预想的值,比如在这个循环中,你将看到有一次值为undefined的结果,这是因为当i值为max时,userInfo[i]是一个function而不是像这样的子数组 ["Tom",21,"020-12345678"] 
alert('Name:' + userInfo[i][0] + '\nAge:' + userInfo[i][1] + '\nPhone:' + userInfo[i][2]); 
}

一般来说for in是用来遍历对象属性的,而数组还是要用for来遍历(当然数组也是对象)。据了解,for要比for in的遍历效率高,另外像C#、ActionScript3.0还有foreach循环,这将是效率最高的循环,不过JavaScript没有这种循环。最科学的数组遍历应该像这样:使用普通的for循环,而且预存数组长度。代码如下:
var company = ['Adobe', 'Apple', 'Google', 'Intel', 'Microsoft', 'Oracle', 'IBM', 'SUN']; 
for (var i = 0, companyNum = company.length; i < companyNum; i++) 
{ 
alert('index is:' + i + '\nvalue is:' + company[i]); 
}

作者:WebFlash
出处:http://webflash.cnblogs.com
Javascript 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 #Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 #Javascript
一些mootools的学习资源
Feb 07 #Javascript
Js 中debug方式
Feb 07 #Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 #Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 #Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 #Javascript
You might like
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
使用vue构建一个上传图片表单
2017/07/04 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
Vue快速实现通用表单验证功能
2019/12/05 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
python 列表降维的实例讲解
2018/06/28 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2015年教师节感言
2015/08/03 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
浅谈Python基础之列表那些事儿
2021/05/11 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS