数组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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
信息技术研修心得体会
2016/01/08 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
你知道Java Spring的两种事务吗
2022/03/16 Java/Android