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实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
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中的一个中文字符串截取函数
2007/02/14 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
八大排序算法的Python实现
2021/01/28 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
python 实现dict转json并保存文件
2019/12/05 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
护士自我鉴定
2013/10/23 职场文书
法人授权委托书范本
2014/09/17 职场文书
先进事迹材料范文
2014/12/29 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书