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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
网页自动跳转代码收集
Sep 27 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
javascript Object与Function使用
2010/01/11 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
Vue header组件开发详解
2018/01/26 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python实现二分查找算法
2020/09/18 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