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 TextArea动态显示剩余字符
Oct 22 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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/03 日漫
thinkphp 多表 事务详解
2013/06/17 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
详解redux异步操作实践
2018/08/15 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
英国精品买手店:Browns Fashion
2016/09/29 全球购物
自荐信范文
2013/12/10 职场文书
电子商务个人自荐信
2013/12/12 职场文书
军训 自我鉴定
2014/02/03 职场文书
学校门卫岗位职责
2014/03/16 职场文书
《分一分》教学反思
2014/04/13 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
创业女性典型材料
2014/05/02 职场文书
暑期家教宣传单
2015/07/14 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
人民币符号
2022/02/17 杂记
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS