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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
Vue 的 v-model用法实例
Nov 23 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
Dedecms常用函数解析
2008/02/01 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python实现Decorator模式实例代码
2018/02/09 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
机关道德讲堂实施方案
2014/03/15 职场文书
校园活动宣传方案
2014/03/28 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
地道战观后感400字
2015/06/04 职场文书
食堂卫生管理制度
2015/08/04 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
安全生产培训心得体会
2016/01/18 职场文书
责任书格式
2019/04/18 职场文书
z-index不起作用
2021/03/31 HTML / CSS