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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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开发环境配置记录
2011/01/14 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
菜单效果
2006/10/14 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
python中去空格函数的用法
2014/08/21 Python
python之Character string(实例讲解)
2017/09/25 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python实现二维插值的三维显示
2018/12/17 Python
python sorted方法和列表使用解析
2019/11/18 Python
django框架forms组件用法实例详解
2019/12/10 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Python可以实现栈的结构吗
2020/05/27 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
党员培训思想汇报
2014/01/07 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
JavaScript原型链详解
2021/11/07 Javascript
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