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 需要注意的地方的更多相关文章

  1. 简单谈谈js中的MVC

    MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): ...

  2. 谈谈JS中的高级函数

    博客原文地址:Claiyre的个人博客如需转载,请在文章开头注明原文地址 在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅 ...

  3. 谈谈JS中的原型

    不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O( ...

  4. 谈谈JS中的函数节流

    好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...

  5. [转] 谈谈JS中的函数节流

    函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间.连续尝试进行过多的DOM 相关操作可能会导致浏览 ...

  6. 简单谈谈js中Promise的用法

    首先先推荐一篇博文:http://blog.csdn.net/jasonzds/article/details/53717501 这篇博文很清晰的说明了Promise的用法,这里来简单总结一下: Pr ...

  7. 初识js中的闭包

    今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...

  8. 晨叔技术晨报: 你真的搞懂JS中的“值传递”和“引用传递”吗?

    晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报来,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来 ...

  9. JS 中如何判断 undefined 和 null

    JS 中如何判断 undefined JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正确的 ...

随机推荐

  1. svn 分支整个项目合并主干

    1.首先主干要更新最新版本. 2.找到主干(trunk)点击右键--合并--合并类型选择(合并一个版本范围)点击下一步--合并源选择整个分支项目--将要合并的修改版本范围(选择指定(a)范围)点击下一 ...

  2. SQL中PERSISTED关键字

    PERSISTED 指定 SQL Server 数据库引擎将在表中物理存储计算值,而且,当计算列依赖的任何其他列发生更新时对这些计算值进行更新.将计算列标记为 PERSISTED,可允许您对具有确定性 ...

  3. .Net 微信开发与微信支付

    .NET     https://github.com/JeffreySu/WeiXinMPSDK JAVA   http://git.oschina.net/pyinjava/fastweixin ...

  4. Cocoa框架中的内存分区

    NSObject对象类实例为我们提供了两种分配内存的方式:alloc和allocWithZone:.alloc的实现也是为了调用allocWitZone:,它传入了一个默认的zone.所以明确的说,N ...

  5. 使用JS调用WebService接口

    <script> $(document).ready(function () { var username = "admin"; var password = &quo ...

  6. host文件的作用和介绍

    在Window系统中有个Hosts文件(没有后缀名)在Windows98系统下该文件在Windows目录,在Windows2000/XP系统中位于C:\Winnt\System32\Drivers\E ...

  7. COM原理

    1, 进程内组件:服务程序杯加载到客户的进程空间,通常是DLL的形式.本地组件:服务程序与与客户程序在同一台电脑上,通常是EXE.远程组件: 服务程序与与客户程序在不同的电脑上,可以是DLL模块也可是 ...

  8. rsync命令(同步/备份数据)

    rsync命令rsync命令是一个远程数据同步工具,可通过 lam/wan快速同步多台主机间的文件.rsync使用所谓的 "rsync算法"来使用本地和远程两个主机之间的文件达到同 ...

  9. discuz 注册用户用到的几个表

    通过开启记录:mysql记录日志,筛出如下信息: INSERT INTO `userclub`.pre_ucenter_members SET secques='', username='pthlp1 ...

  10. Django Tutorial 学习笔记

    实际操作了Django入门教程中的范例,对一些细节有了更清晰的掌握.感觉只看文档不动手是不行的,只看文档没法真正掌握其中要素之间的关系,看了很多遍也不行,必须动手做了才能掌握.同时,这次练习在Ecli ...