1.while循环

2.for 循环

while 循环

①断点调试

Ⅰ、作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

Ⅱ、浏览器打开调试界面

按F12打开开发者工具
点到sources一栏
选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

②while循环

循环：重复执行某段代码，而 while : 在…. 期间

Ⅰ、while循环语法：

 while (循环条件) {
            要重复执行的代码(循环体)
        }

释义：

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

Ⅱ、while 循环注意事项：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

所以，循环需要具备三要素：

变量起始值
终止条件（没有终止条件，循环会一直执行，造成死循环）
变量变化量（用自增或者自减）

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

案例:

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

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

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

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

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

for循环

Ⅰ、for循环和while循环有什么区别呢：

当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环

①for循环语法

也是重复执行代码
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

 for(声明记录循环次数的变量；循环条件；变化值){
            循环体
        }

 <script>
  	 //实现偶数和   1-100
      //  计算偶数和
      let sum = 0;
			//变量		循环条件	变化值
      for (let index = 1; index <= 100; index++) {
        // 判断偶数的条件 方法1
        // if (index % 2 === 0) {
        //   sum = sum + index;
        // }
		//方法2
        // (index%2===0)&&(sum=sum+index)
        (index%2===0)&&(sum+=index)
      console.log(sum);
    </script>

②循环结束：

理解:

控制循环结束

Ⅰ、continue ：跳过本次循环继续开启下次循环（不是必须）

continue 想要跳过这个循环不一定通过它
可以通过 if else 也能实现类似的功能（根据条件来执行某段代码）

for (let index = 1; index <= 10; index++) {
      //   // 判断当前的index是不是奇数
	if (index % 2 !== 0) {
      //若为奇数，就跳过这次循环，不会继续输出  
	continue;
	}
   //偶数时打印 
	console.log(index,"⭐");
}

continue 通过 if else实现类似功能

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

Ⅱ、break：跳出所在的循环，直接循环结束不玩了

也不是必须，我们也是可以通过 if-else 来实现它的功能
但是如果可以使用break的话尽量使用它（性能更加好）因为break会终止剩下的循环

for (let index = 1; index <= 10; index++) {
        // 如果当前的index = 5 ，就不再往下 循环了，就终止循环
        if (index === 5) {
          break;
        }
       //  index===5&&break // 不能简写 报错！！
        console.log(index);
    	console.log("代码调用的次数",index);//使用break，直接终止，不再调用
      }

break通过 if else实现类似功能 (但建议使用break，性能更好)

for (let index = 1; index <= 10; index++) {
        if (index < 5) {
        console.log(index);
        }
    console.log("代码调用的次数",index);//使用 if else ，虽不输出，但代码会全部调用
}

③循环嵌套

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

语法：

for(外部声明记录循环次数的变量；循环条件；变化值){
            for(内部声明记录循环次数的变量；循环条件；变化值){
            循环体
            }
        }

<script>
        let day = +prompt('请输入第几天要背的单词');
        let num = +prompt('要背几个单词');

         for (let index1 = 1; index1 <= day; index1++) {
        document.write(`第${index1}天<br/>`);

        // 第一天要背5个单词
        // 执行5次背单词的 开始
        for (let index2 = 1; index2 <= num; index2++) {
          document.write(`记住第${index2}个单词<br/>`);
        }
        // 执行5次背单词的 结束
      }
    </script>

JavaScript基础第四天