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 相关文章推荐
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 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学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
基于jQuery的图片剪切插件
2011/08/03 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
在Python中使用元类的教程
2015/04/28 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
简单了解Python生成器是什么
2019/07/02 Python
如何基于python操作json文件获取内容
2019/12/24 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
硕士研究生个人求职信
2013/12/04 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS