数组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 相关文章推荐
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
JS如何生成动态列表
Sep 22 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 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函数解决SQL injection
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
PHPThumb图片处理实例
2014/05/03 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
python创建进程fork用法
2015/06/04 Python
python中的lambda表达式用法详解
2016/06/22 Python
python之Socket网络编程详解
2016/09/29 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python批量下载抖音视频
2019/06/17 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
Java和Javasciprt的区别
2012/09/02 面试题
金讯Java笔试题目
2013/06/18 面试题
新三好学生主要事迹
2014/01/23 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
仓库保管员岗位职责
2015/02/09 职场文书