数组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 相关文章推荐
JScript的条件编译
May 29 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 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中数字0和空值的区别分析
2014/06/05 PHP
php字符串过滤与替换小结
2015/01/26 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
总监职责范文
2013/11/09 职场文书
新三好学生主要事迹
2014/01/23 职场文书
C++程序员求职信范文
2014/04/14 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
车辆年检委托书范本
2014/10/14 职场文书
物流业务员岗位职责
2015/04/03 职场文书
2016春季运动会前导词
2015/11/25 职场文书
区域销售大会开幕词
2016/03/04 职场文书
五年级作文之想象作文
2019/10/30 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python