Maison  >  Article  >  interface Web  >  Comment utiliser la boucle for en JavaScript

Comment utiliser la boucle for en JavaScript

WBOY
WBOYoriginal
2023-05-16 10:07:07929parcourir

JavaScript est un langage de programmation puissant capable de nombreuses fonctions. L’une des structures de boucle les plus élémentaires est la boucle for. Cela nous permet d'exécuter à plusieurs reprises un morceau de code basé sur des conditions, ce qui est très approprié pour les scénarios dans lesquels nous devons utiliser à plusieurs reprises une collection d'objets ou parcourir un tableau.

La boucle for se compose des trois parties suivantes : l'initialisation de la boucle, la condition de la boucle et l'incrément de la boucle. La structure syntaxique est la suivante :

for (循环初始化; 循环条件; 循环增量) {
  // 循环执行的代码
}

Examinons en détail le rôle de chaque partie :

  • Initialisation de la boucle : exécutée une fois avant le début de la boucle, généralement utilisée pour initialiser des variables telles que des compteurs.
  • Condition de boucle : utilisée pour décider de continuer à exécuter le code de la boucle. Si la condition est vraie, continuez la boucle ; si elle est fausse, arrêtez la boucle.
  • Incrément de boucle : exécuté une fois après la fin de chaque boucle, généralement utilisé pour incrémenter ou décrémenter des variables telles que des compteurs.

Ensuite, apprenons à utiliser la boucle for à travers quelques exemples.

1. Traverser un tableau

Examinons d'abord un scénario d'application extrêmement courant : le parcours d'un tableau. Le code est le suivant :

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

Le code ci-dessus définit un tableau numbers, puis utilise une boucle for pour parcourir chaque élément du tableau. La condition de boucle i <numbers.length détermine la condition pour que la boucle soit exécutée, et l'opération d'incrémentation i++ garantit que chaque boucle sera incrémentée. Dans le corps de la boucle, nous utilisons la fonction console.log pour imprimer la valeur de chaque élément. numbers,然后使用 for 循环来遍历数组中的每个元素。循环条件 i < numbers.length 确定了循环要执行的条件,而递增操作 i++ 保证了每次循环都会自增。在循环体中,我们使用 console.log 函数来打印每个元素的值。

2. 构建一个乘法表

接下来,我们尝试使用 for 循环来构建一个乘法表。代码如下:

for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= i; j++) {
    document.write(`${j}x${i}=${i*j} `);
  }
  document.write('<br>');
}

代码中嵌套了两个 for 循环。外层循环变量 i 代表乘法表中的行数,内层循环变量 j 代表每一行中的列数。在每次内层循环结束后,我们会换行,以避免在同一行输出多个乘积。

以上代码实现了一个简单的乘法表,是初学者们很好的练习题目。

3. 嵌套的 for 循环实现数组求和

接下来,我们来看一个稍微复杂一点的例子:使用嵌套的 for 循环来对二维数组进行求和。代码如下:

let arrays = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let sum = 0;

for (let i = 0; i < arrays.length; i++) {
  for (let j = 0; j < arrays[i].length; j++) {
    sum += arrays[i][j];
  }
}

console.log(sum);

以上代码定义了一个二维数组 arrays,然后通过嵌套的 for 循环来对数组中的每个元素进行求和。外层循环变量 i 代表数组中的每一行,内层循环变量 j 代表每一行中的列数。求和操作 sum += arrays[i][j] 累加了数组中的每个元素。最后,我们打印出求和结果 console.log(sum)

4. 模拟游戏中的 AI

最后,我们来看一个有趣的例子:使用 for 循环来模拟游戏中的 AI 行为。代码如下:

let enemyHealth = 100;
let playerAttack = [10, 15, 20, 25, 30];

for (let i = 0; i < playerAttack.length; i++) {
  let damage = Math.floor(Math.random() * playerAttack[i]);
  enemyHealth -= damage;
  
  if (damage > 0) {
    console.log(`玩家使用技能${i+1},对敌人造成了${damage}点伤害!敌人还剩余${enemyHealth}点生命值。`);
  } else {
    console.log(`玩家技能${i+1}未能命中敌人!敌人还剩余${enemyHealth}点生命值。`);
  }
  
  if (enemyHealth <= 0) {
    console.log('敌人被击败了!');
    break;
  }
}

以上代码定义了一个敌人生命值和一个数组 playerAttack,其中存储了玩家的攻击力。使用 for 循环来模拟玩家在游戏中使用不同技能攻击敌人的行为。在每次循环中,我们会生成随机数来模拟技能命中后对敌人造成的伤害,并根据情况打印出相应的信息。

如果敌人生命值被扣减到 0 或以下,游戏结束,我们使用 break

2. Construire une table de multiplication

Ensuite, nous essayons d'utiliser une boucle for pour construire une table de multiplication. Le code est le suivant : 🎜rrreee🎜Il y a deux boucles for imbriquées dans le code. La variable de boucle externe i représente le nombre de lignes dans la table de multiplication et la variable de boucle interne j représente le nombre de colonnes dans chaque ligne. Nous enroulons les lignes après chaque boucle interne pour éviter de produire plusieurs produits sur la même ligne. 🎜🎜Le code ci-dessus implémente une table de multiplication simple, ce qui est une bonne question pratique pour les débutants. 🎜🎜3. Les boucles for imbriquées implémentent la sommation de tableaux🎜🎜Ensuite, regardons un exemple légèrement plus complexe : utiliser des boucles for imbriquées pour additionner des tableaux à deux dimensions. Le code est le suivant : 🎜rrreee🎜Le code ci-dessus définit un tableau bidimensionnel tableaux, puis utilise une boucle for imbriquée pour additionner chaque élément du tableau. La variable de boucle externe i représente chaque ligne du tableau et la variable de boucle interne j représente le nombre de colonnes dans chaque ligne. L'opération de somme sum += arrays[i][j] accumule chaque élément du tableau. Enfin, nous imprimons le résultat de la sommation console.log(sum). 🎜🎜4. Simuler l'IA dans les jeux🎜🎜Enfin, regardons un exemple intéressant : utiliser une boucle for pour simuler le comportement de l'IA dans les jeux. Le code est le suivant : 🎜rrreee🎜Le code ci-dessus définit une valeur de santé de l'ennemi et un tableau playerAttack, qui stocke la puissance d'attaque du joueur. Utilisez une boucle for pour simuler le comportement des joueurs utilisant différentes compétences pour attaquer les ennemis dans le jeu. Dans chaque cycle, nous générerons des nombres aléatoires pour simuler les dégâts causés à l'ennemi après que la compétence ait touché, et imprimerons les informations correspondantes en fonction de la situation. 🎜🎜Si la santé de l'ennemi est réduite à 0 ou en dessous, le jeu se termine et nous utilisons l'instruction break pour forcer la fin de la boucle. 🎜🎜Grâce aux exemples ci-dessus, nous pouvons voir l'application flexible de la boucle for en JavaScript. Elle peut non seulement parcourir des tableaux, créer des tables de multiplication et d'autres opérations courantes, mais également simuler le comportement de l'IA dans les jeux. En pratiquant et en utilisant la boucle for à plusieurs reprises, vous pourrez mieux comprendre et maîtriser ses mystères et établir une base solide pour votre propre parcours de programmation. 🎜

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn