数组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 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
javascript arguments使用示例
Dec 16 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
js实现HTML中Select二级联动的实例
Jan 05 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
php递归函数怎么用才有效
2018/02/24 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python str与repr的区别
2013/03/23 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
浅谈Python中的bs4基础
2018/10/21 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python日志logging模块使用方法分析
2019/05/23 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
大学生村官事迹材料
2014/01/21 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
抢劫罪辩护词
2015/05/21 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS