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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
javascript学习小结之prototype
Dec 03 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 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 MySQL与分页效率
2008/06/04 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
集团公司人力资源部岗位职责
2014/01/03 职场文书
公司管理建议书范文
2014/03/12 职场文书
销售口号大全
2014/06/11 职场文书
老公保证书怎么写
2015/02/26 职场文书
雷锋观后感
2015/06/10 职场文书
关于环保的广播稿
2015/12/17 职场文书