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创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
对Session和Cookie的区分与解释
2007/03/16 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JavaScript"模拟事件"的注意要点详解
2019/02/13 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
目前最全的python的就业方向
2018/06/05 Python
python实现猜单词小游戏
2020/05/22 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
过滤器的用法
2013/10/08 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
苏州园林导游词
2015/02/03 职场文书
导游词之岳阳楼
2019/09/25 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js