Apprentissage en boucle JS : utilisation des instructions de boucle for (exemples détaillés)

Dans l'article précédent "JS Loop Learning : L'utilisation des instructions de boucle while (exemples détaillés)", nous avons brièvement découvert la boucle while et la boucle do while, et aujourd'hui nous présenterons un autre type de boucle - la boucle for déclaration, dans l'espoir d'aider Tout le monde aide !

1 : boucle for

La boucle for prédéfinira les variables qui contrôlent le nombre de boucles dans l'instruction for, de sorte que l'instruction de boucle for puisse effectuer des opérations de boucle en fonction du nombre connu de boucles et convient aux situations où le nombre de boucles est clairement connu. Le nombre de fois que le script doit être exécuté. Le format syntaxique de la boucle

for est le suivant :

for (初始化语句; 循环条件; 变量更新--自增或自减) {
    语句块;   
}

L'instruction de la boucle for peut être décomposée en 4 parties : Le "bloc d'instructions" dans ()号中的三个表达式和{}, analysons-le ci-dessous.

Analyse des instructions :

• Instruction d'initialisation (expression 1) : Il s'agit principalement d'initialiser une valeur variable, qui est utilisée pour définir un compteur, c'est-à-dire la valeur au début de la boucle, cette instruction est uniquement ; exécuté lors de la première boucle, et sera exécuté par la suite. Il ne sera plus exécuté.

• Condition de boucle (expression 2) : La condition de restriction d'exécution de la boucle, utilisée pour contrôler s'il faut exécuter le code dans le corps de la boucle ; si la condition est VRAIE, la boucle continue, si la condition est FAUX, la boucle se termine ; et la boucle se termine immédiatement.
  

• Mise à jour de variable (Expression 3) : Une expression avec une opération d'incrémentation ou de décrémentation. Chaque fois que la boucle est exécutée, la valeur du compteur est immédiatement modifiée pour que la condition de boucle devienne progressivement "faux".
  

• Bloc d'instructions : plusieurs codes qui doivent être exécutés lorsque la condition est jugée vraie.
  

La description ci-dessus est-elle un peu alambiquée ? Jetons un coup d'œil à l'organigramme d'exécution de l'instruction de la boucle for pour comprendre le processus d'exécution de la boucle for de manière plus intuitive :

Comprendre le processus d'exécution de la boucle for, faisons ensuite l'opération proprement dite et posons une petite question pour voir si vous la maîtrisez !

Exemple : Calculez la somme de 1 à 100

<script type="text/javascript">
	var sum=0;
	for(var i=1; i<=100; i++){
		sum+=i;
	}
	console.log(&#39;1 + 2 + 3 +...+ 99 + 100 = &#39;+sum);
</script>

pour trois expressions dans la boucle

JS pour Les trois expressions entre parenthèses dans la boucle peuvent être omises, mais sont utilisées pour la séparation. Les points-virgules du trois expressions ne peuvent pas être omises, comme le montre l'exemple suivant :

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

2 : for loop nesting

Quel que soit le type de boucle, elle peut être imbriquée (c'est-à-dire en définir une autre dans une boucle ou plusieurs cycles).

Format de grammaire :

for (初始化语句1; 循环条件; 变量更新--自增或自减) {
    //语句块1;   
    for (初始化语句2; 循环条件; 变量更新--自增或自减) {
        //语句块2;
        for (初始化语句3; 循环条件; 变量更新--自增或自减) {
            //语句块3; 
            .....  
        }
    }
}

Ici, nous définissons trois imbrications de boucles for. Bien sûr, nous pouvons imbriquer autant de boucles for que nous le souhaitons.

Cas : la boucle for implémente la table de multiplication

Tout d'abord, observons la table de multiplication

Nous pouvons obtenir le modèle du graphique :

• Il y a un total de 9 lignes et 9 colonnes. Il y a plusieurs expressions dans chaque ligne.

• Dans la ligne i, l'expression commence à i*1 et se termine à i*i. Il y a un total de i expressions (nous pouvons obtenir cet effet grâce à une boucle).

Par conséquent, une double boucle est nécessaire pour contrôler la sortie. La boucle externe contrôle le nombre de lignes i (i est au minimum 1 et le maximum est 9), et la boucle interne contrôle la colonne j (j est au minimum 1 et le maximum est égal à i).

Code d'implémentation :

for(var i = 1; i <= 9; i++){     //外层循环控制行
	for(var j = 1; j <= i; j++) //内层循环控制列
	{
		document.write(j+"*"+i+"="+j*i+"   ");
	}
	document.write("</br>");
}

Résultat de sortie :

Nous pouvons également mettre la table de multiplication 99 dans un tableau et la sortir comme l'image au début :

document.write("<table>");

for (var i = 1; i <= 9; i++) { //外层循环控制行
	document.write("<tr>");
	for (var j = 1; j <= i; j++) //内层循环控制列
	{
		document.write("<td>" + j + "*" + i + "=" + j * i + "</td>");
	}
	//换行，控制每行的输出几个表达式
	document.write("</tr>");
}
document.write("</table>");

Ajoutez ensuite le style CSS pour la modifier :

table {
	width: 600px;
	border-collapse: separate;
}

table td {
	border: #000 1px solid;
	text-align: center;
}

Regardez les résultats de sortie :

[Apprentissage recommandé :

Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!