Maîtriser JavaScript : partie 3, Explorer les boucles

Supposons que votre tâche consiste à écrire un programme qui affiche les nombres de 1 à 100. Une façon d’y parvenir est d’écrire 100 console.log() déclarations. Mais je suis sûr que vous ne le ferez pas, parce que vous en aurez assez de la ligne neuf ou de la ligne dix.

La seule partie qui change dans chaque déclaration est le nombre, il devrait donc y avoir un moyen d'écrire une seule déclaration. Il y a aussi des boucles. Les boucles nous permettent de répéter un ensemble d'étapes dans un bloc de code.

• Boucle While
• Boucle Do-While
• Pour la boucle
• tableau
• Boucle For-Of
• Boucle For-In

Boucle While

Une boucle While exécutera à plusieurs reprises un ensemble d'instructions lorsqu'une condition est évaluée comme vraie. Lorsque la condition est fausse, le programme quitte la boucle. Ce type de boucle teste une condition avant d'exécuter l'itération. L'itération est l'exécution du corps de la boucle. Voici un exemple basique de boucle while :

let x = 10;

while(x > 0) {
   console.log(`x is now ${x}`);
   x -= 1;
}

console.log("Out of the loop.");

/* Outputs:
x is now 10
x is now 9
x is now 8
x is now 7
x is now 6
x is now 5
x is now 4
x is now 3
x is now 2
x is now 1
Out of the loop. */

Dans l'exemple ci-dessus, nous ajoutons d'abord x 设置为 10。在本例中，条件 x > 0 的计算结果为 true，因此执行块内的代码。这会打印语句“x is now 10”，并将 x 的值减 1。在下一次检查期间，x 等于 9，仍然大于 0。因此循环继续。在最后一次迭代中，x 最终变为 1，并且我们打印“x is now 1”。之后，x 变为 0，因此我们正在评估的条件不再成立 true. Ensuite, nous commençons à exécuter les instructions en dehors de la boucle et imprimons "Out of theloop".

Voici la forme générale d'une boucle while :

while (condition) {
    statement;
    statement;
    etc.
}

Une chose à retenir lors de l’utilisation des boucles while est de ne pas créer une boucle sans fin. Cela se produit parce que la condition ne devient jamais false. Si cela vous arrive, votre programme plantera. Voici un exemple :

let x = 10;

while(x > 0) {
   console.log(`x is now ${x}`);
   x += 1;
}

console.log("Out of the loop.");

Dans ce cas, on augmente x 而不是减少，并且 x jusqu'à une valeur déjà supérieure à 0, donc la boucle continuera indéfiniment.

Mission

Combien de fois cette boucle sera-t-elle exécutée ?

let i = 0;

while (i < 10) {
    console.log("Hello, World");
    i += 1;
}

Boucle Do-While

La boucle do-while exécutera d'abord le corps de l'instruction, puis vérifiera la condition. Ce type de boucle est utile lorsque vous savez que vous souhaitez exécuter le code au moins une fois. L'exemple suivant enregistrera la valeur de x une fois, même si la condition est évaluée à x 的值一次，即使条件计算结果为 false，因为 x car x est égal à 0.

let x = 0;

do {
   console.log(`x is now ${x}`);
   x -= 1;
} while(x > 0);

console.log("Out of the loop.");

/* Outputs:
x is now 0
Out of the loop. */

J'ai utilisé plusieurs fois des boucles do-while dans mes propres projets pour générer des valeurs aléatoires, puis continuer à les générer tant qu'elles ne remplissent pas certaines conditions. Cela permet d'éviter la duplication due à l'initialisation et à la réallocation en boucle.

Voici la forme générale d'une boucle do-while :

do {
    statement;
    statement;
    etc.
} while (condition);

Mission

Écrivez une boucle do-while pour afficher les nombres de 1 à 10.

Pour la boucle

La boucle for exécutera un bloc de code à plusieurs reprises un nombre de fois spécifique. L'exemple suivant montre les nombres de 1 à 10 :

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Voici la forme générale d'une boucle for :

for (initial; condition; step) {
    statement;
    statement;
    etc.
}

Initial est une expression qui définit la valeur d'une variable. Il s'agit d'une expression facultative qui effectue l'initialisation.

Une condition est une expression qui doit être vraie pour exécuter une instruction. Les instructions dans le bloc ne seront exécutées que si la condition est évaluée à true. Ignorer complètement les conditions les fera toujours être vraies, vous devrez donc quitter la boucle d'une autre manière.

step est une expression qui incrémente la valeur d'une variable. Ceci est également facultatif et est exécuté une fois que toutes les instructions du bloc for ont été exécutées. Les expressions d'étape sont souvent utilisées à proximité de la condition de fin d'une boucle.

