JavaScript在多浏览器下for循环的使用方法


Posted in Javascript onNovember 07, 2012

一、前言
JavaScript语言在不同的浏览器的下有存在细微的差异,但不像DOM操作差异那么大,现在为大家列举出其中一个"for循环"的差异,并介绍如何有效的解决这种差异。

二、问题描述
在下面的 测试代码 例1 中IE6和Chrome输出的结果是不一致,IE6不执行for语句里的代码

//例1: 
alert("准备测试toString是否被for循环枚举出来") 
var forTest = { toString: 1 } 
for (i in forTest) { 
alert("toString被循环出来")//在IE6下这是不执行的,但是在Chrome执行并输出结果值“1” 
}

三、分析问题
JavaScript中的对象包含了 'toString', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable','toLocaleString', 'hasOwnProperty', 'constructor'这7个内置方法。这7个内置方法用for语句是无法枚举出来的。但是IE6和Chrome对内置方法覆盖的支持不一致。
IE6:虽然 可以对其内置覆盖 方法,但是 FOR循环无法枚举 出来。
Chrome:可以对其内置覆盖 方法,FOR循环也能枚举出覆盖的内置方法。
所以上面的 测试代码 例1 中 IE6和Chrome浏览器输出结果不一致

四、解决问题
我们要解决上面描述的问题,我们要做二件事情:
用户使用的浏览器是否支持 FOR循环枚举出覆盖的内置方法
如何优雅的解决不兼容问题,使所有的浏览器都可以 FOR循环枚举出覆盖的内置方法
(解决代码 例2)

//例2: 
enumerables = true, 
forTest = { toString: 1 } 
for (i in forTest) { 
enumerables = null; 
} 
if (enumerables) {//这些都是Object对象的属性,有的浏览器(ie6)的for循环不会把这些属性给遍历出来,所以要手功的把属性遍历出来 
enumerables = ['hasOwnProperty', 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable', 
'toLocaleString', 'toString', 'constructor']; 
} //如果enumerables为null则浏览器支持枚举覆盖的内置方法,否则只能如下面的代码强制的把内置方法复制到新的对象中。 
/** 
* 所有属性复制到指定的对象 
* @param {Object} object 待合并的对象 
* @param {Object} config 来源属性 
* @return {Object} 返回合并后的对象 
*/ 
function apply(object, config) { 
if (object && config && typeof config === 'object') { 
var i, j, k; 
//这里正常的复制对象的方法 
for (i in config) { 
object[i] = config[i]; 
} 
//兼容多浏览器把内置的属性都能重制新的对象中 
if (enumerables) { 
for (j = enumerables.length; j--;) { 
k = enumerables[j]; 
if (config.hasOwnProperty(k)) {//判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,config.hasOwnProperty("toString")) 
object[k] = config[k]; 
} 
} 
} 
} 
return object; 
};

现在编写几个测试代码,来验证我们成果 (测试代码 例3)
//例3: 
var a={}; 
for (i in forTest) { 
a[i] = forTest[i]; 
} 
alert(a.toString) //ie6下复制失败只能输入"native code",并不是输出我们覆盖的值 
var b=apply({},forTest) 
alert(b.toString)//使用apply函数,在IE6和Chrome输出的值都是我们预期想得到的覆盖值”1“

五、总结
笔者猜测在IE6里的for语句把那7个内置函数标识到忽略列表,所以怎么覆盖也不能在for中枚举出来,而Chrome就能够智能的把覆盖后的内置函数复制出来。
使用解决代码 例2 中的apply函数即可解决多浏览器下for循环不一致的问题 。
笔者是个菜鸟,也很少写博客,如果我表达观点的有错,或者有笔误,还请肯请大鸟们纠正错误。

六、常见问题
问:为什么不先判断浏览器的版本是否为IE6,在来设置对应的枚举方案呢?
答:我个人的观点是,我不确定市场那么多的浏览器(PC机就有N种浏览器,还有手机浏览器,以后也不知道还有什么新版本的浏览器)分别是用什么机制的for语制。所以就先测试那的for语句的机制。

Javascript 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
javascript实现动态标签云
Oct 16 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
Jan 08 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 #Javascript
JS正则中的RegExp对象对象
Nov 07 #Javascript
js模拟点击事件实现代码
Nov 06 #Javascript
js判断变量是否未定义的代码
Mar 28 #Javascript
jquery判断浏览器类型的代码
Nov 05 #Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 #Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 #Javascript
You might like
高亮度显示php源代码
2006/10/09 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
使用PHP实现密保卡功能实现代码<打包下载直接运行>
2011/10/09 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
python实现bitmap数据结构详解
2014/02/17 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Python 文件处理注意事项总结
2017/04/10 Python
python中hashlib模块用法示例
2017/10/30 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
双创工作实施方案
2014/03/26 职场文书
国际贸易实训报告
2014/11/05 职场文书
工作收入证明模板
2015/06/12 职场文书
导游词之井冈山
2019/11/20 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python