Analyse récapitulative des types de boucles en JavaScript

En anglais, le mot Loop fait référence à une forme créée par une ligne courbe. Un concept similaire, le mot Loop a été utilisé en programmation. Si vous regardez l'image ci-dessous, vous comprendrez clairement comment le flux d'instructions se répète dans une boucle d'actions. En programmation, le concept de boucles n'est pas un concept nouveau, elles sont souvent utilisées lors du codage. Bien que la syntaxe soit différente selon les langues, les concepts de base sont les mêmes, répétez les mêmes blocs de code si nécessaire. JavaScript ajoute des types de boucles (y compris divers types de boucles) et rend leur utilisation plus confortable et efficace. Dans cet article, nous découvrirons toutes les boucles disponibles en JavaScript.

Définition de la boucle

En programmation informatique, Loop est le processus de répétition d'un bloc de code spécifique.

Types de boucles JavaScript

Il existe sept types de boucles en JavaScript. Nous les avons répertoriés pour vous aider à comprendre plus clairement leur flux de travail et leur utilisation. Cet article vous aidera également à différencier ces sept types de boucles, par exemple où, quand ou comment les utiliser. Commençons.

whileBoucle

whileLa boucle est l'un des types de boucles les plus basiques disponibles en JavaScript. Vous devez avoir entendu dire que JavaScript n'est pas le seul langage de programmation. L'instruction

while génère une boucle qui est exécutée dans un bloc d'instructions spécifique si la condition est true. La condition est vérifiée à chaque fois avant d'exécuter le bloc de code.

Syntaxe

while (条件) {    // 代码块}

Exemple

var i = 8;while (i < 10) {
    console.log(&#39;我小于10&#39;)
    i++
}

Dans l'exemple ci-dessus, la condition (i sera vérifiée en premier Si la condition est <code>true, <. le bloc de code dans> sera exécuté, et avant la prochaine itération, la valeur de while sera augmentée de i, principalement parce que nous avons ajouté une instruction 1. i++

La boucle do-while

est légèrement différente de do-while en ce sens qu'elle contient une fonctionnalité supplémentaire d'exécution au moins une fois. while

Syntaxe

do {    // 代码块}while (条件)

Exemple

var i = 8;do {
    console.log('我的值是' + i)
    i++
}while (i > 7 && i < 10)

Vous pouvez voir que notre condition est

, mais la valeur de (i > 7 && i a déjà été imprimée. Étant donné que cette technique de bouclage exécute d’abord le bloc de code au lieu de prendre en compte la condition, une fois le bloc de code exécuté, la condition est exécutée au deuxième tour. Pour la deuxième fois la boucle parcourt le bloc de code, seule la condition sera exécutée si la condition est <code>i=7. true

boucle for

boucle et while boucle fonctionnent exactement de la même manière, même le temps d'exécution n'est pas très différent. Alors, que faut-il pour un autre système circulatoire offrant la même fonctionnalité ? for

Dans une boucle

, la déclaration de variable et l'initialisation de la boucle, la requête conditionnelle et l'incrémentation ou la décrémentation de la variable de boucle peuvent tous être complétés dans la même ligne. Cela augmente la lisibilité et réduit les risques d’erreurs. for

Syntaxe

for ([变量初始化];[条件];[变量递增或递减]) {    // 代码块
}

Exemple

for (var i = 0; i  < 10; i++) {
    console.log(&#39;我的值是： &#39; + i)
}

Comme le montre l'exemple ci-dessus, initialisation de variable

, condition i = 0 et incrément de variable i Tous déclarés sur la même ligne. C'est plus facile à comprendre et plus lisible, non ? L'utilisation de la boucle <code>i++

est exactement la même que celle de la boucle for mentionnée précédemment. Mais afin de rendre le code plus facile à lire et à comprendre, nous utilisons la plupart du temps des boucles while au lieu de boucles for. while

forEach()

C'est la méthode prototype de tableau (même

et map). La méthode set appelle une fonction donnée (ou fonction de rappel) à chaque fois avec chaque élément du tableau, dans l'ordre d'index forEach(). Notez que index n'exécute pas la fonction donnée sur les éléments du tableau qui n'ont aucune valeur. forEach()

Syntaxe

array.forEach(function(currentValue, index, array){    // 函数主体})

Les méthodes prennent des fonctions comme paramètres. Cette fonction se compose de trois paramètres : forEach()

•  : enregistre la valeur actuelle en cours de traitement currentValue

•  : enregistre ce tableau spécifique. index de la valeur dans index

•  : enregistre l'intégralité du tableau array

Vous pouvez utiliser

pour parcourir une collection <.>, Vous pouvez également l'utiliser pour parcourir une carte forEach(). setmap Exemple La méthode

var array = [10, 20, "hi", , {}, function () {console.log('我是一个函数')}]array.forEach(function(item, index){
    console.log('array [' + index + '] 是： '+ item)
})

parcourt le tableau

. Si vous n'utilisez pas l'index forEach(), vous ne pouvez utiliser que array. Les paramètres peuvent être utilisés en conséquence, mais ces trois paramètres ne sont pas requis à chaque fois. indexarray.forEach(function(item){})L'utilisation de

rend la traversée du tableau très simple. Ne vous inquiétez pas des variables de boucle, des conditions et de tout le reste, il s'occupe de toutes les itérations.

forEach()和for的区别

你可以使用一个从0开始到array.length（该数组长度）简单的遍历一个数组。那么为什么还要提出不同的选择呢？

一个经验法则是，如果你可以选择使用原型方法，你就应该使用原型方法。因为，原型方法更清楚地知道对象，并对最佳方法进行了优化。下面这个示例能更好的来说明他们的区别之处：

var arr = [];
arr[0]=0;
arr[10]=10;for(var i=0; i<arr.length; i++){
    console.log("I am for:" + i);
}

arr.forEach(function(){
    console.log("I am forEach");
});

如果你运行上面的代码，你会发现for打印了11次，而forEach()只打印了两次：

原因是，for循环是一个简单的for循环，对它的用途一无所知。它从0到arr.length。然而，当你使用forEach()的时候，它知道arr只有两个元素，虽然长度是10。累此，它实际上只迭代了两次。

根据这个，如果你想在循环中跳过繁重的工作，迭代一个iterable，你应该使用forEach()。然而，仅仅迭代（相同数量的迭代）的迭代时间相对于for循环来说是次要的。因为迭代性能更好。

map()

map是数组的另一个原型方法。map()方法将创建一个新的数组，该数组的返回值由一个给定的数组的函数执行生成。

语法

var newArray= oldArray.map(function (currentValue, index, array){    //Return element for the newArray});

map()方法以函数作为参数，该函数有三个参数：

• currentValue： 在数组中处理的当前元素

• index：数组中正在处理的当前元素的索引值

• array：数组映射的调用

示例

var num = [1, 5, 10, 15];var doubles = num.map(function(x) {    return x * 2;
});

在上面的示例中，名为doubles的新数组将输出doubles=[2, 10, 20, 30]和num数组仍旧是num=[1, 5, 10, 15]。

for…in

这个方法主要是对象的迭代。for...in在语句中迭代对象的可枚举属性。对于每个不同的属性，可以执行语句。

因为我们知道数组也是一种特殊的对象，所以不要认为数组不能用这个来进行迭代。

语法

for (variableName in object) {
    Block of code
}

示例

var obj = {a: 1, b: 2, c: 3};    
for (var prop in obj) {
    console.log('obj.'+prop+'='+obj[prop]);
};

为什么在数组中使用for...in迭代不可取？

for...in不应该在数组迭代中使用，特别是index顺序非常重要。

实际上，数组索引和一般对象属性之间没有区别，数组索引只是可枚举属性。

for...in不会每次都以任何特定的顺序返回index值。for...in在迭代中，这个循环将返回所有可枚举属性，包括那些具有非整数名称的属性和继承的属性。

因此，建议在遍历数组时使用for或forEach()。因为迭代的顺序是依赖于现实的迭代，并且遍历一个数组，使用for...in可能不会以一致的顺序访问元素。

var arr = [];
arr[2] = 2;
arr[3] = 3;
arr[0] = 0;
arr[1] = 1;

在这种情况下，使用forEach()将输出一个0, 1, 2, 3。但使用for...in并不能保证会输出什么。

对于for...in还有一件事你应该记住，它遍历对象的所有属性，包括继承的（来自父类）。如果只想在对象自己的属性上进行迭代，那么应该执行下面这样的操作：

for(var prop in obj){    if(obj.hasOwnProperty(prop)){
        Code block here
    }
}

for…of

这是ES6中新引入的一种循环类型。使用for...of语句，你可以遍历任何可迭代的对象，比如Array、String、Map、WeakMap、Set、参数对象、TypeArray，甚至一般对象。

语法

for (variable of iterable) {
    Block of code
}

示例

var str= 'paul';for (var value of str) {
    console.log(value);
}

map的迭代

let itobj = new Map([['x', 0], ['y', 1], ['z', 2]]);for (let kv of itobj) {
    console.log(kv);
}// => ['x', 0]// => ['y', 1]// => ['z', 2]for (let [key, value] of itobj) {
    console.log(value);
}// => 0// => 1// => 2

for...in循环主要遍历对象，其实际的插入顺序中是可枚举的属性；for...of迭代任何可迭代对象的给定值（而不是属性名）。

Object.prototype.objProto = function() {}; 
Array.prototype.arrProto = function() {};let iterable = [8, 55, 9];
iterable.title = 'VoidCanvas';for (let x in iterable) {
    console.log(x); // logs 0, 1, 2, title, arrProto, objProto}for (let i of iterable) {
    console.log(i); //  8, 55, 9}

正如你所见，for...of都是关于对象自己value的迭代，而for...in将会考虑原型和继承的属性。如果你想在对象上迭代（而不是迭代）。for...of将会考虑它自己的所有属性，但迭代的情交下，它只会考虑适合这种迭代的元素。这就是为什么在上面的例子中，for...of没有迭代属性。

相关推荐：

JS implémente un défilement circulaire intermittent du texte

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!