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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
js实现登录与注册界面
2017/11/01 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
浅谈对yield的初步理解
2017/05/29 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
巴西购物网站:Estrela10
2018/12/13 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
工作表扬信的范文
2014/01/10 职场文书
村道德模范事迹材料
2014/08/28 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014年度培训工作总结
2014/11/27 职场文书
母亲节主题班会
2015/08/14 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技