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 firefox兼容ie的dom方法脚本
May 18 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
js实现select下拉框选择
Jan 11 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用正则判断是否为数字的方法
2016/03/25 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
什么是Rollback Segment
2013/04/22 面试题
楼面经理岗位职责范本
2014/02/18 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
运动会广播稿50字
2015/08/19 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers