Javascript中for循环语句的几种写法总结对比

前言

for循环我们在js遍历对象或数组时都会有用到了，今天我们一起来看一些关于for循环的一些使用例子了，具体的操作细节如下文介绍。

一般写法如下：

for(var i = 0;i< arr.length;i++) {
 var a = arr[i];
 //...
 }

这就是一个常见的，正序循环的for循环。这样写的缺点大家都明白：每次都从arr里取length与i来对比，浪费性能（而且，要是arr的长度是动态变化的，就会出现死循环）。改进这个循环的办法是用变量保存arr.length：

for(var i = 0, al = arr.length;i< al;i++) {
 var a = arr[i];
 //...
 }

这样比第一种可以略微提升点性能，要是数组长，可以提升更多。

不过这样写就多了个变量al，且这个变量只在用来与i对比的时候有用，看着有点鸡肋。

如果循环顺序对你不重要，那你可以尝试倒序循环：

for(var i = arr.length-1;i > -1;i--) {
 var a = arr[i];
 //...
 }

这样一来变量少些，且还缓存过arr长度，性能也不错。但这里的代码写得有点拙劣（我故意的），首先是i = arr.length-1（居然要-1，靠），然后是循环继续执行的条件i > -1，都让有洁癖的人无法忍受。

下面是我常用的倒序for循环写法：

for(var i = arr.length;i--;) {
 var a = arr[i];
 //...
 }

这已经非常精简了。原理需要理解一下：for循环继续执行的条件，是;;之间的这个判断要为真，而这里的i–，在第一次循环进来的时候，i=arr.length，i–值不变（为什么不变？因为要在for循环体里面，才会发现i变了)；当i=1时，i- -还是1，但进入循环体后，就是0了，所以可以正常执行最后一次循环；当i=0时，i–还是0，而0已经不为真了，所以循环就不会继续执行了。

大家注意到上面的所有代码的for循环体里，都有个var a = arr[i] ，用来取出当前循环到的数组项。这实际上也是种浪费，且jsLint等会告诉你：不要在循环里声明变量。。。

倒序的for可以精简至斯，但我就是要正序，而且要效率高，变量少，怎么办？

如下：

for(var i = 0, a;a = arr[i++];) {
 //...
 }

这种写法好处在于：几乎不可避免的arr.length不见了，前面说的取出当前循环到的数组项的那一句也不见了。

原理：

a = arr[i++] ，在这里作为循环能执行的条件，注意这里只有一个=号，所以这不是判断句，是赋值语句，就是把arr[i++]赋给a，然后判断a是不是真值。i++与i–的原理类型我就不说了，只说当i++已经超过数组的长度时，循环肯定要停止才行，而这里真的就停止了，为什么？因为a=arr[i++] ，如果取到了超出数组本身长度的项，只会取得一个undefined，而undefined是假值，循环条件就判断失败了。

当然，这样写的缺点也很明显：

1，当arr的长度动态变化时，依然会产生死循环————因为我们从来没缓存过arr.length呀。

2，如果循环的是一个数字数组，当取出的项（即a的值）为0时，就会中止循环（因为0是假值）。

3，当数组中某一项是假值时（包括空字符串，0，null，undefined），同样会中止循环

所以大家用这种写法时，最好排除掉上面的情况再用。

这个原理同样可以用在倒序循环上。

最后我要忠告大家几句：

  1. 代码精简不等于效率高!
  2. 不要为了故意精简代码而丧失性能

顺带说几点提高for循环性能的要点：

1，适时break!不需要遍历全部的就要加跳出条件！

2，不要在for循环体里声明变量（建议一次var,多次赋值）

2，数组长度缓存，尽量少变量

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流。

赞 (0)

相关推荐

  • js实现无缝循环滚动

    本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下 1.图片格式:260*400. 2.使用循环定时器轻松实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> </head> <style type="text/css"&

  • JS 循环li添加点击事件 （闭包的应用）

    废话不多说了,直接给大家贴代码了,具体代码如下所述: var aLi = document.querySelectorAll('.article-tab li'); for (var i = 0; i <= aLi.length; i++) { (function(){ var p = i aLi[i].onclick = function() { alert(p); } })(); } 以上所述是小编给大家介绍的JS 循环li添加点击事件 (闭包的应用),希望对大家有所帮助,如果大家有任何疑问

  • JS中的三个循环小结

    一.for循环 四部曲: 1.设置初始值 var i = 0 2.设置循环执行条件 i < 5 3.执行循环体中的内容{ [循环体] } 包起来的部分 4.每一轮循环完成后都执行我们的i++累加操作 for(var i = 0;i<5;i++){ console.log(i) } break/continue:在循环体中遇到这两个关键字,循环体中的后面的代码就不在执行了 break:在循环体中,出现break,整个循环就直接的结束了,i++最后的这个累加的操作也不执行了 continue:在循

  • js 实现获取name 相同的页面元素并循环遍历的方法

    实例如下: <input type="hidden" name="blues" value="蓝色浏阳河之最"> <input type="hidden" name="blues" value="蓝色浏阳河之亲"> <input type="hidden" name="blues" value="蓝色浏阳河之

  • JavaScript中for循环的几种写法与效率总结

    前言 对于for循环,相信大家再常用不过了.但是这回说下for循环是因为看代码时我居然没有看明白一个for循环的意思,真是不应该啊. 这个for循环是这么写的: for (var i = 0, rule; rule = rules[i++];) { //do something } 这个写法是什么意思呢?后面再说,现卖个关子,这个写法我感觉还是挺好的. for循环写法对效率的影响 说上面那段代码之前,先说一下for循环的效率问题.在接触js时关于for循环的写法和对效率影响的文章挺不少的.但总的

  • 原生js实现无限循环轮播图效果

    知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

  • javaScript如何跳出多重循环break、continue

    先来说说break和continue之间的区别 摘自JavaScript高级程序设计 for(var i=0;i<10;i++){ if(i>5){ break; } } console.log(i); ---6 •当i=5和10的时候,会执行到break,并退出循环 for(var i=1;i<10;i++){ if(i>5){ continue; } num++; } console.log(num); ---4 var num=0; for(var i=1;i<10;i

  • jQuery的Each比JS原生for循环性能慢很多的原因

    其实查看jQuery的源代码,发现each的代码很简单,但为什么性能和原生的for循环相差几十倍呢? jQuery的each的核心代码 for (; i < length; i++) { value = callback.call(obj[i], i, obj[i]); if (value === false) { break; } } 看着很简单,但为什么会慢很多呢? 编写测试代码如下: var length=300000; function GetArr() { var t = []; fo

  • JavaScript中关于for循环删除数组元素内容时出现的问题

    JavaScript中关于for循环删除数组元素内容时出现的问题

    昨天用for循环进行数组去重的时候出现的问题, 首先,用双重for循环把前一个和所有后面的元素进行比较,如果相等则删除. 但是,如果数组里面有三个以上连续相等的元素的时候,就会出现问题. var arr = [1,1,1,2,2]; for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j,1); } } } document.write(&

  • js实现为a标签添加事件的方法(使用闭包循环)

    js实现为a标签添加事件的方法(使用闭包循环)

    本文实例讲述了js实现为a标签添加事件的方法.分享给大家供大家参考,具体如下: 以示例说明: 实现效果:循环为带有ml-praise样式类的a标签添加事件,并且在点击a标签后,相应的数量增加1. Html结构如下所示: <ul> <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">100</span>

  • JS for循环中i++ 和 ++i的区别介绍

    平时都是这样写的for循环, for(var i = 0; i < 20 ; i++){ .... } 但我看有的人这样写 for (var i = 0; i < 20 ; ++i) { .... } 这样会对for循环有什么影响? 1.在for里好像没啥区别... 但是用在赋值的时候, 就有区别了... var a = 1; var b = a++; var c = 1; var d = ++c; console.log(b,d); // 1, 2 a++ 是先应用a, 然后再自加 ++a

随机推荐