本文章记录本人在深入学习js循环中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。

选择正确的循环体

在大部分编程语言中,代码执行的时间多数消耗在循环的执行上。

js定义了4种类型的循环:for, while, do while, for in

for循环是最常用的循环结构,它由四个部分组成:

  1. 初始化体
  2. 前测条件
  3. 后执行条件
  4. 循环体。

当遇到一个for循环的时候,初始化体首先执行,然后进入前测条件。如果前测条件的计算为true,就会执行循环体,然后运行后执行条件。

Javascriptfor (var i = 0; i < 10; i++) {// 循环体
};

while循环是一个简单的前测循环,由一个前测条件和一个循环体构成。在执行循环体之前,先对前测条件进行计算。如果为true就执行循环体。否则就会跳过循环体。

Javascriptvar i = 1;
while (i < 10) {// 循环体i ++;
};

do while循环是js中唯一的一种后测试的循环,它包括两个部分:循环体和后侧条件。记住:在一个do while循环中,循环体至少会运行一次,后测条件决定循环体是否再次运行。

Javascriptvar i = 1;
do {// 循环体
} while (i++ < 10)

for in循环有一个非常特殊的用途:可以枚举任何对象的命名函数属性。

Javascriptfor (var attr in object) {// 循环体
};

每一次循环,属性都会被对象的属性的名字(一个字符串)填充,直到所有的对象属性遍历完才会返回。返回的属性包括对象的使实例属性和对象从原型链基础来的属性。

想要提高循环性能,第一步选用哪种循环。在这四个循环里面,for in循环执行的速度都比其他三个循环要慢。

比较 for 和 while

大部分情况下我们都不会采用for in循环,但是其他的循环类型性能都相当,难以确定哪种循环执行速度更快。选择循环类型应该基于需求而不是性能。

可以通过设计forwhile循环来完成特定动作的重复性操作。从3个目标来分析如何正确的选用forwhile循环。

语义角度比较

forwhile循环可以按照下面的模式来进行互相的转换。

Javascriptfor (initialization; test; increment) // 声明并且初始化循环变量,循环条件,递增循环变量statements // 可执行的循环语句

相当于:

Javascriptinitialization  // 声明并且初始化循环变量
while (test) {  // 循环条件statements  // 可执行的循环语句increment   // 递增循环变量
}

for循环是以循环变量的变化来控制循环进程的,即for循环流程是预先计划好的,虽然中途可能会因存在异常情况或特别情况而退出循环,但是循环的规律是有章可循的。这样的话就方便预知循环的次数和每次循环的状态信息等等。

while循环根据特定条件来决定循环操作,由于条件是动态的,无法预知条件几时是true或者false,因此该循环操作就具有很大的不确定性,每一次循环时都不知道下一次循环状态如何,只能通过条件的变化来确定。

所以for循环通常用于有规律的重复操作中。while循环通常用于特定条件的重复操作,以及依据特定事件控制的循环等操作。

思维模式角度比较

for循环和while循环在思维模式上也存在差异。

for循环中,将循环的三个要素(起始值、终止值和步长)定义为3个基本表达式作为结构语法的一部分固定在for语句里面,使用小括号;进行语法分隔,这样有利于js的进行快速预编译。

在阅读到for循环结构的第一行代码的时候,就能够获取到整个循环结构的控制方式,然后再根据上面的表达式来决定是否执行循环体内的语句。

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

可以按照下面的逻辑思维进行总结:

  • 执行循环条件:1 < i < 10、步长为i++
  • 执行循环语句:alert(i);

这种把循环操作的环境条件和循环操作语句分离开的设计能够提高程序的执行效率,同时能够避免因为把循环条件与循环语句混合在一起而造成的错误。

for循环的特异性导致在执行复杂的条件时效率会大大的降低。相对而言,while循环就比较适合运http://naotu.baidu.com/viewshare.html?shareId=auuohz8fwm8k的条件,它将复杂的循环控制放在循环体内执行,而while语句自身仅用于测试循环条件,这样就避免了结构的分隔和逻辑的跳跃。

