## 前言 循环语句:通过循环语句可以反复的执行一段代码多次。 ## for循环 ### for循环的语法 语法: ``` for(①初始化表达式; ②条件表达式; ④更新表达式){ ③语句... } ``` 执行流程: ``` ①执行初始化表达式,初始化变量(初始化表达式只会执行一次) ②执行条件表达式,判断是否执行循环: 如果为true,则执行循环③ 如果为false,终止循环 ④执行更新表达式,更新表达式执行完毕继续重复② ``` for循环举例: ```javascript for (var i = 1; i <= 100; i++) { console.log(i); } ``` 上方代码的解释: ![](http://img.smyhvae.com/20180117_2248.png) ### for循环举例 ```javascript for (var i = 1; i < 13; i = i + 4) { console.log(i); } ``` 上方代码的遍历步骤: ``` 程序一运行,将执行var i = 1;这条语句, 所以i的值是1。 然后程序会验证一下i < 13是否满足,1<13是真,所以执行一次循环体(就是大括号里面的语句)。 执行完循环体之后,会执行i=i+4这条语句,所以i的值,是5。 程序会会验证一下i < 13是否满足,5<13是真,所以执行一次循环体(就是大括号里面的语句)。 执行完循环体之后,会执行i=i+4这条语句,所以i的值,是9。 程序会会验证一下i < 13是否满足,9<13是真,所以执行一次循环体(就是大括号里面的语句)。 执行完循环体之后,会执行i=i+4这条语句,所以i的值,是13。 程序会会验证一下i < 13是否满足,13<13是假,所以不执行循环体了,将退出循环。 最终输出输出结果为:1、5、9 ``` 接下来做几个题目。 **题目1**: ```javascript for (var i = 1; i < 10; i = i + 3) { i = i + 1; console.log(i); } ``` 输出结果:2、6、10 **题目2**: ```javascript for (var i = 1; i <= 10; i++) { } console.log(i); ``` 输出结果:11 **题目3**: ```javascript for(var i = 1; i < 7; i = i + 3){ } console.log(i); ``` 输出结果:7 **题目4**: ```javascript for (var i = 1; i > 0; i++) { console.log(i); } ``` 死循环。 ## while循环语句 ### while循环 语法: ```javascript while(条件表达式){ 语句... } ``` 执行流程: ``` while语句在执行时,先对条件表达式进行求值判断: 如果值为true,则执行循环体: 循环体执行完毕以后,继续对表达式进行判断 如果为true,则继续执行循环体,以此类推 如果值为false,则终止循环 ``` **如果有必要的话,我们可以使用 break 来终止循环**。 ### do...while循环 语法: ```javascript do{ 语句... }while(条件表达式) ``` 执行流程: ``` do...while语句在执行时,会先执行循环体: 循环体执行完毕以后,在对while后的条件表达式进行判断: 如果结果为true,则继续执行循环体,执行完毕继续判断以此类推 如果结果为false,则终止循环 ``` ### while循环和 do...while循环的区别 这两个语句的功能类似,不同的是: - while是先判断后执行,而do...while是先执行后判断。 也就是说,do...while可以保证循环体至少执行一次,而while不能。 ### while循环举例 **题目**:假如投资的年利率为5%,试求从1000块增长到5000块,需要花费多少年? **代码实现**: ```html Document ``` 打印结果: ``` 5003.18854203379 一共需要33年 ``` 另外,你也可以自己算一下,假如投资的年利率为5%,从1000块增长到1万块,需要花费48年: ``` 10401.269646942128 一共需要48年 ``` ## break 和 continue > 这个知识点非常重要。 ## 各种练习 ### 练习一:质数 **题目**:在页面中接收一个用户输入的数字,并判断该数是否是质数。 代码实现: ```html ``` ### 练习二:99乘法表 代码实现: ```html ``` 页面效果: ![](http://img.smyhvae.com/20181229_1410.png) ### 练习三:质数相关 **题目**:打印1~100之间的所有质数 代码实现: ```html ``` 打印结果: ![](http://img.smyhvae.com/20181229_1415.png) ## 我的公众号 想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。 扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: ![](http://img.smyhvae.com/2016040102.jpg)