数组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 相关文章推荐
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
说说Vuex的getters属性的具体用法
Apr 15 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
简单了解three.js 着色器材质
Aug 03 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
jsTree使用记录实例
2016/12/01 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
python读写二进制文件的方法
2015/05/09 Python
django 多数据库配置教程
2018/05/30 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python sorted排序方法如何实现
2020/03/31 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
小学一年级评语大全
2014/04/22 职场文书
参赛口号
2014/06/16 职场文书
网络技术专业求职信
2014/07/13 职场文书
2015年校长新年寄语
2014/12/08 职场文书
南京大屠杀观后感
2015/06/02 职场文书
python实现自动化群控的步骤
2021/04/11 Python
PHP实现两种排课方式
2021/06/26 PHP