数组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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
js清空form表单中的内容示例
May 20 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
JS数组属性去重并校验重复数据
Jan 10 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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
无线电广播的开始
2002/01/30 无线电
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
深入理解node.js http模块
2018/01/24 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python 魔法函数实例及解析
2019/09/25 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
财务务虚会发言材料
2014/10/20 职场文书
小学毕业感言200字
2015/07/30 职场文书
会议主持词通用版
2019/04/02 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
nginx实现动静分离的方法示例
2021/11/07 Servers
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs