数组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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
Vue.js实现备忘录功能
Jun 26 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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
JavaScript学习笔记之JS对象
2015/01/22 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
python计算时间差的方法
2015/05/20 Python
Python运算符重载用法实例分析
2015/06/01 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
解析Python的缩进规则的使用
2019/01/16 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
Python如何定义接口和抽象类
2020/07/28 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
工作表现评语
2014/01/19 职场文书
幼师小班个人总结
2015/02/12 职场文书
爱的教育观后感
2015/06/17 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android