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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
基于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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
mysq GBKl乱码
2006/11/28 PHP
php判断变量类型常用方法
2012/04/24 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python多线程扫描端口示例
2014/01/16 Python
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
在Python中使用元类的教程
2015/04/28 Python
Python 登录网站详解及实例
2017/04/11 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
教师岗位职责范本
2013/12/29 职场文书
图书室标语
2014/06/21 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书