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 相关文章推荐
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
js微信分享实现代码
2020/10/11 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
js实现转动骰子模型
2019/10/24 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python psutil监控进程实例
2019/12/17 Python
python实现实时视频流播放代码实例
2020/01/11 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
《九寨沟》教学反思
2014/04/08 职场文书
公司年会策划方案
2014/05/17 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
商场促销活动策划方案
2014/08/18 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年党务工作总结
2014/11/25 职场文书