JavaScript中for-in遍历方式示例介绍


Posted in Javascript onFebruary 11, 2014

摘要:for-in遍历方式的循环计数器是字符串类型,遍历对象时为对象属性/方法名,遍历数组时为数组元素下标索引,与普通的for循环不同,for-in会将继承的属性/方法列出,这一点在使用时需要特别关注。

除了传统的for循环,JavaScript为遍历操作定义了for-in方式,根据数据源的不同,在使用时存在差异。
(1)遍历对象:

var fish = { 
head : 1, 
tail : 1, 
} 
for(var prop in fish) { 
console.log(fish[prop]); 
}

调试时观察:prop依次为'head','tail',即遍历对象属性时是以字符串类型存在的,循环计数器为对象的属性名。
(2)遍历数组
var arr = ['one', 'two', 'three']; 
for(var prop in arr) { 
console.log(prop); 
}

调试时观察:prop依次为'0','1',即遍历数组时仍是以字符串类型存在,不同的是循环计数器为数组元素的下标。(这时可以试试用for循环输出,结果与for-in是一致的)
如果代码中加入:
if(Object.prototype.clone === 'undefined') 
Object.prototype.clone = function() {};

则输出结果为:0,1,clone
如果这时用for循环输出,则仍为0,1;也就是说for-in循环会将当前操作的数据源所属类型具有的属性遍历出来(同样对对象fish用for-in时,也会输出clone),所以就要求在使用for-in遍历时拉着一根弦:如果仅对对象自有属性操作,需要将继承来的属性加以剔除,比如用hasOwnProperty()方法。
Javascript 相关文章推荐
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JavaScript闭包详解
Feb 02 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Vue实现导航栏的显示开关控制
Nov 01 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 #Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 #Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 #Javascript
js读取配置文件自写
Feb 11 #Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 #Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 #Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP微信API接口类
2016/08/22 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
python基础教程之Filter使用方法
2017/01/17 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
室内设计专业个人的自我评价
2013/10/19 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
实习单位鉴定评语
2014/04/26 职场文书
环保倡议书怎么写
2014/05/16 职场文书
公司活动总结怎么写
2014/06/25 职场文书
应聘护士求职信
2014/07/21 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
音乐课外活动总结
2015/05/09 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers