前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)

让一段特定的代码执行指定的次数。

一、for循环

1.1、for的语法及简单使用

语法 :

for( 表达式 1；条件表达式 2；表达式 3){
    
     条件成立执行的代码块 }

for(初始化循环变量;判断条件(循环结束的条件);更新循环变量）{
    
    
循环体
}

例1：控制台输出 1-20

for(var i = 1;i <= 20;i++){
    
    
	console.log(i);
}

在这里插入图片描述
上面的写法还可以这样写：

var i = 1
for(;i <= 20;){
    
    
	console.log(i);
	++i
}

在这里插入图片描述

1.2、for循环的执行过程

for(var i = 1;i <= 10;i++){
    
    
	console.log(i);
}

上面的循环的执行过程为：
for（1. 初始化循环变量;2. 判断条件（循环结束的条件）;4. 更新循环变量）{
3. 循环体
}
执行步骤：

初始化循环变量 i= 1;
判断，判断条件是否成立 1<=10;
a. 条件成立，执行循环体，然后到第 3 步;
b. 条件不成立，结束循环;
更新循环变量 i = i + 1;
回到第二步开始执行。
循环三要素：初始化循环变量，跳出循环的条件，更新循环变量，在循环中必须有结
束循环的条件，要更新循环变量，否则会成为死循环。

1.3、for循环操作标签

例：给所有的div标签都添加点击事件，并打印当前节点的内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
    
    
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="Liuqing"> Liuqing1 </div>
  <div class="Liuqing"> Liuqing2 </div>
  <div class="Liuqing"> Liuqing3 </div>
  <div class="Liuqing"> Liuqing4 </div>
  <div class="Liuqing"> Liuqing5 </div>

  <script>
    var Liuqing = document.querySelectorAll('.Liuqing')
    console.log(Liuqing, 'LiuqingLiuqing')
    // 这里目前先使用  let  声明变量
    for (let i = 0; i < Liuqing.length; i++) {
    
    
      Liuqing[i].onclick = function () {
    
    
        console.log(Liuqing[i], 'innerHTML')
      }
    }
  </script>
</body>

</html>

在这里插入图片描述
这里点击了Liuqing1、Liuqing3、Liuqing5。

例2：循环生成 10 个标签p添加到第一个div中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
    
    
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="Liuqing"> Liuqing1 </div>
  <div class="Liuqing"> Liuqing2 </div>
  <div class="Liuqing"> Liuqing3 </div>
  <div class="Liuqing"> Liuqing4 </div>
  <div class="Liuqing"> Liuqing5 </div>

  <script>
    var Liuqing = document.querySelectorAll('.Liuqing')
    console.log(Liuqing, 'LiuqingLiuqing')
    // 这里目前先使用  let  声明变量
    for (let i = 0; i < Liuqing.length; i++) {
    
    
      Liuqing[i].onclick = function () {
    
    
        console.log(Liuqing[i], 'innerHTML')
      }
    }
    var box = Liuqing[0]
    var boxStr = ''
    for (let i = 0; i < 10; i++) {
    
    
      boxStr += '<p>我是p</>'
    }
    box.innerHTML = boxStr
  </script>
</body>

</html>

在这里插入图片描述
点击了Liuqing1、Liuqing2。

1.4、for循环嵌套 ( 双重 for 循环 )

例：实现下图所示图形
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
    
    
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="Liuqing"> Liuqing1 </div>
  <div class="Liuqing"> Liuqing2 </div>
  <div class="Liuqing"> Liuqing3 </div>
  <div class="Liuqing"> Liuqing4 </div>
  <div class="Liuqing"> Liuqing5 </div>

  <script>
    var Liuqing1 = document.getElementsByTagName("div")[0];
    Liuqing1.innerHTML = ''
    // 外循环控制行，内循环控制例
    for (var i = 0; i < 5; i++) {
    
    
      for (var j = 0; j <= i; j++) {
    
    
        Liuqing1.innerHTML += "*";
      }
      Liuqing1.innerHTML += "<br>";
    }
  </script>
</body>

</html>

在这里插入图片描述

二、for-in循环

for-in 循环是专门为循环对象设置的，因为对象没有长度没有顺序，所以不能使用for 循环。
如果真想的话我们可以使用Object.keys和Object.values获取在进行for循环，这个后续说。
for-in循环可以循环数组和对象，推荐循环对象的时候使用。

语法：

 for( var 键值 in 对象名){
    
    操作对象}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
    
    
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="Liuqing"> Liuqing1 </div>

  <script>
    const obj = {
    
    
      name: "LiuQing",
      age: 18,
      sex: '男'
    }
    for (const key in obj) {
    
    
      console.log(key, "代表obj的属性：name,age,sex")
      console.log(obj[key], "代表obj的属性值：LiuQing,18,男")
    }
  </script>
</body>

</html>

在这里插入图片描述

三、for-of循环

for-of循环不能循环对象！！！，可以循环字符串、数组

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
    
    
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="Liuqing"> Liuqing1 </div>

  <script>
    let str = '我是六卿！'
    let arr = ['L', 'i', 'u', 'Q', 'i', 'n', 'g']
    for (const key of str) {
    
    
      console.log(key, '对应下边的值1')
    }
    console.log("==================")
    for (const key of arr) {
    
    
      console.log(key, '对应下边的值2')
    }
    console.log("==================")
    console.log(arr.join(''))
  </script>
</body>

</html>

在这里插入图片描述

四、while、do-while 循环

4.1、while

while 循环先判断后执行

例1：打印 1-20 的数字
var a = 1; // 初始化循环变量
while (a <= 20 ){ // 结束循环的条件
console.log(a);
a++; // 更新循环变量
}

执行步骤：初始化循环变量，判断条件，成立执行循环体，更新循环变量，判断条件，不成立结束。
在这里插入图片描述

4.2、do-while

跟 while 循环是一样的，只是 do-while 先执行，后判断。
例2：

var a = 0;
do {
    
    
console.log(a);
}while (a > 0);

两者的区别，只在第一次条件不成立的时候有区别，do-while 会执行一次，因为是先执行后判断。
在这里插入图片描述

五、break 与 continue

break 与 continue 都是在循环中，中止循环的操作。break 是结束循环，后面的循环都不再执行。continue 是结束本次循环，即本次循环中 continue 以后代码都不再执行，直接执行下一次循环。

break：终止当前循环体；
continue：跳出本次循环，继续下次循环；

例1：获取到数组中第一个偶数能被 2 整除

    var arr = [1, 6, 9, 3, 4, 7, 5];
    for (var k = 0; k < arr.length; k++) {
    
     // 遍历
      if (arr[k] % 2 === 0) {
    
    
        console.log(arr[k]);
        // 在中途结束循环
        // break; // 跳出循环 ( 结束循环 )
        continue;// 跳出本次循环 本次循环这行代码后面的语句不再执行，直接执行下一次循环
      }
    }

continue：
在这里插入图片描述
break：

以前写的：
JS循环for、for…of、for…in