谈谈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 的判断. 以下是不正确的 ...
随机推荐
- markdown编辑
有用的技巧之,如何实现首行空两格,把输入法切换成全角(shift+space),就可以实现一个两字符的空格了. 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 w s r s r s 文本 ...
- kettle
Kettle(中文名称叫水壶)是一款ETL工具,纯java编写,可以在Window.Linux.Unix上运行,绿色无需安装,数据抽取高效稳定.Kettle家族包括4个产品:Spoon.Pan.CHE ...
- mysql 游标嵌套循环实例
BEGIN #Routine body goes here... ####所有的2个小时之前生成的待支付订单更新为已过期 DECLARE tmp_id INT; DECLARE tmp_order_i ...
- TFS2012常见问题及解答
1.删除workItem工作项(包括Bug,用户场景,任务等) 需要利用到witadmin工具,目录在cd %programfiles%\Microsoft Visual Studio 11.0\Co ...
- Xcode7中添加3DTouch
首先是插件SBShortcutMenuSimulator的安装 1.git clone https://github.com/DeskConnect/SBShortcutMenuSimulator.g ...
- java新手笔记27 监听器类
1.外部类监听 package com.yfs.javase; import java.awt.Button; import java.awt.FlowLayout; import java.awt. ...
- QMessageBox 在MAC下更加自然
说明 在MAC写过QT程序的程序员应该都知道,QT默认的QMessageBox没有MAC系统的效果,在网上找到了一篇关于这方面的文章,但是这篇文章写的有个缺点,就是使用信号的方式,使用起来很不方便. ...
- 输入与enter
#include<iostream> using namespace std; int main() { char a,b,c; while(scanf("%c%c%c" ...
- 【Linux】rsync同步文件 & 程序自启动
rsync使用 1. 为什么使用rsync? rsync解决linux系统下文件同步时, 增量同步问题. 使用场景: 线上需要定时备份数据文件(视频资源), 使用rsync完成每天的增量备份. 参见: ...
- 转载 C# BindingSource
1.引言 BindingSource组件是数据源和控件间的一座桥,同时提供了大量的API和Event供我们使用.使用这些API我们可以将Code与各种具体类型数据源进行解耦:使用这些Event我们可以 ...