05_JavaScript的循环语句

认识循环

在开发中我们经常需要做各种各样的循环操作：
- 比如把一个列表中的商品、歌曲、视频依次输出进行展示；
- 比如对一个列表进行累加计算；
- 比如 运行相同的代码将数字 1 到 10 逐个输出
循环是一种重复运行同一代码的方法
- 如果是对某一个列表进行循环操作，我们通常也会称之为遍历或者迭代
在JavaScript中支持三种循环方式
while循环
do…while循环
for循环

while循环

while循环的语法如下

当条件成立时，执行代码块
当条件不成立时，跳出代码块

while(循环条件) {
  //条件成立 执行循环代码块
  //条件不成立时 跳出循环
}

如果条件一直成立（为true），那么会产生死循环
- 这个时候必须通过关闭页面来停止死循环
- 开发中一定要避免死循环的产生
练习一：打印10次Hello World

var i = 0;
while(i < 10) {
  console.log("hello world")
  i++
}

练习二：打印0~99的数字

var i = 0
while(i < 100) {
  console.log(i)
  i++
}

练习三：计算0~99的数字和

var i = 0
var sum = 0
whilr(i < 100) {
  sum += i
  i++
}
console.log(sum)

练习四：计算0~99所有奇数的和

var i = 0
var sum = 0
while(i < 100) {
  if(i % 2 !== 0) {
    sum += i
  }
  i++
}
console.log(sum)

do…while循环

do…while循环和while循环非常像，二者经常可以相互替代**(不常用)**
- 但是do…while的特点是不管条件成不成立，do循环体都会先执行一次
- ```
do {
  //循环代码块
} while(循环条件)
```
通常我们更倾向于使用while循环

练习一：打印10次Hello World

var i = 0
do {
  console.log("hello world")
  i++
} while(i < 10)

练习二：计算0~99的数字和

var i = 0
var sum = 0
do {
  sum += i
  i++
} while(i < 100)
console.log(sum)

for循环

for 循环更加复杂，但它是最常使用的循环形式

示例如下

//打印0-9的数字
for(let i = 0; i < 10; i++) {
  console.log(i)
}

练习一：打印10次Hello World

for(let i= 0; i < 10; i++) {
  console.log("hello world")
}

练习二：打印0~99的数字

for(let i = 0; i < 100; i++) {
  console.log(i)
}

练习三：计算0~99的数字和

var sum = 0
for(let i = 0; i < 100; i++) {
  sum += i
}
console.log(sum)

练习五：计算0~99所有偶数的和

var sum = 0
for(let = 0; i < 100; i++) {
  if(i % 2 === 0) {
    sum += i
  }
}
console.log(sum)

for循环的嵌套

什么是循环的嵌套呢？（日常开发使用不算多，在一些算法中比较常见）
- 在开发中，某些情况下一次循环是无法达到目的的，我们需要循环中嵌套循环

案例一：在屏幕上显示一个 6×6的❤ 的矩形

for (let i = 1; i <= 6; i++) {
	document.write("<div>");
	for (let j = 1; j <= 6; j++) {
		document.write("❤");
	}
	document.write("</div>");
}

案例二：在屏幕上显示一个三角的❤图像

for (let i = 1; i <= 6; i++) {
	document.write("<div>");
	for (let j = 1; j <= i; j++) {
		document.write("❤");
	}
	document.write("</div>");
}

案例三：在屏幕上显示一个九九乘法表

for (let i = 1; i <= 9; i++) {
	document.write("<div>");
	for (let j = 1; j <= i; j++) {
		document.write(`${j} * ${i} = ${j * i} &nbsp`);
	}
	document.write("</div>");
}

循环控制

循环的跳转（控制）
- 在执行循环过程中, 遇到某一个条件时, 我们可能想要做一些事情；
- 比如循环体不再执行(即使没有执行完), 跳出循环；
- 比如本次循环体不再执行, 执行下一次的循环体；

循环的跳转控制

break: 直接跳出循环, 循环结束

break 某一条件满足时，退出循环，不再执行后续重复的代码

//break关键字的使用 需求:数组中遇到acd跳出循环
var names = ['abc', 'acd', 'aaa', 'bbb']
for(let i = 0; i < names.length; i++) {
  if(names[i] === 'acd') {
    //条件满足时 跳出循环
    break
  }
}

continue: 跳过本次循环次, 执行下一次循环体

continue 指令是 break 的“轻量版”。
continue 某一条件满足时，不执行后续重复的代码

//continue关键字的使用 需求:数组中不打印acd
var names = ['abc', 'acd', 'aaa', 'bbb']
for(let i = 0; i < names.length; i++) {
  if(names[i] === 'acd') {
    //条件满足时 跳过本次循环
    continue
  }
  console.log(names[i])
}

综合案例

猜数字游戏
电脑随机生成一个0~99之间的数字；
玩家有7次猜测的机会
玩家猜测一个数字, 输入到程序中
电脑根据输入的数字打印: 猜大了/猜小了/猜对了的情况；
猜对了, 那么游戏结束，显示恭喜您；

7次机会用完打印: 您的次数用完了, 您失败了

//随机生成一个0-99的数
var randomNum = Math.floor(Math.random() * 100);
for (let i = 0; i < 7; i++) {
	var inputNum = Number(prompt("请输入0-99的数字"));
	if (inputNum === randomNum) {
		alert("恭喜你猜对了");
		break;
	} else if (inputNum > randomNum) {
		alert(`您猜大了,您还有${6 - i}次机会`);
	} else {
		alert(`您猜小了,您还有${6 - i}次机会`);
	}
	if (i === 6) {
		alert("您的机会已经用完了,您失败了");
	}
}