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 表单的友好用户体现
Jan 07 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
js实现简单选项卡制作
Aug 05 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 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
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python中的字典详细介绍
2014/09/18 Python
Python批量发送post请求的实现代码
2018/05/05 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
主要的Ajax框架都有什么
2013/11/14 面试题
工作中个人的自我评价
2013/12/31 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
同意离婚答辩状
2015/05/22 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
教你使用TensorFlow2识别验证码
2021/06/11 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
nginx.conf配置文件结构小结
2022/04/08 Servers