JavaScript 基础（04）

循环结果

断点调试

在学习期间可以帮助更好的理解代码运行，工作时可以更快找到bug
浏览器打开调试界面
1. 按F12 打开开发者工具
2. 点到 sources 源代码 一栏
3. 选择代码文件
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

while循环

和 if 语句很像，都要满足小括号里的条件为 true 才会执行代码
while 大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直接括号内条件不满足，即跳出

 <script>
      // 1 变量初始值
      let i = 1;
      // 2 终止条件
      while (i <= 10) {
        document.write(`这个是第${i}循环`);
        // 3 变量需要改变
        i++;
      }
    </script>

循环三要素
1. 变量起始值
2. 终止条件
3. 变量需要改变（用增或者自减）

循环案例

在页面中打印输出10句“月薪过万”
需求：使用while循环，页面中打印，可以添加换行效果

  <script>
      let num = +prompt("你想循环几次");
      let i = 1
      while (i <= num) {
        document.write(`月薪过万${i}<br>`);
        i++
      }
    </script>

案例2

需求：使用while循环，页面中打印，可以添加换行效果
1. 页面输出1-100

   <script>
      let i = 1
      let sun = 0
      while(i<=100){
          document.write(`${i}<br>`)
          i++
      }
     
    </script>

2 . 计算从1加到100的总和并输出

    <script>
        let i = 1
        let sun = 0
        while(i <= 100){
          sun = sun + i
          i++
      }
      console.log('总和',sun);
    </script>

3.计算1-100之间的所有偶数和

<script>
      /* 
     1-100 偶数和 
     2 + 4 + 6 + 8 + 10。。。。
     去判断当前是不是偶数呢  对2 取整  求余 没有余数 
      
     2 % 2 =  0
     4 % 2 =  0
     5 % 2 = 1


     原因：
     1 偶数和奇数判断条件   对2求余 是否等于 0  
     2 if条件 来判断当前的i的是不是偶数
       是  去执行什么的样 业务  计算总和  sum += i ;
       
      
       */

      let i = 1;
      let sum = 0;
      while (i <= 100) {
        // 这一行代码不能直接执行 满足某些条件才执行
        if (i % 2 === 0) {
          // console.log('i', i);
          sum += i;
        }

        // 无论当前的i是偶数还是奇数  i++ 都要执行 必须进行下一轮的循环
        i++;
      }

      console.log('你要的1-100的偶数和', sum);
    </script>

4.页面弹窗

需求：页面弹出对话框，‘你爱我吗’，如果爱，则结束，否则一直弹出对话框

    <script>
      /* 
      需求：  问是否 爱我   是就 不再问了 不是的就一直问

      分析
        一直问  prompt  一直被执行  肯定要放在 while循环里面 
        决定能否继续循环的条件是什么。。。
        1 i<10 ... 
        2 str !== "爱" 就一直问 
       */

      //  1 定义 初始变量
      let str; // undefined

      // 2 判断的条件  （满足什么条件 就继续 执行循环）

      while (str !== '爱') {
        // 弹窗
        str = prompt('你爱不爱我?');
      }

      //  变量的初始值    变量判断循环的条件  变量需要被修改
    </script>

5.简易ATM取款机案例

需求：用户可以选择存钱取钱查看余额和退出功能

 <script>
      /* 
      需求：

      0 存取款 
        定义一个 存款的金额 
      

      1 用户输入 “1” 存款  
        1 再弹出一个窗口 让用户来输入想要存款的数量 num1 
        2 money += num1;
        
      2 用户输入 “2” 取款 
        1 再弹出一个窗口 让用户来输入想要取款的数量 num2 
          money -+ num2;
         
      3 用户输入 “3”   解决了
        输出（3种输出方式）一个 金额
        
      4 用户输入 “4” 结束了。。  解决了 

       */

      let input;
      let money = 0; // 存款的金额 0

      while (input !== 4) {
        input = +prompt(`
        1 存款
        2 取款
        3 查看余额
        4 退出
        `);

        // 开始对用户的输入做判断
        if (input === 1) {
          let num1 = +prompt('请输入你想要存款的数量');
          money += num1;
        } else if (input === 2) {
          let num2 = +prompt('请输入你想要取款的数量');
          money -= num2;
        } else if (input === 3) {
          alert(money);
        } else if (input === 4) {
          console.log('开始退出了');
        }
      }
    </script>

循环和数组

for - 循环

for循环语法
1. 也是重复执行代码
2. 把声明起始值循环条件变化值写到一起让人一目了然

   <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
      9 又去执行 console.log(i)
      10 i++ 
       */

      /* 
      1 先执行  let i = 1 ;
      2 执行 判断 i <=100;
      3 执行 console.log(i)
      4 执行 i++
      
      重复 2 
      重复 3 
      重复 4 
       */

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

        for (let index = 1; index <=100; index++) {
          console.log(index);
        }
    </script>

案例

利用 for 循环输出1 - 100岁

<script>
    for (let index = 1;index < 100;index++){
        console.log(`${index}岁`)
    }
</script>

求 1 - 100 之间所有的偶数和

 <script>
      //  计算偶数和
      let sum = 0;
      for (let index = 1; index <= 100; index++) {
        // 判断偶数的条件
        // if (index % 2 === 0) {
        //   sum = sum + index;
        // }

        // (index%2===0)&&(sum=sum+index)
        (index%2===0)&&(sum+=index)
     
      }

      console.log(sum);
    </script>

页面中打印500个小星星 ⭐⭐⭐⭐⭐

<script>
    for (let index = 1;index < 500 ;index++){
        document.write(`⭐`)
    }
</script>

循环退出

循环结束
1. continue ：结束本次循环，继续下次循环
2. break : 跳出所在的循环
控制循环结束
1. continue 跳过本次循环继续开启下次循环（不是必须）
  
  continue 想要跳过这个循环不一定通过它我们自己 if else 也能实现类似的功能
2. break 直接循环结束不玩了
  
  也不是必须，我们也是可以通过 if - else 来实现他的功能但是如果可以使用break 的话尽量使用它（性能会好一点）因为 break 会终止剩下的循环

<script>

如果当前的index 是一个奇数  下面的代码就不要再运行了 开启下一个循环
      */

      // 只显示 奇数 单数
      // for (let index = 1; index <= 10; index++) {
      //   // 判断当前的index是不是奇数
      //   if (index % 2 !== 0) {
      //     // console.log(index);

      //     continue;
      //   }

      //   console.log(index,"⭐");
      // }
      // 只显示 奇数 单数
      // for (let index = 1; index <= 10; index++) {
      //   // 判断当前的index是不是奇数
      //   if (index % 2 !== 0) {
      //     // 奇数
      //   }else{
      //     // 偶数
      //     console.log(index,"⭐");
      //   }

      // }

      /*
      continute 功能 其实 也是可以通过 if else 来模拟和实现
        if else  根据条件来执行某段代码

        continute 跳过循环（不想执行某段代码）
       */

      // 只输出偶数
      // for (let index = 1; index <= 10; index++) {
      //   if (index % 2 === 0) {
      //     // 是偶数了才输出
      //     console.log(index);
      //   }
      // }

      // for (let index = 1; index <= 10; index++) {

      //   if (index % 2 !== 0) {
      //     // 是奇数的话  就跳过这次循环
      //     continue
      //   }
      //   console.log(index);
      // }

      for (let index = 1; index <= 10; index++) {
        // 如果当前的index = 5 ，就不再往下 循环了，就终止循环
        if (index === 5) {
          break;
        }
        // //  index===5&&break // 不能简写 报错！！
        console.log(index);

        // if (index < 5) {
        //   console.log(index);
        // }
        console.log("代码调用的次数",index);
      }
    </script>

循环嵌套

一个循环里面在套一个循环，一般用在for 循环里

案例

for 循环嵌套 - 应用

计算：假如每天记住5个单词，3天后一共能记住多少单词？

拆解：

第一天： 5个单词

第二天： 5个单词

第三天： 5个单词

<script>
    for (index = 1 ;index <= 3 ; index++){
        document.write(`第${index}天`)
        for (index1 = 1 ; index1 <= 5;index1++){
            document.write(`${index1}个单词`)
        }
    }
</script>

JavaScript 基础 （04）

JavaScript 基础 （04）

循环结果

断点调试

while循环

循环案例

案例2

循环和数组

for - 循环

案例

循环退出

循环嵌套

思维导图

JavaScript 基础（04）

JavaScript 基础（04）