bucle javascript (3)

Declaración de bucle en js

  • en bucle
  • mientras que bucle
  • hacer mientras bucle

Que es loop

 在程序中,反复被执行的语句叫做循环体,循环体是否能被重复执行,取决于循环的终止条件,由循环体及循环的终止条件组成的语句叫做循环语句

El propósito del bucle

Algunos códigos se pueden ejecutar repetidamente

en bucle

Propósito: Algunos códigos se pueden ejecutar repetidamente, generalmente relacionados con el conteo.

gramática

    for(初始化变量;条件表达式;操作表达式) {
        //循环体
    }

  • Variable de inicialización: generalmente se usa para contar, use var para declarar
  • Expresión condicional: depende de la condición de terminación del cuerpo del bucle
  • Expresión de operación: utilizada para actualizar la variable de inicialización

El proceso de ejecución del bucle for


    <script>
        for (var i = 1; i <= 100; i++) {
            //在控制台打印100遍的"hello 尧子陌"
            console.log("hello 尧子陌")
        }
    </script>

Inserte la descripción de la imagen aquí

Principio de ejecución

i = 1 只会被执行一次,执行完毕后,执行条件表达式,若满足,则执行循环体的语句,若不满足,则跳出循环体。然后执行条件表达式自增变量,判断条件表达式是否满足,若满足,则执行循环体的语句,若不满足,则跳出循环体

Depuración de punto de interrupción del bucle for

Establecer un punto de interrupción en una determinada línea del programa para observar mejor cómo se ejecuta el programa

Proceder de la siguiente

  • Presione la tecla f12 para ingresar fuentes (fuente raíz), establezca una operación de punto de interrupción en la línea actual donde se debe establecer un punto de interrupción y actualice el navegador
  • Presione las flechas hacia arriba y hacia abajo para continuar con el siguiente paso

Observe mejor los cambios en el valor de las variables a través del reloj.

Inserte la descripción de la imagen aquí

Controla el número de bucles a través de variables.

En js, puede controlar el número de bucles convirtiendo el valor ingresado por el indicador en un número entero

    <script>
        /* 
                *1.弹出一个输入框,用户输入值,把这个数值保存成变量
                2.通过变量名来控制循环的次数
                
                 */

        var userName = parseInt(prompt("请输入任意正整数"));

        for (var i = 1; i <= userName; i++) {
            console.log('Hello')
        }
    </script>

Inserte la descripción de la imagen aquí

Se pueden ejecutar diferentes códigos a través de un bucle for

Ingrese una persona de 1 año y 100 años, y pronta nacimiento y muerte


    <script>
        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('今年一岁了,你出生了')
            } else if (i == 100) {
                console.log('今年100岁了,你已经死亡了')
            } else {
                console.log('今年' + i + '岁了')
            }
        }
    </script>

Inserte la descripción de la imagen aquí

El bucle for puede realizar la misma operación

Encuentre la suma acumulada de 1 ~ 100


    <script>
        //求1~100之间累加的和

        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log('sum最终的值', sum); //5050
    </script>

Inserte la descripción de la imagen aquí

La idea es la siguiente

  • Para hacer un bucle 100 veces, se necesita un contador i
  • Necesita un valor para almacenar el resultado como suma
  • Fórmula de cálculo: suma = suma + i

para bucle para promediar

Encuentra el promedio entre 1 y 100


  <script>
        //需要声明一个求和的变量及求平均数的变量
        var sum = 0,
            average = 0

        for (var i = 0; i <= 100; i++) {
            sum += i;
        }
        // 平均值为
        var average = sum / 100;
        console.log('1~100之间的平均数:' + average) //50.5
    </script>
</head>



Inserte la descripción de la imagen aquí

El ciclo for encuentra la suma de todos los números pares e impares del 1 al 100.

La idea es la siguiente: ¿Cómo juzgar un número como un número par?

Solución: Divisible por 2 y el resto es 0, es un número par, de lo contrario es un número impar.


    <script>
        //需要声明一个偶数及奇数的变量
        var even = 0,
            odd = 0;

        for (var i = 0; i <= 100; i++) {
            if (i % 2 == 0) {
                even += i;
            } else {
                odd += i;
            }
        }
        console.log('1~100之间所有偶数的和:', even)
        console.log('1~100之间所有奇数的和:', odd)
    </script>



Inserte la descripción de la imagen aquí

El ciclo for encuentra la suma dentro de 100 que es divisible por 3

    <script>
        //需要声明一个变量来保存能被3整出的和的结果
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                result += i
            }
        }

        console.log('1~100之间能被3整除的和:', result)
    </script>
</head>

Inserte la descripción de la imagen aquí

Caso de estudiante de bucle for

Abra el cuadro de entrada, ingrese el número total de clases, encuentre el puntaje total y la suma del puntaje promedio


análisis

1. Aparece el cuadro de entrada y el usuario ingresa el número total de personas en la clase (nombre de usuario)

2. Ingrese las calificaciones del estudiante una por una (almacenadas como hechizo), debe usar un bucle for, el número de cuadros de entrada emergentes está relacionado con el número total de estudiantes en la clase. Expresión condicional i <= userName

3. El procesamiento interno del programa, calcular la puntuación total (suma) y luego calcular el promedio (promedio)



    <script>
        //要求:计算学生的总成绩及平均数
        var userName = Number(prompt("输入班级的总人数"));
        var sum = 0;
        var average = 0;
      

        for (var i = 1; i <= userName; i++) {
            var sorce = Number(prompt('请输入第' + i + "个学生成绩"));

            sum += sorce;
        }

        //学生的总成绩
        console.log("班级的总成绩", sum);
        //学生的平均成绩
        var average = sum / userName;
        console.log('班级的平均成绩:', average)
    </script>


Inserte la descripción de la imagen aquí

para imprimir en bucle n planetas y estrellas

análisis

1. Controle el número de estrellas por el valor ingresado por el indicador
2. Imprima las estrellas en la consola agregando una cadena

  <script>
        var userName = prompt('请输入星星的个数');

        var str = "" //声明一个变量来存储空字符串
        for (var i = 1; i <= userName; i++) {
            str += "★";
         
        };
        console.log(str)
    </script>

Inserte la descripción de la imagen aquí

Doble bucle for de bucle for

Anidar un bucle for sobre la base de un bucle for se denomina bucle for doble

gramática


for(外循环初始化变量;外循环条件表达式;外循环操作表达式) {
    for(内循环初始化变量;内循环条件表达式,内循环操作表达式) {
           //执行的语句
    }
    
}

Precauciones

  • El bucle interno se puede considerar como la declaración del bucle externo.
  • El ciclo externo se ejecuta una vez, el ciclo interno ejecuta todos

    <script>
        //外层循环
        for (var i = 1; i <= 3; i++) {

            console.log('外层循环执行的:' + i + '次')
            for (var j = 1; j <= 3; j++) {
                console.log('内层循环执行的:' + j + '次')
            }
        }
    </script>


Inserte la descripción de la imagen aquí

Doble para impresión en bucle de 5 filas y 5 columnas de estrellas


<script>
    var str = '';
    for (var i = 0; i <= 5; i++) {
        for (var j = 0; j <= 5; j++) {
            str += '★'
        };
        str += '\n'
    }

    console.log(str);
</script>

Inserte la descripción de la imagen aquí

Doble para entrada de bucle N filas y N columnas de estrellas


<script>
    //控制行数
    var rows = Number(prompt('请输入需要的行数'));

    //控制列数
    var cols = Number(prompt('请输入需要的列数'));

    //声明一个空字符串
    var str = ''

    //双重for循环

    for (var i = 0; i < rows; i++) {
        for (var j = 0; j < cols; j++) {
            str += '★'
        };
        str += '\n'
    };
    console.log(str);
</script>


Inserte la descripción de la imagen aquí

Doble para impresión en bucle triángulo invertido

Idea central: j = i; j <10; j ++


<script>
    var str = '';

    for (var i = 0; i < 10; i++) {
        for (var j = i; j < 10; j++) {
            str += '★'
        };
        str += '\n'

    }
    console.log(str);
</script>

Inserte la descripción de la imagen aquí

Doble para impresión en bucle de triángulo regular

Idea central: j = 0; j <i; j ++


<script>
    var str = '';
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < i; j++) {
            str += '*'
        };
        str += '\n'
    }
    console.log(str);
</script>

Inserte la descripción de la imagen aquí

Doble para imprimir en bucle la tabla de multiplicar del noventa y nueve

<script>
    var str = '';
    for (var i = 1; i <= 9; i++) {
        for (j = 1; j <= i; j++) {
            str += j + '*' + i + '=' + i * j + '\t'
        };

        str += '\n'

    }
    console.log(str);
</script>

Inserte la descripción de la imagen aquí

Resumen de bucle for

  • El bucle for puede ejecutar repetidamente parte del mismo código
  • El bucle for puede ejecutar diferentes códigos
  • Doble bucle for, el bucle externo se ejecuta una vez y el bucle interno se ejecuta todo.

mientras que bucle

gramática

while(条件表达式) {
    //循环体代码
    操作表达式
    
}

Precauciones

  • Si la expresión condicional en el bucle while es verdadera, se ejecuta la declaración en el cuerpo del bucle; de ​​lo contrario, es falsa, la declaración en el cuerpo del bucle no se ejecuta
  • Después de ejecutar la declaración en el cuerpo del bucle, la expresión de la operación se incrementará y continuará determinando si la expresión condicional se cumple (los pasos anteriores)
  • El ciclo while puede juzgar condiciones más complicadas.

Imprimir palabra de saludo en el bucle while

