数组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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
JavaScript实现切换多张图片
Jan 27 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
layui使用label标签的方法
2019/09/14 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
Python2.7 实现引入自己写的类方法
2018/04/29 Python
NumPy统计函数的实现方法
2020/01/21 Python
大学生职业规划书的范本
2014/02/18 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
期中考试后的感想
2015/08/07 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python