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 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
window.onload使用指南
Sep 13 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Pycharm更换python解释器的方法
2018/10/29 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
国际会议邀请函范文
2014/01/16 职场文书
房地产开盘策划方案
2014/02/10 职场文书
给老婆的保证书范文
2014/04/28 职场文书
亲属关系公证书样本
2015/01/23 职场文书
运动会100米加油稿
2015/07/21 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers