javascript 使用for循环时该注意的问题-附问题总结


Posted in Javascript onAugust 19, 2015

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

很多时候我们都用到for循环,而用到for循环部门往往对一个数组进行循环,其中我们很多时候都是这样写的:

// 次佳的循环
for (var i = 0; i < myarray.length; i++) {
 // 使用myarray[i]做点什么
}

这样的代码虽然没有什么大问题,但是每次循环都会获取一下数组的长度,这回降低你的代码,尤其当myarray不是数组,而是一个HTMLCollection对象的时候。

再看看下面的这个代码:

for (var i = 0, max = myarray.length; i < max; i++) {
 // 使用myarray[i]做点什么
}

这样地代码只会获取一次数组的长度,提高了代码的质量;

伴随着单var形式,你可以把变量从循环中提出来,就像下面这样:

function looper() {
 var i = 0,
  max,
  myarray = [];
 // ...
 for (i = 0, max = myarray.length; i < max; i++) {
  // 使用myarray[i]做点什么
 }
}

javascript使用for循环时问题总结

这个问题的讨论最初来自公司内部邮件,我只是把这个问题的讨论内容记录下来。

有一些项目组在定位问题的时候发现,在使用“for(x in array)”这样的写法的时候,在IE浏览器下,x出现了非预期的值。

具体说,如果自定义了Array.prototype.indexOf方法(譬如源于某prototype污染),也许是因为老版本IE浏览器并不支持array.indexOf方法,而开发者又很想用,那么这样的浏览器可能会出现这样的问题:

Array.prototype.indexOf = function(){...};
var arr = [1, 2];
for (x in arr) console.log(x);

//会输出

1
2
function(){…}

换句话说,把indexOf这个方法给输出出来了。

解决方法很简单,要么别添加这个方法,要么用“for (i=0; i < array.length; i++)”这样的循环等等。

但是问题的本质呢?有人猜测,可能是因为for(x in obj)这种用法其实是去遍历一个对象,而array的实现其实也和普通的object一致,只不过key是既定的数值而已:

{0:"something", 1:"something else"}

在一则stackoverflow的问答里面也提到了,遍历数组的时候用for…in和for(;;)的区别,前者的含义是枚举对象的属性,存在这样两个问题:

枚举的顺序无法被保证;

继承属性也被枚举出来;

在对Array.prototype.forEach的支持上,从这张表中也可以明确看到,IE8及以下版本是无法准确支持的:

 javascript 使用for循环时该注意的问题-附问题总结

这里还有对forEach方法兼容性的详细阐述。事实上,主要的JavaScript框架(比如jQuery、Underscore和Prototype等等)都有安全和通用的for-each功能实现。

在JSLint的for in章节里面也提到,for in语句允许循环遍历对象的属性名,但是也会遍历到那些通过原型链继承下来的属性,这在很多情况下都会造成预期以外的错误。有一种粗暴的解决办法:

for (name in object)

 { if (object.hasOwnProperty(name))

 { .... } }

还有人提到了使用for(var i=0;i<length;i++)类似这样的循环时的问题,因为JavaScript没有代码块级别的变量,所以这里的i的访问权限其实是所在的方法。有的书上会建议程序员把这样的变量声明放到一处去,但是从直观性上说,在大部分情况下都不够合理。

使用JavaScript 1.7中引入的“let”可以解决这个问题,使i成为真正的代码块级别的变量:

for(let i =0; i < a.length; i++)

最后,在Google的JavaScript风格导引里面,也涉及到了这个约束:

for-in loop:


Only for iterating over keys in an object/map/hash

以上就是本文关于javascript 使用for循环时该注意的问题-附问题总结的全部内容,希望对今后的工作学习有所帮助,同时欢迎各位业内人士提出批评建议。

更多的可以查看这篇文章:https://3water.com/article/80351.htm

Javascript 相关文章推荐
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
javascript 实现map集合
Apr 03 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 #Javascript
easyui Draggable组件实现拖动效果
Aug 19 #Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 #Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 #Javascript
JS实现可调整倒计时间代码分享
Aug 18 #Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 #Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 #Javascript
You might like
PHP之密码加密的几种方式
2015/07/29 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
js压缩利器
2007/02/20 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
python获取标准北京时间的方法
2015/03/24 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
迟到检讨书大全
2014/01/25 职场文书
质量提升方案
2014/06/16 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers