`

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

阅读更多

一,for循环的基本写法 


代码如下: 

for(var i=1;i<=10;i++) { 
     alert(i); 
} 

        这段代码太简单了,我都不好意思拿出手。代码的执行结果是依次弹出1到10,

 

PS:在早期的IE如IE6中,你把10改成10000,就能让用户一直点确定什么也不能干了哈哈——不要说是我出的主意。 
       由于这是一篇基础课程,所以我们回归正题来详细分析一下这段代码吧。 
       for循环的结构都是类似的,任意一个for循环都是这样的: 
       for(开始前;循环进行的条件;循环一次结束后做什么) { 
                // 主体代码 
       } //如果仔细看一下for循环,就会发现他的一个万年不变的特点:for后的()中,永远是有且只有两个;(英文分号)! 
        上面的结构代码已经说明,分号的作用是用来分割for循环的执行条件。这些条件都是缺一不可的,可以为空,但位置必须留着,所以必须有两个 ; 。 
        开始前:一般用来声明一些变量,如例一的var i=0,就像准备了一个篓子,里面暂时没有任何东西。工具的数量不限,你可以在for循环开始前声明100个变量,除了不好看之外,也没什么问题。 
       循环进行的条件:如第1个例子中的i<10,就是条件了,只有条件为真时,for循环才会进行下去,例一的条件可以看成if(i<10){//do...}。可以想象成篓子最多装10个东西,如果多了10个,就不装了,退出循环。 
       循环一次后做什么:例一中只是简单的给篓子里面加入一个东西,其实你还可以做很多事,毕竟循环一次不容易。 
       特别说明:for循环“开始前”的代码只会执行一次,不会影响整个for循环的效率,而“进行条件”与“一次结束后做什么”,你循环次数有多少,他就执行多少次,所以他们经常成为for循环性能瓶颈。 
       如果说for循环第1个;前是开始前做的事,那我可不可以把开始前的事情拿到for循环前面来呢?只要在开始前定义就行了嘛。答案是可以: 
//例2 

var i=0; 
for(;i<10;i++) { 
	alert(i); 
} 

 

 

       但要注意,虽然for后面的括号里“开始前”已经没有内容了,但;(分号)还在!而且必须在! 
同理,既然第2个;后面的代码是一次结束后执行的,那我也可以把要执行的放在for循环后啊。如下: 
复制代码 代码如下: 

//例子3 
var i=0;
for(;i<10;) { 
	alert(i); 
	i++ 
} 

 
但依然,万恶的两个;还是必须存在。 
上面也就是两个基础的“偏门用法”了。。。不要说我坑爹 
不过你也看到了,执行循环的条件,是不能单独提出来的,必须放在两个分号之间!前后夹击! 
二,for循环的偏门写法 
1,我们把例一的代码变成:

var i=0; 
for(;i<10;alert(i++)) ; //  

       怎么样?这才是坑爹啊,{}都没有了!不过完全正确啊! 
       不过这种写法太过逆天,第2个 ; 后面的代码最好不要多,一多起来你就不能掌握i的值了,而且因为代码混乱可能导致人为的语法错误。 
适用环境: 
       简单的for循环操作,比如造一个元素依次是从1到1000的数字的这么一个数组就用这招,酷就一个字。 
2,深入分析 
通过前面的例子我们知道,其实for循环的执行条件就是判断一个布尔值,就像这样: 

var t = true; 
if(t == true) { 
	alert('啊!') 
} 

 这个if语句没人看不懂吧,其实还可以这样写: 

var t = true; 
if(t) { 
	alert('啊!') 
} 

 
效果是一样的,如果for循环的进行条件就是判断布尔值,那下面这种写法理解起来就不困难了:

 

复制代码 代码如下:

var i = 10;
for(;i;i--){
alert(i);
}


这段代码的效果是依次弹出10到1(和例一反过来了)。其中for循环的进行条件简单的要死,就是个i.但根据我们前面的解说,其实条件是这样的:


if(i) {
//do
}


也就是i为真的情况,就继续执行循环。这个for循环的i什么时候为真呢,只要i不等于0,空字符串,undefined,null,false时,就都为真。
所以此for循环一直会执行,直到i=0,就结束了。但我们代码中不会看到0 ,迷惑新手,装B利器。
3,又一个
先看代码,来自园友snandy:


var ary = ["jack","tom","lily","andy"];
for(var i=0,a;a=ary[i++];){
console.log(a);
}


依然是注意看for循环的进行条件:a=ary[i++]。特别注意这里是=而不是==,要是==的话循环就没法进行了。
这个条件判断很扯,我也比较晕。类似于:
if(a=b) {...} //注意是=!
此时如果b是false,那就会返回false了。
回到上面的例子中,如果i++加出了头,那ary[i++]就是false值了(null,undefined都算),所以条件就成了false,所以循环就断了。
这个例子局限很大,snandy也提到了,比如你数组中就是有个0,那也可能会导致循环终结。
4,jQuery的一个写法 :
function sibling( elem ) {
var r = [],
n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}
return r;
}


这是从jquery里提取的获得兄弟节点的办法,他有一个奇特的for循环。循环进行的条件是判断n是否为真。由于n一直是一个html节点,所以一直为真。而每次循环结束后都会把n的下一个节点赋给n,而当n的下一个节点没有时,n就成了false,终结循环。
小结:
从上面所有的例子可以看到,任他千奇百怪的for循环,都离不开两个;。大家想看懂一个for循环的原理,直接以;为界线分割for循环即可,一目了然。
三,for循环的效率优化
1,缓存变量
这也是最常用的效率优化办法:


var arr =[1,2,23,...,1000];
for(var i=0,l = arr.length;i<l;i++) {
//
}


由于执行条件每次循环都要判断,所以如果每次循环都从arr中读取length的话,无疑很浪费而且必然增加计算次数,造成效率浪费。
2,倒序法
比如一个数组有1000个元素,如果不考虑提取顺序,那么可以倒序循环:
var arr =[1,2,23,...,1000];
var i = arr.length;
for(;i>0;i--){
//alert(i);
}


为什么倒序会比顺序效率快?没有科学道理啊!其实只是因为倒序可以少用一个变量(对比下上一个例子吧),除开这点,两者没有速度差别。
3,注意跳出
不进行不必要的操作,这是基本逻辑。如有1000个li里面,有一个li上有个特殊的className,我们要找出这个li。那么,由于已经确定只有一个这样的li,我们找到这个li就应该马上跳出,break,下面的循环就没必要进行了。这样一来,由于li有999/1000的几率不是最后一个,我们肯定能节约不少计算。
其他情况请举一反三。
4,使用偏门用法
上面我介绍的偏门用法不只是写出来好看的,大部分都有节约变量节约计算的效果,能用就用,既酷又有效,何乐而不为呢?

分享到:
评论

相关推荐

    Windows bat脚本之for循环用法详解

    主要介绍了Windows bat脚本之for循环用法详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    JAVASCRIPT从入门到精通

    《JavaScript从入门到精通(视频实战版)》一共分为四篇,涵盖了JavaScript语言应用的绝大多数方面,从基本概念到具体实践、从抽象的算法到具体的页面特效、从最简单的输入/输出到最新的XML技术都进行了详细的阐述,并...

    JavaScript教程--从入门到精通

    JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程语言,正日益受到全球的关注。因它的开发环境简单,不需要Java编译器,而是直接运行在Web浏览器中,而因...

    《JavaScript与Jscript从入门到精通》[PDF]

    JavaScript和JScript语言可以把HTML文档、用Java或ActiveX编写的Web组件及多媒体插入件集成起来,开发动态的、可响应各种用户输入的高级Web应用程序...本书内容很丰富,实用性强,是一本真正的“从入门到精通”的全书.

    最完整的javascript从入门到精通教程

    资源名称:最完整的Javascript从入门到精通教程内容简介:Javascript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与 HTML超文本标记语言、Java 脚本语言...

    JS脚本:简单的Javascript脚本

    JS脚本简单的Javascript脚本

    C# 动态解析 javascript 脚本引擎源码

    C# 动态解析 javascript 脚本引擎源码

    JavaScript教程-从入门到精通

    JavaScript的出现,它可以使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、...无凝Java家族将占领Internet网络的主导地位因此,尽快掌握JavaScript脚本语言编程方法是我国广大用户日益关心的。

    QT中使用QScriptEngine引擎编译运行JavaScript脚本

    1.编译运行JavaScript脚本的例子。 2.包含了QScriptEngine的一些使用方法。

    Unity3D脚本:JS对象脚本2

    Unity3D脚本:JS对象脚本2

    PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例

    应同学邀请,演示如何使用 PyQt5 内嵌浏览器浏览网页,并注入 Javascript 脚本实现自动化操作。 下面测试的是一个廉价机票预订网站(http://www.flyscoot.com/),关键点如下 使用 QWebEngineView 加载网页,并显示...

    JavaScript入门经典(第3版)高清PDF—3

    《JavaScript入门经典(第3版)》首先介绍了JavaScript的基本语法,并介绍了如何发挥JavaScript中对象的威力。《JavaScript入门经典(第3版)》还介绍了如何操纵最新版本浏览器所提供的BOM对象。在《JavaScript入门经典...

    实用JavaScript脚本代码大全

    实用JavaScript脚本代码大全是一些页面中常用控制页面的js,1. oncontextmenu="window.event.returnvalue=false"将彻底屏蔽鼠标右键 (false)&gt;&lt;td&gt;no&lt;/table&gt; 可用于Table 2. ...

    第4章_JavaScript脚本技术

    JavaScript脚本技术JavaScript脚本技术

    Adobe Acrobat SDK JavaScript API JavaScript™ for Acrobat® API Reference.zip

    Adobe Acrobat SDK JavaScript API JavaScript™ for Acrobat® API Reference.zip Ctrl+B 的手动制作目录效率太低, 使用脚本生成PDF目录就看它的了。 含有样例。

    javascript ppt脚本详细讲解

    javascript ppt 脚本 详细讲解 javascript ppt 脚本 详细讲解 javascript ppt 脚本 详细讲解 javascript ppt 脚本 详细讲解

    javascript入门经典第6版

    首部分“Javascript基础”,包括第1章到第4章,介绍了如何使用常用函数编写简单的脚本。第二部分“Javascript编程”,包括第4章到第7章,介绍了Javascript的数据类型,例如数值、字符串和数组;...

    AI CC 2015 JavaScript脚本手册

    AI CC 2015 JavaScript脚本手册,用于学习编写JSX脚本,官方文档

    JavaScript脚本特效编程给力起飞

    JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。Javascript提供了丰富的运算功能,...

    JavaScript脚本大全

    JavaScript脚本大全,各种JavaScript脚本开发

Global site tag (gtag.js) - Google Analytics