Javascriptvar a = true, b = 1;
while (a) {  // 在循环体内间接计算迭代if (9 < b) {a = false;}alert(b);b++;
}

从达到目标的角度比较

有一些循环的循环次数在循环之前就可以先预测,如计算1到100的数字和。而有一些循环具有不可预测性们无法事前确定循环的次数,甚至无法预知循环操作的趋向,这些构成了在设计循环结构时候必须考虑的达成目标需要解决的问题,即使是相同的操作,如果达到的目标的角度不同,可能重复了操作的设计也就不同。

使用递归

许多复杂的算法都是通过比较容易实现的递归实现。如阶乘函数。

Javascriptfunction factorial(n) {if (0 === n) {return 1;} else {return n * factorial(n - 1);}
};

递归函数的问题:错误定义或者缺少终结条件会导致函数运行时间过长,使浏览器出现假死现象。递归函数还会受到浏览器调用栈的大小的限制。

在ES6中js拥有了尾递归优化,详情请看迎接ECMAScript 6, 使用尾递归

使用迭代

可以通过递归函数实现的算法都可以通过迭代来实现。迭代算法通常包括几个不同的循环,分别对应算法过程中的不同方面。虽然迭代也会导致性能问题,但是使用优化的循环就可以代替长时间运行的递归函数,可以提高新能,因为运行一个循环比反复调用一个函数的开销要小。

使用迭代来实现合并排序算法:

Javascriptfunction merge(left, right) {var result = [];while (left.length > 0 && right.length > 0) {if (left[0] < right[0]) {result.push(left.shift());} else {result.push(right.shift());}}return result.concat(left).concat(right);
};
function mergeSort(items) {if (items.length === 1) {return items;}var work = [];for (var i = 0, len = items.length; i < len; i++) {work.push(items[i]);};work.push([]);for (var lim = len; lim > 1; lim = (lim + 1) / 2) {for (var j = 0, k = 0; k < lim; j++, k += 2) {work[j] = merge(work[k], work[k + 1]);}work[j] = [];};return work[0];
};

优化循环结构

循环结构是最浪费资源的一种流程。循环结构中的一点小的损耗都会被放大,从而影响程序运行的效率。

优化结构

循环结构常常是与分支结构混合在一起,所以如何嵌套也就非常的讲究。例如,设计一个循环结构,结构内的循环语句只有在特定的条件下才被执行,

Javascriptvar a = true;
for (var i = 0; i < 10; i++) {if (a) {} //条件判断
};

在这个循环里面,if语句会被反复的运行,如果这个if语句是一个固定的条件检测表达式,如果if的条件不会受到循环结构的影响,那么用下面这种结构设计会更加复合:

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

但是if条件表达式受循环结构的制约,那就不能使用这种结构嵌套了。

避免不必要的重复操作

在循环里面经常会存在一些不必要的损耗。下面一个例子:

Javascriptfor (var i = 0; i < 10; i++) {var a= [1,2,3,4,5,6,7,8,9,10];alert(a[i]);
};

在这个循环里面,每循环一次就会在定义一个新的数组,很明显这是一个重复的操作,把数组放到循环体外面会更加的高效:

Javascriptvar a= [1,2,3,4,5,6,7,8,9,10];
for (var i = 0; i < 10; i++) {alert(a[i]);
};

妥善定义循环变量

对于for循环来说,它主要利用循环变量来控制整个结构的运行。当循环变量仅用于结构内部的时候,不妨在for语句外面定义循环的变量,这样也可以优化循环结构。

最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!

