数组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字符串截取函数实例
Dec 27 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
JS 对象介绍
2010/01/20 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
numpy自动生成数组详解
2017/12/15 Python
Python自定义一个异常类的方法
2019/06/27 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
文明单位创建材料
2014/12/24 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
运动会3000米加油稿
2015/07/21 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle