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


Posted in Javascript onJanuary 23, 2017

前言

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,数组长度缓存,尽量少变量

总结

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

Javascript 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
js获取url传值的方法
Dec 18 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 #Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 #Javascript
canvas绘制表盘时钟
Jan 23 #Javascript
canvas绘制的直线动画
Jan 23 #Javascript
node.js实现复制文本到剪切板的功能
Jan 23 #Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 #Javascript
Javascript中构造函数要注意的一些坑
Jan 23 #Javascript
You might like
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Django 反向生成url实例详解
2019/07/30 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
我的动漫时代的创业计划书范文
2014/01/27 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
外联部演讲稿
2014/05/24 职场文书
总经理助理岗位职责
2015/01/31 职场文书
婚礼家长致辞
2015/07/27 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis