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对象转换为Jquery对象实现代码
Dec 29 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
JavaScript文档对象模型DOM
Nov 20 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python检测网络延迟的代码
2018/05/15 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python列表如何更新值
2020/05/27 Python
python中round函数如何使用
2020/06/19 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
简历的自我评价范文
2014/02/04 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
教师节班会主持词
2015/07/06 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript