JavaScript 基础学习笔记（四）：循环语句、while循环、中止循环、无限循环、for 语句

本文主要是介绍JavaScript 基础学习笔记（四）：循环语句、while循环、中止循环、无限循环、for 语句，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、循环语句

1.1 while循环

1.2 中止循环

1.3 无限循环

二、综合案例-ATM存取款机

三、for 语句

一、循环语句

1.1 while循环

while : 在…. 期间，所以 while循环就是在满足条件期间，重复执行某些代码。

语法：

while (条件表达式) {// 循环体    
}

例如：

// while循环: 重复执行代码// 1. 需求: 利用循环重复打印3次 '你比从前快乐'
let i = 1
while (i <= 3) {document.write('你比从前快乐~<br>')i++   // 这里千万不要忘了变量自增否则造成死循环
}

循环三要素：

1.初始值（经常用变量）

2.终止条件

3.变量的变化量

例如：

<script>// // 1. 变量的起始值// let i = 1// // 2. 终止条件// while (i <= 3) {//   document.write('我要循环三次 <br>')//   // 3. 变量的变化量//   i++// }// 1. 变量的起始值let end = +prompt('请输入次数:')
let i = 1
// 2. 终止条件
while (i <= end) {document.write('我要循环三次 <br>')// 3. 变量的变化量i++
}</script>

1.2 中止循环

break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）

continue 中止本次循环，一般用于排除或者跳过某一个选项的时候

<script>// let i = 1// while (i <= 5) {//   console.log(i)//   if (i === 3) {//     break  // 退出循环//   }//   i++// }let i = 1while (i <= 5) {if (i === 3) {i++continue}console.log(i)i++}</script>

1.3 无限循环

1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）

2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。

// 无限循环  
// 需求： 页面会一直弹窗询问你爱我吗？
// (1). 如果用户输入的是 '爱'，则退出弹窗
// (2). 否则一直弹窗询问// 1. while(true) 无限循环
// while (true) {
//   let love = prompt('你爱我吗?')
//   if (love === '爱') {
//     break
//   }
// }// 2. for(;;) 无限循环
for (; ;) {let love = prompt('你爱我吗?')if (love === '爱') {break}
}

二、综合案例-ATM存取款机

分析：

①：提示输入框写到循环里面（无限循环）

②：用户输入4则退出循环 break

③：提前准备一个金额预先存储一个数额 money

④：根据输入不同的值，做不同的操作

(1) 取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额

(2) 可以使用 if else if 多分支来执行不同的操作

完整代码：

<script>// 1. 开始循环 输入框写到 循环里面// 3. 准备一个总的金额let money = 100
while (true) {let re = +prompt(`
请您选择操作：
1.存钱
2.取钱
3.查看余额
4.退出
`)// 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环if (re === 4) {break}// 4. 根据输入做操作switch (re) {case 1:// 存钱let cun = +prompt('请输入存款金额')money = money + cunbreakcase 2:// 存钱let qu = +prompt('请输入取款金额')money = money - qubreakcase 3:// 存钱alert(`您的银行卡余额是${money}`)break}
}
</script>

三、for 语句

实现循环的 3 要素

<script>// 1. 语法格式// for(起始值; 终止条件; 变化量) {//   // 要重复执行的代码// }// 2. 示例：在网页中输入标题标签// 起始值为 1// 变化量 i++// 终止条件 i <= 6for(let i = 1; i <= 6; i++) {document.write(`<h${i}>循环控制，即重复执行<h${i}>`)}
</script>

变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。

跳出和终止循环

<script>// 1. continue for (let i = 1; i <= 5; i++) {if (i === 3) {continue  // 结束本次循环，继续下一次循环}console.log(i)}// 2. breakfor (let i = 1; i <= 5; i++) {if (i === 3) {break  // 退出结束整个循环}console.log(i)}
</script>

结论：

JavaScript 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。
起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
当如果明确了循环的次数的时候推荐使用for循环,当不明确循环的次数的时候推荐使用while循环