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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 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
PHP读取MySQL数据代码
2008/06/05 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
JavaScript 参考教程
2006/12/29 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
js图片放大镜效果实现方法详解
2020/10/28 Javascript
深入理解vue Render函数
2017/07/19 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python 检测图片是否有马赛克
2020/12/01 Python
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
Linux常见面试题
2013/03/18 面试题
乔迁之喜主持词
2014/03/27 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
企业文明单位申报材料
2014/05/16 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
优秀党员推荐材料
2014/12/18 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
新教师教学工作总结
2015/08/12 职场文书
2017新年晚会开幕词
2016/03/03 职场文书