数组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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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无法实现多线程的问题
2015/09/25 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python中的列表知识点汇总
2015/04/14 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python代码能做成软件吗
2020/07/24 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
安全生产管理责任书
2014/04/16 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
新学期感想
2015/08/10 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技