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事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
js+css3实现旋转效果
Jan 20 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
js实现左右轮播图
Jan 09 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
jQuery实现日历效果
Sep 11 jQuery
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基础学习之变量的使用
2011/06/09 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
Javascript this指针
2009/07/30 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
vue实现微信获取用户信息的方法
2019/03/21 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
微信小程序如何自定义table组件
2019/06/29 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python 字符串常用方法汇总详解
2019/09/16 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
大学新闻系求职信
2014/06/03 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