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获取父节点方法
Aug 20 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
Javascript的闭包详解
Dec 26 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
BootStrap中的表单大全
Sep 07 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
JS实现点击掉落特效
Jan 29 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图像处理类库MagickWand用法实例分析
2015/05/21 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
基于php编程规范(详解)
2017/08/17 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
Seajs源码详解分析
2019/04/02 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
你准备好迎接vue3.0了吗
2020/04/28 Javascript
python logging类库使用例子
2014/11/22 Python
python字符串连接方法分析
2016/04/12 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
测控技术自荐信
2014/06/05 职场文书
中药学自荐信
2014/06/15 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
功夫熊猫观后感
2015/06/10 职场文书