数组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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
原生js实现日历效果
Mar 02 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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实现基于PDO的预处理示例
2017/03/28 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
一个超级简单的python web程序
2014/09/11 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python 实现list或string按指定分段
2019/12/25 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
努比亚手机官网:nubia
2016/10/06 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
大学生职业生涯规划书参考模板
2014/03/05 职场文书
食品业务员岗位职责
2014/03/18 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
小学感恩节活动总结
2015/03/24 职场文书
党员反邪教心得体会
2016/01/15 职场文书