谈谈js中for in 需要注意的地方
js中for in 可以遍历对象或数组的显性属性,也就是说我们自己定义的属性是可以遍历的,那些原型上默认已有的属性,例如:Object.prototype.toString、Object.prototype.hasOwnProperty 是遍历不出来的。
for in 的基本规则如上,不过还有“坑”的地方需要我们注意:
1、for in循环出的值不一定是按顺序的。代码如下:
var b = {3:1,42:2,11:3}
for( var key in b ){
alert( b[key] )
}
低版本浏览器弹窗的顺序是:1、2、3。现代浏览器弹窗的顺序是1、3、2。
2、在原型上加扩展方法,会被for in 出来。代码如下:
Object.prototype.test = "I am test"
var b = {"name":"txj"}
for( var key in b ){
alert(key + " : "+ b[key])
}
我们手动加在原型上的方法,for in的时候会被遍历出来。一般我们遍历对象并不需要其原型的属性,所以遍历时最好Object.prototype.hasOwnProperty方法进行判断。
3、在实例中定义原型中已有的方法,浏览器for in 情况不一致。代码如下:
var b = {"name":"txj"}
b.toString = function(){ alert("I am toString") }
for( var key in b ){
alert(key + " : "+ b[key])
}
我们给b实例加了一个原型上已有的方法toString。现代浏览器能循环出toString 低版本浏览器却不能。所以给实例定属性名时,不要和原型已有的一致。
4、各浏览器循环出的属性顺序不同。代码与2中的一样:
Object.prototype.test = "I am test"
var b = {"name":"txj"}
for( var key in b ){
alert(key + " : "+ b[key])
}
现代浏览器先循环实例中的属性,再循环原型中的属性。低版本浏览器相反。
这让我想到了jQuery对$.isPlainObject()方法实现的一段代码:
// Own properties are enumerated firstly, so to speed up,
// if last one is own, then all properties are own.
var key
for ( key in obj ) {}
return key === undefined || hasOwn.call( obj, key );
它这里说如果一个对象的最后一个属性是实例自己的属性,那么所有的属性都是实例自己的属性。这对低版本浏览器来说应该是不对的。所以jquery后来又加了如下代码修复:
// Support: IE<9
// Handle iteration over inherited properties before own properties.
if ( support.ownLast ) {
for ( key in obj ) {
return hasOwn.call( obj, key );
}
}
最后想吐槽一下,一般不要在原型上加自定义方法;数组的循环一般不用for in 。哈哈!
谈谈js中for in 需要注意的地方的更多相关文章
- 简单谈谈js中的MVC
MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): ...
- 谈谈JS中的高级函数
博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...
- 谈谈JS中的原型
不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O( ...
- 谈谈JS中的函数节流
好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...
- [转] 谈谈JS中的函数节流
函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间.连续尝试进行过多的DOM 相关操作可能会导致浏览 ...
- 简单谈谈js中Promise的用法
首先先推荐一篇博文:http://blog.csdn.net/jasonzds/article/details/53717501 这篇博文很清晰的说明了Promise的用法,这里来简单总结一下: Pr ...
- 初识js中的闭包
今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...
- 晨叔技术晨报: 你真的搞懂JS中的“值传递”和“引用传递”吗?
晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报来,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来 ...
- JS 中如何判断 undefined 和 null
JS 中如何判断 undefined JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正确的 ...
随机推荐
- Android Studio 快捷方式
Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+Insert 生成代码(如g ...
- PSP个人软件开发工具需求分析文档
第一部分:前景与范围 1.业务需求 1.1 背景 在目前的软件项目开发过程中,进度计划总是非常不准确,经常出现延期,而且大多数都无法给出一个相对比较准确的延迟时间.即使使用用例包.用例的方式组织需求, ...
- windows 7 64 bit 使用 virtual box 的经验
本人电脑是联想thinkpad E535的机子,安装的是64bitwindows7 旗舰版 为了更好的工作,我安装了虚拟机virtualbox最新版 很不幸,我出现了多次蓝屏的情况,我换到32位系统下 ...
- Koajs原理
Koajs让习惯阻塞式代码写法的同学感到很舒服,再也不用盖楼式的callback了,而且也不需要学习Promise的then,catch这些新东西. 但实际上,Koajs这样的写法有点像是语言的语法糖 ...
- CSS 初体验之一
层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式. 1.首先先看盒装模型,如下图,平时设置的width,height是指元素内容(con ...
- 从0开始学习react(三)
这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- 编程语言中的Namespace
Namespace 1.C struct 2.C++(Pronounced 'see jia-jia' or 'see plus-plus') namespace 3.Python module(s) ...
- android源码-安卓源码-Android源码下载-安卓游戏源码
android源码 高仿精仿金山手机卫士应用源码V1.2 高仿精仿金山手机卫士应用源码,该应用的级别实现了金山卫士的级别功能了,可以说跟现实中我们使用的金山卫士应用的功能几乎差不 人气:9286 ...
- Hibernate的单向OneToMany、单向ManyToOne
单向OneToMany 一个用户有多张照片,User----->Images是一对多关系,在数据库中Images维护一个外键useid 1.在映射关系的主控方Image这边,我们什么都不做.(为 ...