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 相关文章推荐
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 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
Yii使用Captcha验证码的方法
2015/12/28 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
生日寿宴答谢词
2014/01/19 职场文书
就业协议书的作用
2014/04/11 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
慰问信范文
2015/02/14 职场文书
研究生简历自我评
2015/03/11 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python