Vous pouvez également écrire une boucle for comme équivalente à une boucle while. Tout ce que vous avez à faire est de modifier légèrement vos déclarations et conditions. La boucle for ci-dessus peut être réécrite comme :

initial;

while(condition) {
    statement;
    statement;
    etc.
    step;
}

Un modèle de programmation consiste à utiliser une boucle for pour mettre à jour la valeur d'une variable avec à la fois la variable elle-même et la nouvelle valeur. Cet exemple ajoute les nombres 1 à 10 :

let x = 0;

for (let i = 1; i <= 10; i++) {
    x += i;
}

// Outputs: 55
console.log(x);

C'est la boucle while équivalente qui donne le même résultat :

let x = 0;
let i = 1;

while(i <= 10) {
  x += i;
  i += 1;
}

// Outputs: 55
console.log(x);

Vous devriez remarquer comment j'incrémente à la fin du bloc while plutôt qu'au début. Augmenter la variable de boucle i au début nous donnerait 65, ce qui n'est pas ce que nous avons l'intention de faire ici.

L'opérateur

+= est un opérateur d'affectation qui ajoute une valeur à une variable. Voici la liste de tous les opérateurs d'affectation :

操作员	示例	等效
+=	x += 2	x = x + 2
-=	x -= 2	x = x - 2
*=	x *= 2	x = x * 2
/=	x /= 2	x = x / 2
%=	x%=2	x = x % 2

任务

编写一个 for 循环来计算数字的阶乘。数字n的因子是从1到n的所有整数的乘积。例如，4！ （4 阶乘）为 1 x 2 x 3 x 4，等于 24。

数组

数组是一个包含项目列表的对象，这些项目称为元素，可以通过索引进行访问。索引是元素在数组中的位置。第一个元素位于索引 0 处。

数组有一个名为 length 的属性，它为您提供数组中元素的总数。这意味着您可以创建一个 for 循环来迭代数组中的项目，如下所示：

let arr = [1, 2, "Hello", "World"];

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

/*
Outputs:
1
2
Hello
World
*/

二维数组是指元素为数组的数组。例如：

let arr = [
    [1, 2],
    ["Hello", "World"]
];

这是循环数组并显示每个元素的方式：

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

/*
Outputs:
1
2
Hello
World
*/

您将如何重写上面的循环，以便从末尾开始打印数组元素？

For-Of 循环

迭代数组时最常见的场景之一是从头开始，然后一次遍历所有元素，直到到达末尾。有一种更短的方法可以将 for 循环编写为 for-of 循​​环。

for-of 循​​环让我们可以循环遍历可迭代对象（例如数组、映射和字符串）的值。 for-of 循​​环基本上用于迭代对象的属性值。这是上一节中的循环，重写为 for-of 循​​环。

let arr = [1, 2, "Hello", "World"];

for (let item of arr) {
    console.log(item);
}

/*
Outputs:
1
2
Hello
World
*/

循环字符串：

let big_word = "Pulchritudinous";

for (let char of big_word) {
    console.log(char);
}

/*
Outputs:
P
u
l
c
h
r
i
t
u
d
i
n
o
u
s
*/

For-In 循环

这种循环让我们可以循环访问对象的属性。对象是一种将键映射到值的数据结构。 JavaScript 中的数组也是对象，因此我们也可以使用 for-in 循环来循环数组属性。我们首先看看如何使用 for-in 循环来迭代对象键或属性。

以下是使用 for-in 循环遍历对象键的示例：

let obj = {
    foo: "Hello",
    bar: "World"
};

for (let key in obj) {
    console.log(key);
}

/*
Outputs:
foo
bar
*/

下面是使用 for-in 循环遍历数组的示例：

let arr = [1, 2, "hello", "world"];

for (let key in arr) {
    console.log(arr[key]);
}

/* Outputs:
1
2
hello
world */

我想补充一点，即使我们能够使用 for-in 循环遍历数组元素，您也应该避免这样做。这是因为它的目的是循环访问对象的属性，如果您只想循环数组索引来获取数组值，则在某些情况下可能会得到意外的结果。

评论

循环让我们减少代码中的重复。 While 循环让我们重复一个动作，直到条件为假。 do-while 循环将至少执行一次。 For 循环让我们重复一个动作，直到到达计数结束。 for-in 循环的设计是为了让我们可以访问对象中的键。 for-of 循​​环的设计是为了让我们能够获取可迭代对象的值。

在下一部分中，您将学习函数。

本文已根据 Monty Shokeen 的贡献进行了更新。 Monty 是一位全栈开发人员，他也喜欢编写教程和学习新的 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!