tian~

Appearance

Return to top
on this page

扫码联系

编程学习&& IT

tian

循环

1.for循环

for循环的作用是重复执行一段程序,能够解决大量的类似语句书写。

从一个例子了解循环语句的功能

题目: 在控制台逐行输出1 ， 2 ， 3 ， 4 ......10

html
 <script>
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    console.log(5);
    console.log(6);
    console.log(7);
    console.log(8);
    console.log(9);
    console.log(10);
  </script>

可以使用for循环简化程序

html
<script>
  
    for (let i = 0; i <= 10; i++) {
        console.log(i);
     }
    
    //for在英语中没有特别的含义，其名称来源于1950年代的早期汇编语言，现在几乎世界上所有编程语言中都	 用for表示循环语句。
</script>

for语句的语法

html
<script>
    
    for (let i = 0; i <= 10; i++) {
    	console.log(i);
    }
    
// for的圆括号有三个表达式 分号分隔 书写需要注意  最后一个表达式没有分号
    
//表达式let i = 1; 表示定义一个"循环变量" i , 并赋值为1;   i是iterator 里面还要使用循环则需要j k
//表达式i <= 10;表示继续执行循环的条件，只要这个条件为真，则会一直执行;
//表达式i++用来更新循环变量，使循环变量的值越来越趋向终点。
   
</script>

语法

js
for( 语句1(初始化表达式) ; 语句2(条件) ; 语句4(递增表达式) ){
	//语句3 循环体代码
    //语句3 循环体代码
    //语句3 循环体代码
    //……
}
    for (let i = 0;①     i <= 10;②     i++④) {
    	console.log(i);③
    }


//首先会执行语句①，然后判断语句②是否满足，如果满足则进入循环体，执行语句③，如果不满足进入循环体则退出循环

//语句体中的语句执行完毕后，执行语句④

//再次判断语句②是否满足，如果满足则再次判断语句②是否满足，如果满足进入循环体，执行语句③，如果不满足则退出循环

//执行顺序：  1只执行一次

//1  ->  2  -> 3  -> 4 -> 2 -> 3 -> 4 -> 2 ->3 ->4 -> …… 2

初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。

条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。

递增表达式（increment）：每轮循环的最后一个操作，通常用来递增循环变量。

例子1

循环打印1到100到页面之上

html
<script>
    for(let i = 1;i <= 100; i++){
        document.write(i + "<br>");   // 1 2 3 100
    }
</script>

例子2

html
<script>
    for(let i = 3; i <= 13; i += 3){
        console.log(i);   //3 6 9 12
    }
</script>

例子3

html
<script>
    for (let i = 15; i > 2; i -= 3) {
        console.log(i); // 15  12 9 6 3
    }
</script>

例子3

html
<script>
    for(let i = 2; i < 12; i += 3) {
        i += 4;    //这里面 i+=4 也在改变i的值
        console.log(i);//6 13
    }
</script>

例子4

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

例子5

html
<script>
    for (let i = 1; i < 10; i--){
   		console.log(i);
    }
    //i永远满足  造成死循环
</script>

例子6

html
<script>
    for (let i = 10; i < 4; i--){
        console.log(i);
    }
</script>

小练习

请使用for循环语句在控制台逐行输出18 ， 14 ， 10 ， 6 ， -2 ， -6

html
<script>
    for (let i =18; i >= -6; i-=4){
        console.log(i);
    }
</script>

小练习

请使用for循环语句在控制台逐行输出0 ， 0.2 ， 0.4 ， 0.6 ， 0.8 ， 1

html
<script>
    for (let i =0; i <= 1; i+=0.2){
        console.log(i);
    }
    
    //会出现小数精度问题
    for (let i =0; i <= 1; i+=0.2){
        console.log(Number(i.toFixed(1)));
    }
</script>

小练习

输出99 97 95 ...3 1

js
for(let m= 99; m >= 1; m -= 2){
   console.log(m);  // 99 97 .... 3 1
}

最常用的写法

html
<script>
    for(let i =0; i< 10; i++){
        console.log(i);
    }
</script>

for语句的三个部分（initialize、test、increment），可以省略任何一个，也可以全部省略。