<script>
    var i = 1;
    while (i <= 100) {
        console.log('hello word');
        i++
    };
</script>

Inserte la descripción de la imagen aquí

El bucle while imprime la vida de una persona e indica el nacimiento y la muerte.


<script>
    var i = 1;
    while (i <= 100) {
        if (i === 1) {
            console.log('出生了');
        } else if (i === 100) {
            console.log('死亡了');
        } else {
            console.log('你已经' + i + '岁');
        };
        i++
    }
</script>

Inserte la descripción de la imagen aquí

Calcule la suma de todos los números enteros del 1 al 100 en el ciclo while


<script>
    var i = 1;
    var sum = 0;
    while (i <= 100) {
        sum += i;
        i++
    }
    console.log('1~100之间所有整数的和:', sum);
</script>

Inserte la descripción de la imagen aquí

Juicio condicional del bucle while (¿me amas?)

Requisito: Aparece el cuadro de entrada y el usuario ingresa Te amo, luego deja de preguntar, de lo contrario seguirá preguntando sin cesar.

<script>
    var username = prompt('你爱我吗');
    while (username !== '我爱你') {
        username = prompt('你爱我吗');
    }
    alert('我也爱你  小宝贝')
</script>


Inserte la descripción de la imagen aquí

hacer mientras bucle

     El bucle do while es una variante del bucle while. El bucle do while ejecutará el código del cuerpo del bucle al menos una vez, y luego la expresión de operación se incrementará o disminuirá, y luego se juzgará la expresión condicional. es verdadero, se ejecutará el cuerpo del bucle. Declaración, falso no se ejecuta

var i =1;
do {
    //循环体语句
    操作表达式
}while(条件表达式)

El bucle do while imprime la vida de una persona e indica el nacimiento y la muerte.

<script>
    var i = 1;
    do {
        if (i === 1) {
            console.log('恭喜你 你出生了');
        } else if (i === 100) {
            console.log('恭喜你  你死亡了');
        } else {
            console.log('你已经' + i + '岁');
        }
        i++
    } while (i <= 100)
</script>

Inserte la descripción de la imagen aquí

El ciclo do while imprime la suma de todos los enteros entre 1 y 100


<script>
    var i = 1;
    var sum = 0;
    do {
        sum += i;
        i++
    } while (i <= 100);
    console.log('1~100的整数的值:', sum);
</script>

Inserte la descripción de la imagen aquí

Juicio condicional de bucle do while (me amas)

Requisito: El cuadro de entrada aparece y muestra "¿Me amas?" Si el usuario ingresa Te amo, el mensaje dejará de preguntar, de lo contrario seguirá preguntando.

<script>
    do {
        var username = prompt('你爱我吗')
    } while (username !== '我爱你')

    alert('我也爱你  宝贝')
</script>

Inserte la descripción de la imagen aquí

Resumen del ciclo

  • El bucle en JS: bucle for mientras bucle di while bucle
  • En circunstancias especiales, los tres pueden sustituirse entre sí.
  • do while es una variante de while. La diferencia con while es que el orden de ejecución es diferente. El ciclo while se juzga primero y luego se ejecuta, mientras que el ciclo do while se ejecuta al menos una vez.
  • Centrarse en el bucle for

La diferencia entre continuar el descanso

Seguir

continuar: salta de este bucle y pasa al siguiente bucle

Encuentra la suma de todos los números del 1 al 100 que pueden ser divisibles por 7

<script>
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        if (i % 7 === 0) {
            continue
        }
        sum += i;
    }
    console.log(sum);
</script>

Inserte la descripción de la imagen aquí

descanso

Salta de todo el bucle inmediatamente y no vuelvas a hacer el siguiente bucle

Cuando i es igual a 3, salta de todo el bucle

<script>
    for (var i = 0; i < 5; i++) {
        if (i === 3) {
            break
        }
        console.log(i);
    }

</script>


Inserte la descripción de la imagen aquí

Cajero automático simple

Inserte la descripción de la imagen aquí
Utilice la declaración de cambio más simple


    <script>
        //简易ATM机
        var corpus = 100; //本金

        var userName = Number(prompt('请输入你要的操作\n1.存钱\n2.取钱\n3.显示余额\n4.退出'))


        switch (userName) {
            case 1:
                var depvar = Number(prompt("请问需要存多少钱?"));
                corpus = corpus + depvar;
                alert('余额为' + corpus)
                break;
            case 2:
                var taken = Number(prompt("请问需要取多少钱?"));
                if (taken > corpus) {
                    alert('余额不足')
                } else if (taken < corpus) {
                    corpus = corpus - taken;
                    alert('余额为' + corpus)
                }
                break;
            case 3:
                alert(corpus);
                break
            case 4:
                if (userName == 4) {
                    alert('退出成功')
                }
                break
            default:
                alert("输入错误");
                break;


        }
    </script>




Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/weixin_45419127/article/details/111473451
Recomendado
Clasificación