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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
js添加事件的通用方法推荐
May 15 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Vue实现随机验证码功能
Dec 29 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
构建简单的Webmail系统
2006/10/09 PHP
php绘制一条直线的方法
2015/01/24 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
JS 判断代码全收集
2009/04/28 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
人事任命书怎么写
2014/06/05 职场文书
教师见习总结范文
2015/06/23 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript