1: bucle for
El bucle for predefinirá las variables que controlan el número de bucles en la declaración for, por lo que la instrucción del bucle for puede realizar operaciones de bucle de acuerdo con el número conocido de bucles, lo cual es adecuado para situaciones donde el número de Se conocen claramente los tiempos en los que es necesario ejecutar el script.
El formato de sintaxis del bucle for es el siguiente:
for (declaración de inicialización; condición del bucle; actualización de variable: incremento o decremento) {
bloque de declaración;
} La declaración del bucle for se puede desmontar en 4 partes: las tres expresiones en () y el "bloque de declaración" en {} . Analicémoslo a continuación.
Análisis de declaraciones:
Declaración de inicialización (expresión 1): se usa principalmente para inicializar un valor de variable, que se usa para establecer un contador, es decir, el valor al comienzo del ciclo esta declaración solo se ejecuta durante el primer ciclo y no se ejecutará; ejecutado nuevamente en el futuro.
Condición de bucle (expresión 2): la condición de restricción de la ejecución del bucle, utilizada para controlar si se ejecuta el código en el cuerpo del bucle, si la condición es VERDADERA, el bucle continúa, si la condición es FALSA, el bucle finaliza y sale; inmediatamente.
Actualización de variable (Expresión 3): una expresión con una operación de incremento o disminución. Cada vez que se ejecuta el ciclo, el valor del contador se modifica inmediatamente para que la condición del ciclo se vuelva gradualmente "falsa".
Bloque de declaración: una cantidad de códigos que deben ejecutarse cuando se considera que la condición es verdadera.
¿La descripción anterior es un poco confusa? Echemos un vistazo al diagrama de flujo de ejecución de la declaración del bucle for para comprender el proceso de ejecución del bucle for de manera más intuitiva:
Ahora que entendemos el proceso de ejecución del bucle for, hagamos la operación real y hagamos una pequeña pregunta para ver si lo dominamos.
Ejemplo: Calcular la suma del 1 al 100
<script type="text/javascript">
var suma=0;
para(var i=1; i<=100; i++){
suma+=yo;
}
console.log('1 + 2 + 3 +...+ 99 + 100 = '+suma);
</script> 
Las tres expresiones en
el bucle for JS se pueden omitir, pero el punto y coma utilizado para separar las tres expresiones no se puede omitir, como se muestra en el siguiente ejemplo:
// Omitir la primera expresión Fórmula var i = 0;
para (; yo < 5; yo ++) {
//Código a ejecutar}
// Omitir la segunda expresión para (var y = 0; ; y++) {
si(y>5){
romper;
}
//Código a ejecutar}
// Omitir la primera y tercera expresión var j = 0;
para (; j < 5;) {
// Código a ejecutar j++;
}
// Omitir todas las expresiones var z = 0;
para (;;) {
si(z>5){
romper;
}
// Código a ejecutar z++;
} Dos: anidamiento de bucles for
No importa qué tipo de bucle, se puede anidar (es decir, uno o más bucles se definen en un bucle).
Formato de sintaxis:
para (declaración de inicialización 1; condición de bucle; actualización de variable: autoincremento o autodecremento) {
//Bloque de declaración 1;
for (declaración de inicialización 2; condición de bucle; actualización de variable: autoincremento o autodecremento) {
//Bloque de declaración 2;
for (declaración de inicialización 3; condición de bucle; actualización de variable: incremento o disminución) {
//Bloque de declaración 3;
.....
}
}
} Aquí definimos tres nidos de bucles for. Por supuesto, podemos anidar tantos bucles for como queramos.
Caso: el bucle for implementa la tabla de multiplicar.
Primero, echemos un vistazo a la tabla de multiplicar.
Podemos dibujar el patrón del gráfico:
hay 9 filas y 9 columnas en total, y hay varias expresiones en cada fila.
En la i-ésima línea, la expresión comienza desde i*1 y termina en i*i. Hay un total de i expresiones (podemos lograr este efecto mediante un bucle).
Por lo tanto, se necesita un bucle doble para controlar la salida. El bucle externo controla el número de filas i (i es mínimo 1 y el máximo es 9), y el bucle interno controla la columna j (j es mínimo 1 y el máximo es igual). a i).
Código de implementación:
for(var i = 1; i <= 9; i++){ //El bucle externo controla las filas for(var j = 1; j <= i; j++) //El bucle interno controla las columnas {
document.write(j+"*"+i+"="+j*i+" ");
}
documento.write("</br>");
} Resultado de salida:
También podemos poner la tabla de multiplicar 99 en una tabla y generarla como se muestra en la imagen inicial:
document.write("<table>");
for (var i = 1; i <= 9; i++) { //Línea de control de bucle externo document.write("<tr>");
for (var j = 1; j <= i; j++) //Columna de control de bucle interno {
document.write("<td>" + j + "*" + i + "=" + j * i + "</td>");
}
// Salto de línea, controla cuántas expresiones se generan en cada línea document.write("</tr>");
}
document.write("</table>"); Luego agregue estilo CSS para modificarlo:
mesa {
ancho: 600px;
colapso de fronteras: separado;
}
tabla td {
borde: #000 1px sólido;
alineación de texto: centro;
} Mira el resultado:
[Aprendizaje recomendado: tutorial avanzado de JavaScript]
Lo anterior es el contenido detallado del aprendizaje de bucles JS: el uso de declaraciones de bucle (ejemplos detallados para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP).
