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高级程序设计 事件学习笔记
Sep 10 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
webpack 模块热替换原理
Apr 09 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
three.js 将图片马赛克化的示例代码
Jul 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
php 文本文件的读取效率
2012/02/10 PHP
php多文件上传下载示例分享
2014/02/20 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
node.js超时timeout详解
2014/11/26 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python实现堆栈与队列的方法
2015/01/15 Python
python执行get提交的方法
2015/04/29 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
ipython和python区别详解
2019/06/26 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python numpy数组复制使用实例解析
2020/01/10 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
大学生个人求职信例文
2014/07/07 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python