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函数般调用正则
Apr 08 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
js工具方法弹出蒙版
May 08 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
js获取Get值的方法
2016/09/29 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
python测试驱动开发实例
2014/10/08 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python使用opencv进行人脸识别
2017/04/07 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python hmac模块使用实例解析
2019/12/24 Python
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
财务管理专业推荐信
2013/11/19 职场文书
管理标语大全
2014/06/24 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2015年见习期工作总结
2014/12/12 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python