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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
vue实现购物车选择功能
Jan 10 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
一个JS翻页效果
2007/07/23 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
Python基于动态规划算法计算单词距离
2015/07/25 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python 常见的排序算法实现汇总
2020/08/21 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
中学生国旗下讲话稿
2014/04/26 职场文书
娱乐节目策划方案
2014/06/10 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL