循环结构
掌握循环结构，实现一段代码重复执行
断点调试
学会通过调试检查代码
作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
浏览器打开调试界面 按F12打开开发者工具 点到sources一栏
选择代码文件 断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来
while循环
掌握while循环语法，能重复执行某段代码
循环：重复执行某段代码， 而 while : 在…. 期间
- while 循环语法
释义： 跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
- while 循环注意事项：
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。 所以，
循环需要具备三要素：
变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环）
变量变化量（用自增或者自减）
<script>
// 变量初始值
let i = 1
// 循环的终止条件 大于10才会终止
while(i <= 10){
document.write('月薪过万 <br>')
// 变量需要改变 当循环之后 后置加1 超过10 循环停止
i++
}
</script>
让循环变为可控 由用户输入：
在循环外添加循环次数的变量 由用户输入
<script>
let num = +prompt('请输入你的次数')
let i = 1
while( i < num ){
document.write(`月薪过万 ${i} <br>`)
i++
}
</script>
页面弹框演示：问答流
需求：页面弹出对话框，‘你爱你的家人吗’，如果输入‘爱’，则结束，否则一直弹出对话框 分析：
①：循环条件： 不是爱则一直循环
②：循环的时候，重新让用户输入
<script>
// 初始值为空
let love
// 循环条件里设置终止条件
while(love !== '爱' ){
// 循环里设置弹窗 给love赋值跟循环条件一样的值
// 当弹窗输入的值符合条件 终止循环 反之继续
love = prompt('拜月：你认为世间有爱吗，你爱你的家人吗')
}
</script>
案例：计算 1到100 偶数的和
核心思路： 声明累加和的变量 sum
首先利用if语句把 i 里面是偶数筛选出来
把 筛选的 i 加到 sum 里面
<script>
let i = 1
sum = 0
while(i <= 100){
// 左边满足条件了等于 true 采取执行右边的代码
// 也就是i 在偶数的情况下生效 2 4 6 8 10
// (i % 2 ===0) 这行代码不能直接执行 满足某些条件才能执行
(i % 2 ===0) && (sum += i);
i++;
// 无论当前的i是偶数还是奇数 i++都要执行 必须进行下一轮的循环
}
console.log( '你要的1-100的偶数和', sum);
</script>
案例 ：计算 1到100 的总和并输出
核心思路： 声明累加和的变量 sum 每次把 i 加到 sum 里面
<script>
// 初始变量为1
let i = 1
// sum 赋值为0
sum = 0
while(i <= 100){
// 第一次 sum = sum + i （0+1=1） 结果出来后 i再进行自增 此时为2
// 第二次 此时i = 2 sum=1 2+1=3 sum的值为3 i再进行自增 此时为3
// 第三次 此时i = 3 sum=3 3+3=6 sum的值为6 i再进行自增 此时为4 以此类推
// sum = sum + i
// 两种方式计算总和 简写
sum += i
i++
}
console.log(sum);
</script>
案列：综合案例 简易atm取款机
<script>
// 设置一个存储的金额
let money = 10000
// 设置一个 空类型 undefined
let day
// 设置一个循环条件
while(day !== 4){
// 疯狂弹窗
// 一定要让变量发生变化
day = +prompt(`请选择你的操作:
1、取款
2、存款
3、查看余额
4、退出`)
// 开始对用户的输入做判断 点击不同的数字开始不同的功能
if (day === 1){
// 弹出存取金额的功能 设置一个num1 表示赋值提取的数字金额
let num1 = +prompt('请输入你要取多少金额')
// 已有的金额 减去 提取的金额 最后得出money 所剩的余额
money -= num1
alert(` 你的余额 ${money}`)
}
else if (day === 2){
// 弹出存取金额的功能 设置一个num2 表示赋值存入的数字金额
let num2 = +prompt('请输入你要存多少金额')
// 已有的金额 减去 存入的金额 最后得出money 的余额
money += num2
alert(` 你的余额 ${money}`)
}
else if (day === 3){
alert(money)
}
else if(day === 4){
alert('退出成功')
}
}
</script>
不一定要弹窗 设置 console.log( ); 也可 直接在控制台 查看
for循环
for循环语法
也是重复执行代码 好处：把声明起始值、循环条件、变化值写到一起，让人一目了然
<script>
for (声明记录循环次数的变量； 循环条件；变化值) {
循环体
}
</script>
for循环和while循环有什么区别呢：
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环
演示案例 ：利用for循环输出1~100
<script>
// for循环的代码 要去记住
/* let i = 1; 记录循环的次数变量
循环条件：i 要满足什么条件 循环才会被执行
变化值 i++
运作的过程
1、先执行 let i = 1;
2、再执行 i <= 100 的判断
3、执行console.log(i);
4、再去执行 i++;
5、去执行判断 i <= 100
6、又去执行console.log(i);
7、再去执行 i++;
8、以此类推 直到i等于100 循环条件终止
*/
for (let index = 1; index <= 100; index++) {
console.log(index);
}
</script>
演示案例 ：也是用循环做出 1到100 的偶数和 for循环演示
<script>
sum = 0
// 判断偶数和的条件
for (let i = 1; i <= 100; i++) {
// 两种计算方式
// 是偶数了才输出
if(i % 2 === 0){
sum += i
}
// if((i % 2 === 0) && (sum += i) );
// console.log(sum);如果加在循环里 每次循环都会打印一次
// console.log(sum);
}
console.log(sum);
</script>
案例：循环星星⭐
<script>
// 用for循环打出五百个小星星
// for (let i = 0; i <= 50; i++) {
// 直接输出打印 一次一次的打印在页面上
// document.write('⭐')
// }
// 声明一个变量 做一个容器装星星
let star = ""
for(let i = 0; i <= 50; i++){
// star="⭐"+star
// 把星星装在容器里面 然拼接一次输出在页面上
star += "⭐"
}
document.write(star)
</script>
for 循环嵌套
一个循环里再套一个循环，一般用在for循环里
<script>
for (声明记录循环次数的变量； 循环条件；变化值) {
for (声明记录循环次数的变量； 循环条件；变化值) {
循环体
}
}
</script>
循环嵌套演示
计算： 假如每天记住5个单词，3天后一共能记住多少单词？ 拆解：
第一天 ： 5个单词
第二天： 5个单词
第三天： 5个单词
<script>
// 设置外部循环条件 document.write 输出展示
for (let index = 1; index <= 3; index++) {
document.write(`第${index}天 <br/>`)
// 再设置内部循环条件
for (let index1 = 1; index1 <=5; index1++) {
document.write(`记住第${index1}个单词 <br/>`)
}
}
</script>
与上个案例相同 但改为由用户输入控制循环条件
<script>
// 用户输入天数 单词数 day 天数
let day = +prompt('请选择你要读的天数')
let num = +prompt('请选择你要读的单词数')
for (let index = 1; index <= day; index++) {
document.write(`第${index}天 <br/>`)
for (let index1 = 1; index1 <= num; index1++) {
document.write(`记住第${index1}个单词 <br/>`)
}
}
</script>
九九乘法表：
span{
border: 1px solid #000;
display: inline-block;
width: 100px;
height: 25px;
padding: 2px 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 把原本的倒三角星星复制过来 星星就相当于1x1=1本身
// 先把行数列数显示出来 再把里面的⭐设置我们想要的数字
// 外部循环的是当前的行数
for (let index = 1; index <= 9; index++) {
// 内部循环的是当前的列
for (let index1 = 1; index1 <= index; index1++){
// 1 x 1 = 1
// 行数 x 列数 = 值
// 设置一个它们相乘后的值
let num = index1 * index
// 把里面的⭐替换成行数x列数=值
document.write(`<span> ${index1} x ${index} = ${num}</span>`)
}
document.write(`<br/>`)
}
</script>
switch循环
switch-case 功能和 if else-ifelse一模一样
<script>
// switch-case 功能和 if else-ifelse一模一样
// switch-case-break-defaul
// 1 switch(day) 想要对 day做判断
// 2 case 1 : day ===1 满足条件
// 3 break 打断当前的case
// 4 default 如果以上的 case 都不满足，最终 执行default里面的代码
let dey = 1
switch (dey) {
case 1:
// 执行1的业务逻辑
console.log('断手');
case 2:
console.log('断脚');
case 3:
console.log('断手断脚');
break;
// 以上不满足执行以下代码
default:
console.log('逗你玩的');
break;
}
</script>
跳出循环
循环结束： continue：结束本次循环，继续下次循环
<script>
let sum = 0
for (let i = 1; i <= 100; i++) {
if (i % 2 !== 0) {
// 奇数
// 中止这一次，继续下一次
continue
}
sum += i
}
console.log(sum)
</script>
break：跳出所在的循环
<script>
// 控制循环结束
/* 1、continue 跳过本次循环 继续开启下次循环
continue想要跳过这个循环 不一定通过它
我们自己的 if else 也能实现类似功能 */
/* 2、break 直接循环结束 不玩了
也不是必须 我们也是可以通过 if else 来实现它的功能
但是如果可以 使用break的话 尽量使用它 （性能更加好）因为break 会终止剩下的循环
*/
for (let index = 1; index <= 10; index++) {
// 如果当前的index = 5 ， 就不再往下循环了 就终止循环
if(index === 5) {
// 终止第五次循环
// break;
// 跳过5 继续下次循环
continue
}
console.log(index)
}
</script>
奇数
<script>
/*如果当前的index 是一个奇数 下面的代码就不要再运行了 开启下一个循环
*/
// 只显示 奇数 单数
for (let index = 1; index <= 10; index++) {
// 判断当前的index是不是奇数
if (index % 2 !== 0) {
console.log(index);
continue;
}
}
</script>