js
for ( ; ; ){
  console.log('Hello World');
}
//上面代码省略了for语句表达式的三个部分，结果就导致了一个无限循环。

//如果不想无限循环
let i = 0
for (; i < 10;) {
	console.log(i);
	i++
}

for in循环

for...in循环用来遍历一个对象的全部属性。

js
let obj = {a: 1, b: 2, c: 3};

for (let i in obj) {
  console.log('键名：' , i);
  console.log('键值：' , obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3


//它遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。
//它不仅遍历对象自身的属性，还遍历继承的属性

比如对象都继承了toString属性，但是for...in循环不会遍历到这个属性。

js
let obj = {};

// toString 属性是存在的
obj.toString // toString() { [native code] }

for (let p in obj) {
  console.log(p);
} // 没有任何输出


// 对象obj继承了toString属性，该属性不会被for...in循环遍历到，因为它默认是“不可遍历”的
// 如果继承的属性是可遍历的，那么就会被for...in循环遍历到。

一般情况下，都是只想遍历对象自身的属性

js
let obj = {a: 1, b: 2, c: 3};

Object.prototype.age = 18;

for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log("键名：", i);
        console.log("键值：", obj[i]);
    }
}
//使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。

for循环嵌套

当循环与循环发生嵌套时遵循下列规则:

​ 1.外层为假时内层不执行;

​ 2.先执行外层再执行内层,直至内层的条件为假时再返回外层去执行。

js
for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 5; j++) {
        console.log("i的值是" +  i , "J的值是" + j);
    }
}

for循环算法题1

wHy8S0.png

计算1+2+3......+99+100的和

html
<script>
    // 创建累加器
    let sum = 0;
    //遍历到1到100的每一个数字,每遍历到一个数字就把这个数字加到sum中去
    for(let i = 1; i <= 100; i++){
        sum += i;
    }
    console.log(sum);
    
 	//注意累加器sum不能写到循环里面   可以定义在for循环第一条表达式
    
    //循环开始的时候定义sum sum就是累加器 初始值是0
    // 遍历到1到100的每一个数字,每遍历到一个数字就把这个数字加到sum中去
    for(let i = 1 , sum = 0; i <= 100; i++){
      sum += i;
    }
    console.log(sum);
</script>

for循环算法题2

请问1~100中哪个数字除以3余1，除以4余2，除以5余3

可以使用穷举法 从1到100依次测试数字是否满足条件

html
<script>
      for(let i = 1; i <= 100; i++){
        if(i % 3 == 1 && i % 4 == 2 && i % 5 == 3){
          console.log(i);
        }
      }
  </script>

2.while循环语句

while语句也是一种循环结构，是一种“不定范围”循环,和for循环各有不同的用武之地

几乎所有的编程语言，都同时提供for循环和while循环

while语句事先不指定循环开始、结束的范围，只要测试条件满足，就一直执行循环体

语法：

js
while (测试条件){
   需要执行的代码;
   }

// 或者
while (测试条件) 需要执行的代码;;
//如果只有一条语句，可以省略大括号，否则就必须加上大括号。

while循环注意事项

while循环没有显式定义循环变量，必须自己在while循环外先定义好循环变量，有时甚至可以没有循环变量。

循环体内的语句，必须使循环测试条件趋向不成立，否则会死循环

用while实现之前的案例

输出到页面上1、2、3、4...100

html
<script>
	let i = 1;
    // while循环  while是"当"的意思
    while (i <= 100) {
        document.write(i + "<br>");
        i++; //i=i+1
    }
</script>

累加1+2+3+4+....100

html
<script>
      //累加器
      let sum = 0;
      //循环变量
      let i = 1;

      while(i <= 100){
        sum += i;
        i++;
      }
      console.log(sum);
</script>

for与while的用法区别

for 适合已知循环次数的循环体

更适合while循环的场景

寻找最小的满足n2>456789的整数n

html
<script>
    // 寻找满足n的平方大于456789的最小整数

    // 穷举法
    let n = 1;

    while(n * n <= 456789){
        n ++;
    }
    console.log(n);
</script>

小兔子拔萝卜，第1天拔1个，第2天拔2个，第3天拔3个，以此类推。请问小兔子多少天能把500个萝卜拔光?

html
<script>
    //天的序号 也就是这一天拔的萝卜数
    let n = 1;
    // 累加器
    let sum = 0;

    while(sum <= 500){
        sum += n;
        n++;
    }
    
    //一定要注意这里会有一个"出一错误".
    console.log(n); //33
    
   // (1+33)*33/2  = 561
   // (1+32)*32/2  = 528
   // (1+31)*31/2  = 496
    
   //针对"出一错误"我们要这样
    console.log(n-1);
    
</script>

验证输入的密码

html
<script>
    let pwd = Number(prompt("请输入你的密码"));
    while (pwd != 123456) {
        pwd = prompt("请正确输入你的密码");
    }
    while (pwd == 123456) {
        pwd = prompt("请再次输入你的密码");

        if (pwd != 123456) {
            alert("两次输入密码不一致，验证不成功");
            break;
        } else if (pwd == 123456) {
            alert("两次输入密码一致，验证成功");
            break;
        }
    }
</script>

3.break 语句和 continue 语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。

break语句

break表示立即终止循环，它只能用在循环语句中，在for循环和while循环中都可以使用

例子1

html
<script>
    let i = 0;
    while(i < 100) {
        console.log('i 当前为：' + i);
        i++;
        if (i === 10) break;
    }
</script>

例子2

for循环也可以使用break语句跳出循环

html
<script>
    for (let i = 0; i < 10; i++) {
      if (i === 3){
          break;
      }  
      console.log(i);
    }
</script>

break用在while语句中，通常和while(true){}搭配使用

html
<script>
    let n = 1;
    while (true) {
        if (n * n > 456789) {
            console.log(n);
            break;
        }
        n++;
    }
</script>

continue语句

continue :结束本次循环迭代,继续开始下一次循环迭代。for循环更经常使用continue

例子1

html
<script>
    for (let i = 0; i < 10; i++) {
        if (i == 3) {
            continue;
        }
    	console.log(i);
    }
</script>

例子2

html
<script>
    let i = 0;

    while (i < 100) {
    	i++;
    	if (i % 2 == 0) {
    		continue;
    	}
    	console.log("i 当前为：" + i);
    }
</script>

小练习1

html
<script>
    let num = 0;
    for (let i = 1; i < 10; i++) {
    // 如果i是5的倍数，退出
        if (i % 5 === 0) {
            break;
        }
            num++; // i=1,num=1;i=2,num=2;i=3,num=3,i=4,num=4
     }
    console.log(num); //4  循环了四次
    
    ////如果改编成continue  为8
</script>

小练习2

打印所有0-50之间除20和30之外的5的倍数

html
<script>
   	  for (let i = 0; i <= 50; i++) {
          if (i == 20 || i == 30) {
              continue;
          }

          if (i % 5 == 0) {
              console.log(i);
          }
      }
</script>

小练习3

打印所有0-100（包含100）之间除了22，44，66以及88之外的偶数，并求他们的和。

html
<script>
    let sum = 0;
    for (let i = 0; i <= 100; i += 2) {
        if (i == 22 || i == 44 || i == 66 || i == 88) {
            continue;
        }
        sum += i;
        console.log(i);
    }
    console.log(sum);
</script>

小练习4

打印 0 - 10（除了5之外） 所有数字的和

html
<script>
    let num = 0;
    for (let i = 1; i <= 10; i++) {
        if (i % 5 === 0) {
            continue
        }
            num += i; //i1  num1  i2 num3 i3 num6 i4 num10 i6 num16 i7 num23 i8 31 i9 num40
       }
    console.log(num); //40
    //如果改成break则是10
</script>

可以使得无限循环的语句跳出

html
<script>
    for(let i = 0 ; true ; i++){
        if(i === 20){
            break;
        }
        console.log(i);
    }
</script>

注意

如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。

4.do...while 循环

do while循环是一种“后测试循环语句”。

它不同于for循环和while循环每次都是“先测试条件是否满足，然后执行循环体”

do-while循环是“先执行循环体，然后测试条件是否满足”。

语法

html
<script>
    do{
    	循环体
    }while(循环执行条件)
        
        
    //do-while循环 将循环执行条件写到了循环体的后面.
    // 这样一来,循环体一定会至少执行一次，然后再检测循环执行条件是否为true,决定是否继续执行循环体.
</script>

例子1

html
<script>
    do{
   		console.log("★");
    }while(false);
</script>

例子2

输出1 - 100

html
<script>
    let n = 1;
    do {
    	console.log(n);
    	n++;
    } while (n <= 100);
    
    //实际上不是很常用  do while擅长的
</script>

取整函数

专门用于把数字转换成整数。

js
console.log(parseInt(3.14));  //3
// 等同于
console.log(parseInt("3.14")); // 3

随机数函数

先学习随机数函数 ， 得到 大于等于 0 小于 1 的一个随机数。

css
Math.random();

得到[a，b]区间的整数，公式:

css
parseInt(Math.random() * (b - a + 1)) + a;

如果我们想得到5 - 12 之间的整数

css
console.log( parseInt(Math.random()*8) + 5);

do while小案例

请编写程序，随机生成两个变量dx和dy，它们均在[-4,4]区间随机取值，但要求dx和dy不能同时为0

html
<script>
    //随机两个变量 dx 和 dy 它们都在 [-4 , 4]之间随机取值  但是不能都为0
    let dx, dy;
    do {
        dx = parseInt(Math.random() * 9) - 4;
        dy = parseInt(Math.random() * 9) - 4;
    } while (dx == 0 && dy == 0); //验收
    
    //出循环保证dx dy不都是0
    console.log(dx, dy);
    
    //如果写成while循环
      let dx = parseInt(Math.random() * 9) - 4;
      let dy = parseInt(Math.random() * 9) - 4;
		
      //当dx dy都为0 则进入循环
      while (dx == 0 && dy == 0){
        dx = parseInt(Math.random() * 9) - 4;
        dy = parseInt(Math.random() * 9) - 4;
      }
      
      console.log(dx, dy);
    
</script>

while算法题

html
 <script>
        // 随机一个数字 , 2 ~ 99之间
        let answer = parseInt(Math.random() * 98) + 2;
        
        // 为了能够不断重复的执行询问 , 此时就必须使用死循环
        while(true){
            // 询问用户猜测的数字
            let n = Number(prompt("请猜测数字 1 ~ 100"));

            //判断用户输入的数字和answer的关系
            if(n > answer){
                alert("你输入的数字太大了");
            }else if(n < answer){
                alert("你输入的数字太小了")
            }else{
                alert("猜对了！");
                //结束循环
			 	break;
            }
        }
    </script>

**改进增加提示 **

html
  <script>
        // 随机一个数字 , 2 ~ 99之间
        let answer = parseInt(Math.random() * 98) + 2;
		
		//此时范围的最小值和最大值  这个数值是用来提示用户的
		let min = 1;
		let max = 100;
        // 为了能够不断重复的执行询问 , 此时就必须使用死循环
        while(true){
            // 询问用户猜测的数字
            let n = Number(prompt("请猜测数字"+ min+ "~" + max));

            //判断用户输入的数字和answer的关系
            if(n > answer){
                alert("你输入的数字太大了");
				//因为用户输入的数字较大，所以可以让此时的最大范围数字变为用户输入的值
				max = n;
            }else if(n < answer){	
                alert("你输入的数字太小了")
				//因为用户输入的数字较小，所以可以让此时的最小范围数字变为用户输入的值
				min = n;
            }else{
                alert("猜对了！");
				//结束循环
				break;
            }
        }
    </script>

验证用户输入的数字是否在区间内

html
<script>
        // 随机一个数字 , 2 ~ 99之间
        let answer = parseInt(Math.random() * 98) + 2;
		
		//此时范围的最小值和最大值  这个数值是用来提示用户的
		let min = 1;
		let max = 100;
        // 为了能够不断重复的执行询问 , 此时就必须使用死循环
        while(true){
            // 询问用户猜测的数字
            let n = Number(prompt("请猜测数字"+ min+ "~" + max));
			
			// 验证用户输入的数字是否在范围内
			if(n <= min || n >=max){
				alert("你输入的数字不在范围内");
				//不在区间内,直接放弃本轮循环,开启下一轮迭代.
				continue;
			}

            //判断用户输入的数字和answer的关系
            if(n > answer){
                alert("你输入的数字太大了");
				//因为用户输入的数字较大，所以可以让此时的最大范围数字变为用户输入的值
				max = n;
            }else if(n < answer){	
                alert("你输入的数字太小了")
				//因为用户输入的数字较小，所以可以让此时的最小范围数字变为用户输入的值
				min = n;
            }else{
                alert("猜对了！");
				//结束循环
				break;
            }
        }
    </script>

