JavaScript中for..in循环陷阱介绍


Posted in Javascript onNovember 12, 2013

大家都知道在JavaScript中提供了两种方式迭代对象:
(1)for 循环;
(2)for..in循环;
使用for循环进行迭代数组对象,想必大家都已经司空见惯了。但是,使用for.. in循环时,大家可要注意了,为什么这么说呢?大家听我娓娓道来....
javascript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for...in循环中的循环计数器是字符串,而不是数字。它包含当前属性的名称或当前数组元素的索引。
案例一:

//使用for..in循环遍历对象属性 
varperson={ 
name: "Admin", 
age: 21, 
address:"shandong" 
}; 
for(vari in person){ 
console.log(i); 
}

执行结果为:
name
age
address
当遍历一个对象的时候,变量 i 也就是循环计数器 为 对象的属性名
//使用for..in循环遍历数组 
vararray = ["admin","manager","db"] 
for(vari in array){ 
console.log(i); 
}

执行结果:
0
1
2
当遍历一个数组的时候,变量 i 也就是循环计数器 为 当前数组元素的索引
案例二:
但是,现在看来for .. in循环还挺好用啊,不过,别高兴太早,看看下面的例子:
var array =["admin","manager","db"]; 
//给Array的原型添加一个name属性 
Array.prototype.name= "zhangsan"; 
for(var i in array){ 
alert(array[i]); 
}

运行结果:
admin
manager
db
zhangsan
咦,奇观了,怎么平白无故的冒出来一个zhangsan
现在,再看看使用 for循环会怎样?
vararray = ["admin","manager","db"]; 
//给Array的原型添加一个name属性 
Array.prototype.name = "zhangsan"; 
for(var i =0 ; i<array.length; i++){ 
alert(array[i]); 
};

运行结果:
admin
manager
db
哦, 现在明白了,for..in循环会把某个类型的原型(prototype)中方法与属性给遍历出来,所以这可能会导致代码中出现意外的错误。为了避免这个问题,我们可以使用对象的hasOwnProperty()方法来避免这个问题,如果对象的属性或方法是非继承的,那么hasOwnProperty() 方法返回true。即这里的检查不涉及从其他对象继承的属性和方法,只会检查在特定对象自身中直接创建的属性。
案例三:
vararray = ["admin","manager","db"]; 
Array.prototype.name= "zhangshan"; 
for(vari in array){ 
//如果不是该对象自身直接创建的属性(也就是该属//性是原型中的属性),则跳过显示 
if(!array.hasOwnProperty(i)){ 
continue; 
} 
alert(array[i]); 
}

运行结果:
admin
manager
db
一切又完好如初,哎,不知道,同志们看完有什么感受,是不是有种“拨开云雾见晴天”的感觉啊,呵呵
Javascript 相关文章推荐
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 #Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 #Javascript
jquery 模板的应用示例
Nov 12 #Javascript
jQuery 无刷新分页实例代码
Nov 12 #Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 #Javascript
JS实现遮罩层效果的简单实例
Nov 12 #Javascript
javascript静态页面传值的三种方法分享
Nov 12 #Javascript
You might like
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
python处理html转义字符的方法详解
2016/07/01 Python
python3字符串操作总结
2019/07/24 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
分享一个python的aes加密代码
2020/12/22 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
大一学生职业生涯规划
2014/03/11 职场文书
活动总结怎么写
2014/04/28 职场文书
社区科普工作方案
2014/06/03 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
擅自离岗检讨书
2014/09/12 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
信访维稳承诺书
2015/05/04 职场文书