Javascript 深入学习循环相关推荐

  1. web前端学习584-610(JavaScript流程控制-循环---for循环 while循环 do...while循环 continue break)

    文章目录 JavaScript流程控制-循环 1 循环 2 for 循环 案例1:求1-100之间所有的整数的累加和 案例2:求学生成绩 案例3:一行打印五个星星 3 双重for 循环 案例:打印五行 ...

  2. scuba 报表_是否想了解JavaScript的for循环? 这个动画的SCUBA潜水员可以提供帮助!...

    scuba 报表 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 是否想了解JavaScript的for循环? 这个动画的SCUBA潜水员可以提供帮助! (Wa ...

  3. javaScript基础学习 - 14 - JavaScript内置对象 -案例代码

    javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...

  4. JavaScript完全学习手册 pdf电子书

    编辑推荐: 详解JavaScriptmw内置对象和文档对象:覆盖函数.Ajax.DOM.XML.正则表达式.事件以及安全性:涵盖文字特效.图片特效.时间特效.窗体特效及菜单特效:窗内网提供技术支持. ...

  5. JavaScript TypeScript学习总结

    本文章为web课学习JavaScript & TypeScript的学习总结 JavaScript & TypeScript学习总结 JavaScript JS介绍 JS基础 标识符 ...

  6. JavaScript 基础语法循环案例练习

    JavaScript 基础语法循环案例练习 文章目录 JavaScript 基础语法循环案例练习 前言 一.早午晚安喵喵喵 二.判断奇偶数 三.班长请客 四.1-100跳过个位为3的数求和 五.第几个 ...

  7. JavaScript深度学习

    毛囊炎鼻炎 JavaScript深度学习 蔡善清,[美] 斯坦利·比列斯奇,[美] 埃里克·D.,尼尔森,[美] 弗朗索瓦·肖莱 著,程泽 译 ISBN:9787115561145 包装:平装 开本: ...

  8. javascript中for循环和setTimeout同时使用,出现的问题

    javascript中for循环和setTimeout同时使用,出现的问题 for循环代码 <!DOCTYPE html> <html lang="en"> ...

  9. javascript立体学习指南

    javascript立体学习指南 第一章:首先了解javascript 首先,什么是javascript? JavaStrip出生于1995年,是一种文本脚本语言,成都装修公司是一种动态的.弱类型的. ...

最新文章

  1. P3366 【模板】最小生成树(链式前向星,prim,有坑)难度⭐⭐
  2. 手动安装K8s第六节:node节点部署-kubelet
  3. linux 并行执行脚本,在bash / linux中并行运行shell脚本
  4. 年薪 50w 难吗?分享我的 2 个捷径
  5. 使用Twitter Bootstrap,WebSocket,Akka和OpenLayers玩(2.0)
  6. 工业大数据分析综述:模型与算法
  7. 有一分数序列求前20项和答案c语言,用c语言求解:有一分数序列2/1,3/2,5/3,8/5,13/8,21/13,…求这个数列的前20项之和....
  8. add p4 多个文件_绘图技巧01:继承特性创建对象之神器ADD
  9. Mysql的数据库和客户端环境搭建(三)
  10. Upload LABS Pass-4
  11. [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画
  12. TensorRT加速ENet
  13. RMDB与hadoop的实时整合
  14. 给uiview设置圆角
  15. 架构师?so easy
  16. android qq侧滑,Android实现QQ的侧滑置顶、删除
  17. SIM卡PIN码管理
  18. android studio官方教程 pdf,android studio教程pdf
  19. 安卓隐藏摄像_隐藏拍摄app
  20. 用tecplot作平均速度流线图

热门文章

  1. OpenCV使用形态学转换提取水平和垂直线的实例(附完整代码)
  2. OpenCV支持向量机SVM用于非线性可分离数据
  3. QML 信号和处理程序事件系统
  4. C++数组的左右旋转的实现算法(附完整源码)
  5. OpenGL raytracer光线追踪的实例
  6. OpenGL 对象的概述
  7. QT自定义图表上不同元素的外观
  8. C++11右值引用和移动构造函数
  9. php键名改为0.1.2.3,揭秘 0.1 + 0.2 != 0.3(php 请自觉点用round)
  10. 下pg负载均衡_SAE 场景下,应用流量的负载均衡及路由策略配置实践