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中this的使用说明
Sep 06 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
Angular模板表单校验方法详解
Aug 11 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
小程序自动化测试的示例代码
Aug 11 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
php异常处理使用示例
2014/02/25 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
javascript Keycode对照表
2009/10/24 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
JS中数据结构之栈
2019/01/01 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
python对数组进行反转的方法
2015/05/20 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python字典改变value值方法总结
2019/06/21 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
支部组织生活会方案
2014/06/10 职场文书
会计主管竞聘书
2015/09/15 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书