如果使用do while循环

html
<script>
        // 随机一个数字 , 2 ~ 99之间
        let answer = parseInt(Math.random() * 98) + 2;
		
		//此时范围的最小值和最大值  这个数值是用来提示用户的
		let min = 1;
		let max = 100;
        // 为了能够不断重复的执行询问 , 此时就必须使用死循环

		do{
            // 询问用户猜测的数字
            var n = Number(prompt("请猜测数字"+ min+ "~" + max));
			
			// 验证用户输入的数字是否在范围内
			if(n <= min || n >=max){
				alert("你输入的数字不在范围内");
				//不在区间内,直接放弃本轮循环,开启下一轮迭代.
				continue;
			}

            //判断用户输入的数字和answer的关系
            if(n > answer){
                alert("你输入的数字太大了");
				//因为用户输入的数字较大，所以可以让此时的最大范围数字变为用户输入的值
				max = n;
            }else if(n < answer){	
                alert("你输入的数字太小了")
				//因为用户输入的数字较小，所以可以让此时的最小范围数字变为用户输入的值
				min = n;
            }
        }while(n != answer);
		//出了do while循环  就说明n 和 answer相等了  因为只有相等了 才能出循环
		alert("恭喜猜对了！")
    </script>

5.标签（label）

JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。

语法

js
label:
  语句
  //标签label的命名可以是任意标识符  但不能是保留字  语句可以是任意语句

标签通常与break语句和continue语句配合使用，跳出特定的循环。

js
top:
  for (let i = 0; i < 3; i++){
    for (let j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }
  
  //上面是双重循环  break命令后面加上了top标签  top不用加引号

  //满足条件时，直接跳出双层循环  如果break后面不使用标签 只能跳出内层循环  进入下一次的外层循环

continue语句也可以与标签配合使用。

js
top:
  for (let i = 0; i < 3; i++){
    for (let j = 0; j < 3; j++){
      if (i === 1 && j === 1) continue top;
      console.log('i=' + i + ', j=' + j);
    }
  }
      
   //continue命令后面有一个标签名，
   //满足条件时，会跳过当前循环，直接进入下一轮外层循环。
   //如果continue语句后面不使用标签，则只能进入下一轮的内层循环。

小案例

循环打印10000个p

html
<body>
    <div id="wrap"></div>

    <script>
          let oWrap = document.getElementById("wrap");
          for (let i = 0; i < 10000; i++) {
            oWrap.innerHTML += "<p>" + i + "</p>";
          }
    </script>
  </body>

DOM循环操作要谨慎

html
<body>
    <div id="wrap"></div>

    <script>
          let x = "";
          let oWrap = document.getElementById("wrap");
          for (let i = 0; i < 10000; i++) {
            x += "<p>" + i + "</p>"; //字符串拼接
          }
          oWrap.innerHTML = x; //最后一步将拼接好的字符串赋值给oWrap.innerHTML
    </script>
  </body>

小案例

点击生成十个div

html
<style>
      #wrap div {
        float: left;
        width: 30px;
        height: 30px;
        margin: 10px;
        background-color: pink;
      }
</style>
  </head>
  <body>
    <input type="button" value="按钮" id="btn" />
    <div id="wrap"></div>

    <script>
        let oWrap = document.getElementById("wrap"),
            oBtn = document.getElementById("btn");
        let x = "";
        oBtn.onclick = function () {
            for (let i = 0; i < 10; i++) {
                x += "<div></div>";
            }
            oWrap.innerHTML = x;
        };
    </script>
  </body>

总结

课程重点

**JavaScript中的流程控制语句有哪些? **

顺序执行 选择语句 循环语句

if多分支语句的执行机理; for循环的执行机理

for和while循环各有什么使用场景?

课程难点

累加器和累乘器、穷举法算法思想

各种算法题目

把这节课所学化作“内功”，融会贯通到后面的课程中