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

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

很多时候我们都用到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及以下版本是无法准确支持的:

这里还有对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循环时该注意的问题-附问题总结的全部内容,希望对今后的工作学习有所帮助,同时欢迎各位业内人士提出批评建议。

更多的可以查看这篇文章:http://www.jb51.net/article/80351.htm

(0)

相关推荐

  • javascript for循环从入门到偏门(效率优化+奇特用法)

    一,for循环的基本写法 代码如下: 复制代码 代码如下: //例一for(var i=1;i<=10;i++) { alert(i); } 这段代码太简单了,我都不好意思拿出手.代码的执行结果是依次弹出1到10,PS:在早期的IE如IE6中,你把10改成10000,就能让用户一直点确定什么也不能干了哈哈--不要说是我出的主意. 由于这是一篇基础课程,所以我们回归正题来详细分析一下这段代码吧. for循环的结构都是类似的,任意一个for循环都是这样的: for(开始前;循环进行的条件;循环一次结

  • javascript for循环设法提高性能

    一般在javascript里对数组进行遍历一般是使用for循环,像下面一样 复制代码 代码如下: var arr = []; for(var i=0; i<arr.length; i++){ //loop } 这种代码最大的问题,就在于每次循环时都要通过 .操作符获取 .length,增加了开销.那么我们可以这样改进. 复制代码 代码如下: var arr = []; for(var i=0, n=arr.length; i<n; i++){ //loop } 这样子,先把 arr.lengt

  • javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

    本文实例讲述了javascript使用for循环批量注册的事件不能正确获取索引值的解决方法.分享给大家供大家参考.具体分析如下: 可能不少朋友会遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&q

  • javascript下for循环用法小结

    我们最常用的一种是 for(循环变量初值;循环条件;递增值){语句;}  例 for(var x=0;x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面说下其它的用法  (1)省略表达式1,这个时候应在for语句前给循环变量赋初值,注意其后的;不能省略  例: var x=0; for(;x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] (2) 省略表达式2,也就是循环条件循环无终止进行,也就是表达式2始终为真.  例: for(var x=0;;x++) { d

  • JavaScript中for循环的使用详解

    我们已经看到,while循环有不同变种.本章将介绍另一种流行的循环叫做for循环. for 循环 for循环是循环最紧凑的形式,并包含有以下三个重要部分组成: 循环初始化计数器的初始值.初始化语句执行循环开始之前. 测试语句,将测试如果给定的条件是真还是假.如果条件为真,那么将要执行的循环中给定的代码,否则循环会退出来. 循环语句,可以增加或减少计数器. 可以把所有的三个部分中的一行用分号隔开. 语法 for (initialization; test condition; iteration

  • Javascript基础教程之for循环

    如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的. 复制代码 代码如下: document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.write(cars[3] + "<br>"); do

  • JavaScript在for循环中绑定事件解决事件参数不同的情况

    有时候要对响应一堆相似的事件,但是每个事件的参数都不同,一开始还以为挺简单的,用个for循环不就得了,结果发现,额,都是使用了最后一个参数... 上网查资料!!!结果大神说用闭包解决 代码: 复制代码 代码如下: for(var i=0;i<10;i++){ btns[i].onclick=(function(i){ return function(){alert(i)} })(i) } 大概原因是直接用btns[i].onclick=function(){alert(i)}时,JavaScri

  • JavaScript在多浏览器下for循环的使用方法

    一.前言 JavaScript语言在不同的浏览器的下有存在细微的差异,但不像DOM操作差异那么大,现在为大家列举出其中一个"for循环"的差异,并介绍如何有效的解决这种差异. 二.问题描述 在下面的 测试代码 例1 中IE6和Chrome输出的结果是不一致,IE6不执行for语句里的代码 复制代码 代码如下: //例1: alert("准备测试toString是否被for循环枚举出来") var forTest = { toString: 1 } for (i in

  • 讲解JavaScript中for...in语句的使用方法

    这里是JavaScript支持的另外一个循环.它被称为for...in循环.这个循环是用于循环一个对象的属性. 因为我们还没有讨论的对象,所以使用这一循环可能会感觉不太明白.但是,一旦你会对JavaScript对象了解后,那么会发现这个循环非常有用. 语法 for (variablename in object){ statement or block to execute } 从对象每次迭代一个属性分配给变量名(variablename),这个循环持续到该对象的所有属性都用尽. 例子: 下面是

  • JavaScript For...In 使用方法

    For...In 声明用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作). JavaScript For...In 声明 For...In 声明用于对数组或者对象的属性进行循环操作. for ... in循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作. 语法: for (变量 in 对象) {     在此执行代码 }variable用来指定变量,指定的变量可以是数组元素,也可以是对象的属性. 实例: 使用for ... in循环遍历数组. var x var m

  • 跟我学习javascript的for循环和for...in循环

    大家都知道在JavaScript中提供了两种方式迭代对象: for 循环: for..in循环: 一.for循环 不足: 在于每次循环的时候数组的长度都要去获取: 终止条件要明确: 在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象.通常的循环形式如下: // 次佳的循环 for (var i = 0; i < myarray.length; i++) { // 使用myarray[i]做点什么 } 这种形式的循环的不足在于每次循环的

随机推荐