一、循环
1、for循环
（1） for基础语法
需求：火车站售票，需要将0~10号票全部售出
// 售票程序
// 1、普通的实现流程，代码的重复量过大；企业开发时代码审计不会通过
// console.log("售出1号票")
// console.log("售出2号票")
// console.log("售出3号票")
// console.log("售出4号票")
// console.log("售出5号票")
// console.log("售出6号票")
// console.log("售出7号票")
// console.log("售出8号票")
// console.log("售出9号票")
// console.log("售出10号票")
// 2、循环实现，减少重复的代码
// var i = 1：初始变量，循环执行的时候 这段代码只会执行一次
// i<= 10：循环条件，当条件的结果为true的时候，执行循环内部的代码
// i++：自增运算，循环内部的代码执行完成后，对循环变量进行自增
for(var i = 1; i <= 10; i++) {
console.log("sale No." + i + " tickets")
}
image.png
image.png
（2）
break关键字作用：不论循环条件是否为
true，直接终止循环，跳出循环后继续执行循环后面的代码需求：火车站售票
(1~10号票)，但是售出第6张票时，执行反恐演练；火车站提前关闭！
// 3、正常售票，售出第6张票时，反恐演练提前关闭火车站
for(var i = 1; i <= 10; i ++){
console.log("售出了 No." + i + "号票")
// 当售出第6张票时，关闭火车站/售票窗口
if( i === 6 ){
console.log("执行反恐演习，关闭火车站")
// 循环中一旦执行了break这行代码，不论循环的条件是否为true，这个循环直接结束
break
}
}
console.log("美好的一天结束了..")
image.png
（3）
continue关键字作用：终止本次循环（不再继续执行本次循环后面的代码），直接开始下一次循环
火车站售票：预留6号票和8号票
// 4、continue关键字
// for(var i = 1; i <= 10; i++) {
// if(i === 6 || i === 8) {
// console.log("保留票，不能售出")
// } else {
// console.log("售出了.No." + i + "号票")
// }
// }
for(var i = 1; i <= 10; i++) {
if(i === 6 || i === 8) {
console.log("保留票，不能售出")
// 中断本次循环（本次循环结束，后面的代码不再执行；直接开始下一次循环）
continue
}
console.log("售出了.No." + i + "号票")
}
image.png
JavaScript中
while循环区分为
-
while循环 -
do-while循环
（1） 基本语法
while循环基本语法
// 练习1、while循环
// 循环变量，写在循环外面
var i = 1
// 循环上，添加条件判断
while(i <= 10) {
console.log("售出了" + i + "号票")
// 循环内部，修改循环变量
i++
}
// 练习2、break关键字
var i = 1
while(i <= 10) {
console.log("售出了" + i + "号票")
if(i === 6) {
console.log("反恐演练，提前下班")
break
}
i++
}
// 练习3、continue关键字
var i = 1
while(i <= 10) {
if(i === 6 || i === 8) {
console.log("保留票---------------")
// 注意：一定要记得写循环变量的修改
i++
continue
}
console.log("售出了" + i + "号票")
// 注意：一定要记得写循环变量的修改
i++
}
do-while循环基本语法
// 4、do-while循环
// 循环条件写在外面
var i = 1;
// 先循环，后判断条件（do-while循环不论条件是否为true，至少会执行一次循环代码）
do {
console.log("售出了" + i + "号票")
// 注意：一定要记得修改循环变量，避免造成死循环的情况
i++
}while(i <= 10)
3、死循环
循环中有一种非常特殊的循环：循环条件可能永远为true，这样的循环会一直进行下去，直到循环条件主动的修改为false或者循环内部主动的break
- 开发过程中，如果有固定的循环结束条件，尽量避免出现死循环
- 如果不确定循环结束条件，需要通过死循环完成重复执行，也需要明确可能跳出循环的条件
案例：完成一局游戏的时候，可以通过死循环的方式控制单局游戏的进行，游戏结束后用户只能通过再来一局的方式开启新的游戏！
<body>
<button id="start">开始游戏</button>
<button id="restart">再来一局</button>
<script>
// 定义一个变量，控制当前游戏是否已经开始
// true: 游戏已经开始
// false: 游戏尚未开始
var flag = false
var _start = document.getElementById("start")
var _restart = document.getElementById("restart")
// 开始游戏
_start.onclick = function() {
if(!flag) { // 游戏尚未开始，开启游戏
// 游戏已经开始，修改flag
flag = true
// 开启游戏
_start.innerText = "暂停游戏"
_restart.style.display = "inline-block"
// 重复执行某些事情
while (flag) {
var result= confirm("游戏正在进行中....(是否确定退出游戏)")
if(result) {
alert("游戏准备退出")
flag = false
// 游戏重启
_start.innerText = "开始游戏"
_restart.style.display = "none"
}
}
}
}
_restart.onclick = function() { // 再来一局
// 游戏已经开始的情况下，才能再来一局
if(flag) {
// 游戏一旦重启，修改flag
flag = false
// 游戏重启
_start.innerText = "开始游戏"
_restart.style.display = "none"
}
}
</script>
</body>
二、循环案例开发
(1） 1..100的和
for循环、while循环、do-while循环实现
// 1、模拟 1..5的和：观察代码，哪些代码是重复的？重复的代码中哪些部分是有规律变化的，将重复的代码我们一般通过循环进行处理，有规律变化的部分会通过循环变量处理
// var sum = 0; // 记录总和
// sum += 1
// sum += 2
// sum += 3
// sum += 4
// sum += 5
// console.log("1..5的和：", sum)
// 2、循环简化，1..5的和
// var sum = 0
// for(var i = 1; i <= 5; i++){
// sum += i
// }
// console.log("1..5的和：", sum)
// 3、循环计算1..100的和
var sum = 0
for(var i = 1; i <= 100; i++){
sum += i // 等价于 sum = sum + i
}
console.log("1..100的和：", sum)
（2）1..100奇数的和、偶数的和
// 4、1..100奇数的和
var sum = 0; // 记录总和的变量
for(var i = 1; i <= 100; i++) {
// 如果i是奇数的话，添加到总和中
if(i % 2 == 1) {
// 奇数
sum += i // sum = sum + i
}
}
console.log("1..100奇数的和：", sum)
// 5、1..100偶数的和
var sum = 0; // 记录总和的变量
for(var i = 1; i <= 100; i++) {
// 判断是否偶数
if(i % 2 == 0) {
sum += i
}
}
console.log("1..100偶数的和：", sum)
(3） 循环打印图形
// 1、打印三角形
// 第一行1列、第二行2列、第三行3列..
for(var i = 1; i <= 5; i++) {
// 网页中写入一个字符内容
// document.write("*<br/>")
// 第一行输出1列；第二行输出2列...
for(var j = 1; j <= i; j++) {
document.write("*")
}
// 一行内容输出完成后，打印换行
document.write("<br />")
}
// 2、打印三角形
// 第一行1列、第二行3列、第三行5列...
for(var i = 1; i <= 5; i++){
// document.write("*<br/>")
// 第一行1列、第二行3列、第三行5列...
for(var j = 1; j <= (2*i - 1); j++) {
document.write("*")
}
document.write("<br />")
}
// 3、打印等腰三角形
for(var i = 1; i <= 5; i++){
// document.write("*<br />")
// 打印空格
for(var m = 5; m > i; m--){
document.write("<span></span>")
}
// 打印符号
for(var j = 1; j <= (2*i-1); j++){
document.write("<span>*</span>")
}
document.write("<br />")
}
// 4、打印菱形
// 输出9行
for(var i = 1; i <= 9; i++) {
// document.write("*<br />")
// 输出正三角形
for(var m = 5; m > i; m--) {
document.write("<span></span>")
}
for(var j = 1; j <= (2*i-1) && i <= 5; j++) {
document.write("<span>*</span>")
}
// 输出倒三角形
// 输出空格(6-1 7-2 8-3 9-4)
for(var y = 1; y <= (i-5); y++){
document.write("<span></span>")
}
// 输出符号
// 6行-7列 7行-5列 8-3列 9-1列
// (9-6)*2+1 = 7
// (9-7)*2+1 = 5
// (9-8)*2+1 = 3
// (9-9)*2+1 = 1
for(var x = 1; x <= ((9-i)*2+1) && i > 5; x++){
document.write("<span>*</span>")
}
document.write("<br />")
}
// 5、打印长方形
for(var i = 1; i <= 6; i++) {
// document.write("=<br />")
for(var j = 1; j <= 50; j++) {
// 第一行/最后一行全部输出
if(i!==1 && i!== 6){
// document.write("=")
// break
if(j === 1 || j === 50){
document.write("<span>=</span>")
} else {
// console.log("<span></span>")
document.write("<span></span>")
}
continue
}
document.write("<span>=</span>")
}
document.write("<br />")
}
（4） 水仙花数
// 水仙花数
// 是一个三位数
// 每个位数上的数字的3次方的和，等于它本身
// 1^3 + 5^3 + 3^3 = 153
for(var i = 100; i <= 999; i++){
// 拆分数字
var b = parseInt(i / 100)
var s = parseInt(i % 100 / 10)
var g = parseInt(i % 10)
// 判断是否水仙花数
if(b*b*b + s*s*s + g*g*g === i) {
console.log("水仙花数：", i)
}
}
（5） 打印10个斐波那契数列
// 2、斐波那契数列
var num1 = num2 = 1
var next = 0
console.log(num1, num2)
for(var i = 1; i <= 10; i++) {
next = num1 + num2
console.log(next)
// 交换数据
num1 = num2 // num2数据存放到num1中
num2 = next // next数据存放到num2中
}
// 3、打印100内斐波那契数列
var num1 = num2 = 1
var next = 0
console.log(num1, num2)
// 死循环，获取100内斐波那契数列
// for(;;){}，省略了数据初始化、数据条件和循环变量自增，但是不能省略分号
for(;;) {
next = num1 + num2
if(next > 100){
break
}
console.log(next)
// 交换数据
num1 = num2 // num2数据存放到num1中
num2 = next // next数据存放到num2中
}
有和我一样在学习WEB前端的看完点个关注和赞吧，每天都会更新不一样的内容，有什么不懂的都可以下方留言。
