首页 web前端 js教程 javascript中for与for in区别,以及为什么不推荐使用for in

javascript中for与for in区别,以及为什么不推荐使用for in

Jul 17, 2017 pm 02:13 PM
javascript js 为什么

js中遍历数组的有两种方式

var array=['a']
//标准的
for循环
for(var i=1;i<array.length;i++){
    alert(array[i])
}
//
foreach
循环
for(var i in array){
    alert(array[i])
}
登录后复制

正常情况下上面两种遍历数组的方式结果一样。首先说两者的第一个区别

标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为对象。自己试试 alert(typeof i);这个区别是小问题。现在我加上如下代码,上面的执行结果就不一样了。

//扩展了js原生的Array
Array.prototype.test=function()
 
}
登录后复制

试试看上面的代码执行什么。我们发现标准的for循环任然真正的对数组循环, 但是此时foreach循环对我刚才写的test方法写打印出来了。这就是for与foreach遍历数组的最大区别,如果我们在项目采用的是用foreach遍历数组,假设有一天谁不小心自己为了扩展js原生的Array类,或者引入一个外部的js框架也扩展了原生Array。那问题就来了。

为什么不要用for in语句 ?

关键词:原生Array类、扩展Array类
for in 语句对数组对象进行遍历潜在的bug在于:如果原生Array类被其他的js脚本库进行了原型扩展(比如多加一个toJSON方法即Array.prototype.toJSON=xxxx),那么用for in遍历扩展后的Array对象的逻辑将与遍历原生Array对象的逻辑发生差异。
举个简单的例子,

var x=[1]; 
for(var s in x){ 
alert(s); 
};
登录后复制

按常理,如果Array是原生js类,上面语句应该只执行一次alert方法,且s为数组的索引0。但是,如果Array类被扩展了,多了一个toJSON方法,那么上面的语句将执行两次alert,第一次s为索引0,第二次s为方法名'toJSON'。 

如果你设计的代码的逻辑以原生Array类为基准,在某一天你的同事在页面里面引用了一个第三方的JS库,这个库又恰好扩展了Array类,结果将难以想象,很有可能原来的代码逻辑将不再成立。 

关于这种扩展原生JS类的库,很有名的一个就是prototype.js,它给Array类扩展了很多方法诸如toJSON,each等等。我现在明白为啥jquery的创始人曾经对prototype火大了(不少人因为特殊原因在一个页面里用jquery同时又用prototype,会有很多意料之外的冲突问题,仅仅一个noConflict是无法解决的)。另外,jqModal的作者如果看得懂我这篇文章估计也会对埋怨prototype,说:“我用for in对数组遍历是不明智的,但是更该死的还是prototype。。。” 

如上所述,如果你在用jqModal,同时因为别的原因在用prototype,恭喜你中招了。冲突将导致jqModal的弹框在ie6、ie7下面将无法利用closeClass设置的按钮进行自动关闭。跟踪调试代码你将发现,异常的地方就在本文开头提到的hs方法的for in 循环中。。。 
三,解决问题 
遍历数组的地方,用for var 语句代替for in。

以上是javascript中for与for in区别,以及为什么不推荐使用for in的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

H5页面制作是否需要持续维护 H5页面制作是否需要持续维护 Apr 05, 2025 pm 11:27 PM

H5页面需要持续维护,这是因为代码漏洞、浏览器兼容性、性能优化、安全更新和用户体验提升等因素。有效维护的方法包括建立完善的测试体系、使用版本控制工具、定期监控页面性能、收集用户反馈和制定维护计划。

H5页面制作的优势有哪些 H5页面制作的优势有哪些 Apr 05, 2025 pm 11:48 PM

H5 页面制作的优势包括:轻量级体验,加载速度快,提升用户留存率。跨平台兼容性,无需针对不同平台适配,提升开发效率。灵活性和动态更新,无需审核,便于内容修改和更新。成本效益,开发成本比原生 App 低。

没有H5,JS能运行吗? 没有H5,JS能运行吗? Apr 06, 2025 am 09:06 AM

JavaScript 是否可在无 HTML5 环境下运行?JavaScript 引擎自身可独立运行。在浏览器环境中运行 JavaScript 依赖 HTML5,因其提供加载和执行代码所需的标准化环境。HTML5 提供的 API 和特性对现代 JavaScript 框架和库至关重要。离开 HTML5 环境,许多 JavaScript 功能难以实现或无法实现。

Bootstrap Table乱码与页面编码的关系 Bootstrap Table乱码与页面编码的关系 Apr 07, 2025 pm 12:03 PM

Bootstrap Table 乱码通常是因为页面编码与表格数据编码不一致。要解决此问题,需要确保它们一致,具体步骤包括:检查页面和表格数据编码,设置页面编码,验证编码。如果使用 UTF-8,服务器也应支持。无法解决时,可尝试使用 JavaScript 编码库。

无法以 root 身份登录 mysql 无法以 root 身份登录 mysql Apr 08, 2025 pm 04:54 PM

无法以 root 身份登录 MySQL 的原因主要在于权限问题、配置文件错误、密码不符、socket 文件问题或防火墙拦截。解决方法包括:检查配置文件中 bind-address 参数是否正确配置。查看 root 用户权限是否被修改或删除,并进行重置。验证密码是否准确无误,包括大小写和特殊字符。检查 socket 文件权限设置和路径。检查防火墙是否阻止了 MySQL 服务器的连接。

H5页面制作能做什么 H5页面制作能做什么 Apr 06, 2025 am 07:09 AM

H5页面制作不仅适用于创建简单的网页,还具有强大的功能,包括:动态交互:使用动画、视频和3D模型等元素,为用户提供沉浸式体验。移动友好:响应式设计确保在各种设备上提供最佳浏览体验。数据可视化:以直观的方式呈现数据,使用图表和地图等元素。游戏和交互式应用:开发轻量级游戏和互动应用,增强用户参与度。跨平台兼容性:基于HTML5、CSS3和JavaScript的组合,但兼容性仍然是一个挑战。性能优化:对于复杂页面,需要优化代码效率。安全性:需要防止安全漏洞,如

为什么Edge浏览器中的特定div元素无法显示?如何解决这个问题? 为什么Edge浏览器中的特定div元素无法显示?如何解决这个问题? Apr 05, 2025 pm 08:21 PM

如何解决用户代理样式表导致的显示问题?在使用Edge浏览器时,项目中的一个div元素无法显示。经过查看,发�...

Navicat查看MongoDB数据库密码的方法 Navicat查看MongoDB数据库密码的方法 Apr 08, 2025 pm 09:39 PM

直接通过 Navicat 查看 MongoDB 密码是不可能的,因为它以哈希值形式存储。取回丢失密码的方法:1. 重置密码;2. 检查配置文件(可能包含哈希值);3. 检查代码(可能硬编码密码)。

See all articles