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 相关文章推荐
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
PHP PDO操作总结
Nov 17 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
js html实现计算器功能
Nov 13 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
javascript实现简单留言板案例
Feb 09 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/04/02 无线电
javascript下过滤数组重复值的代码
2007/09/10 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
详解python中的 is 操作符
2017/12/26 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
使用tensorflow实现线性回归
2018/09/08 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
个人简历中自我评价
2014/02/11 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
goland 恢复已更改文件的操作
2021/04/28 Golang