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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
javascript常用功能汇总
Jul 05 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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
给多个地址发邮件的类
2006/10/09 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Angular2之二级路由详解
2018/08/31 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python实现批量压缩图片
2018/01/25 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
Python中常用的os操作汇总
2020/11/05 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
Ajax和javascript的区别
2013/07/20 面试题
营销经理工作检讨书
2014/11/03 职场文书
自我评价优缺点范文
2015/03/11 职场文书
小学推普周活动总结
2015/05/07 职场文书
教你用python控制安卓手机
2021/05/13 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript