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 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
简单实现PHP留言板功能
2016/12/21 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python发送伪造的arp请求
2014/01/09 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
摄影助理岗位职责
2014/02/07 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
收费员岗位职责
2015/02/14 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
广播体操比赛主持词
2015/06/29 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL