Quels types d'instructions de boucle javascript existe-t-il ?

Les instructions de boucle incluent : 1. boucle for ; 2. boucle "for...in" ; 3. boucle while ; 4. boucle "do... while" ; boucle de filtre ;8. "Object.keys" parcourt les propriétés de l'objet.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Dans le développement d'un projet, quel que soit le framework sur lequel il est construit, le traitement des données est nécessaire et le traitement des données ne peut pas être séparé des différentes boucles de parcours. Il existe de nombreuses façons de parcourir en JavaScript. Voici quelques boucles js courantes.

1. boucle for

L'instruction for est principalement utilisée pour exécuter une boucle qui détermine le nombre d'exécutions. La syntaxe de base de l'instruction

for est la suivante :

for([初始值表达式]；[条件表达式]；[增量表达式]){
   循环体语句；
}

Explication :

• "Expression de la valeur initiale" : définit la valeur initiale de la variable de boucle

• "Expression conditionnelle" : comme base pour si vous souhaitez entrer dans la boucle, vous pouvez C'est n'importe quelle expression, mais c'est généralement une expression relationnelle ou une expression logique, et sa valeur est vraie ou fausse. Chaque fois avant d'exécuter la boucle, la valeur de l'expression conditionnelle sera jugée. Si la valeur est vraie (la valeur est vraie ou non nulle ou non vide), l'instruction du corps de la boucle est exécutée ; sinon, la boucle est quittée et le code après l'instruction de la boucle est exécuté

• "Expression d'incrémentation ; " : Mise à jour basée sur cette expression La valeur de la variable de boucle.

N'importe laquelle des 3 expressions ci-dessus peut être omise, mais il convient de noter que ; in for() ne peut pas être omis. Ainsi, si les trois expressions sont omises, l'instruction for devient : for(;;){loop body Statement}. Ce qu'il faut noter à ce stade, c'est que s'il n'y a pas d'instruction pour quitter la boucle dans le corps de la boucle, elle entrera dans une boucle infinie.

Exemple :

     var sum = 0;
     for(var i = 1; i <= 100;i++){        //在for语句中使用var声明循环变量，使代码更简洁
         sum += i;
     }
     alert("1～100的累加和sum=" + sum);

2. for...in

La boucle for...in est principalement destinée à parcourir des objets Lorsque vous souhaitez obtenir la valeur clé correspondante de l'objet, utilisez for.. .in ou Plus pratique

var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"];  //定义数组
var b = [], num = 0;
for (var i = 0; i < a.length; i ++) {  //遍历数组
    if (typeof a[i] == "number")  //如果为数字，则返回该元素的值
        b.push(a[i]);
    num ++;  //计数器
}
console.log(num);  //返回42，说明循环了42次
console.log(b);  //返回[1,2,4,56]

3. Boucle While

L'instruction while est l'instruction de boucle la plus couramment utilisée. Elle est souvent utilisée dans les programmes où vous n'avez besoin que d'exécuter une boucle basée sur des conditions sans vous soucier du nombre de. boucles.

while 语句的基本语法如下：
while(条件表达式){
     循环体;
}

Description :

• Expression conditionnelle : C'est une condition de contrôle de boucle, qui doit être placée entre parenthèses. Il peut s'agir de n'importe quelle expression, mais il s'agit généralement d'une expression relationnelle ou d'une expression logique, et la valeur est vraie ou. FAUX. Remarque : les valeurs vraies, non nulles et non vides sont toutes de vraies valeurs, sinon ce sont de fausses valeurs.

• Corps de la boucle : représente les opérations qui doivent être effectuées à plusieurs reprises. Il peut s'agir d'une instruction simple ou d'une instruction composée. Lorsqu'il s'agit d'une instruction simple, les accolades {} peuvent être omises, sinon les accolades {} doivent être utilisées.

Lorsque l'instruction while est exécutée, elle juge d'abord la valeur de l'expression conditionnelle si elle est vraie, l'instruction du corps de la boucle est exécutée, puis l'expression conditionnelle est jugée si la valeur est toujours vraie, la boucle. L'instruction body continue d'être exécutée ; sinon, l'instruction qui suit l'instruction while est exécutée. Si la valeur de l'expression est fausse la première fois qu'elle est évaluée (soit fausse, soit 0, soit nulle, etc.), le corps de la boucle ne sera pas exécuté une seule fois.

Il convient de noter que pour que la boucle while se termine normalement, il doit y avoir des instructions qui modifient les conditions de la boucle ou d'autres instructions pour terminer la boucle dans le corps de la boucle, sinon la boucle while entrera dans une boucle infinie. autrement dit, le corps de la boucle sera exécuté en continu.

Par exemple, l'instruction de boucle suivante provoquera une boucle infinie.

var i=1,s=0;
whiel(i<=5){
    s+=i;      
}

La valeur initiale de i dans le code ci-dessus est 1. Puisque la valeur de la variable i n'est pas modifiée dans le corps de la boucle, l'expression i<=5 est toujours vraie, donc le corps de la boucle s'exécutera toujours.

Les boucles infinies occuperont considérablement les ressources du système et peuvent éventuellement provoquer un crash du système, nous devons donc faire attention à éviter les boucles infinies lors de la programmation.

     var sum = 1, i = 1;
     var ex = 1;
     while(sum <= 1.5){
         sum += 1/((i + 1)*(i + 1));
         if(sum > 1.5)
              break;
         i++;
         ex +=" + 1/(" + i + "*" + i + ")";
     }
     alert("表达式的值小于等于1.5时的i=" + i + "，对应的表达式为：" + ex);

4. boucle do...while

L'instruction do...while est une variante de l'instruction while. La différence entre les deux est que l'instruction while place le jugement de condition de boucle avant l'exécution de l'instruction de corps de boucle, tandis que l'instruction do...while place le jugement de condition de boucle après l'exécution de l'instruction de corps de boucle. La syntaxe de base de l'instruction

do...while est la suivante :

do{
  循环体;
}while (条件表达式);

Les significations de "expression conditionnelle" et de "corps de boucle" sont les mêmes que celles de l'instruction while. Ce qu'il faut noter ici, c'est que l'instruction do... while doit se terminer par ;. Si elle n'est pas ajoutée dans le code, JavaScript l'ajoutera automatiquement. Lorsque l'instruction

do...while est exécutée, l'instruction du corps de la boucle est d'abord exécutée, puis la valeur de l'expression conditionnelle est jugée si la valeur est vraie (la valeur est vraie ou une valeur non nulle), l'instruction du corps de la boucle est à nouveau exécutée. L'instruction do...while exécutera le corps de la boucle au moins une fois, ce qui est très différent de l'instruction while.

     var sum = 1, i = 1;
     var ex = 1;
     do{
         sum += 1/((i + 1)*(i + 1));
         if(sum > 1.5)
              break;
         i++;
         ex +=" + 1/(" + i + "*" + i + ")";
     }while(sum <= 1.5);
     alert("表达式的值小于等于1.5时的i=" + i + "，对应的表达式为：" + ex);

5. forEach

L'utilisation de forEach est similaire à l'utilisation de map, sauf que la méthode forEach ne renvoie pas de valeur, elle est uniquement utilisée pour exploiter les données et la boucle ne peut pas être arrêtée au milieu , et tous les membres seront toujours parcourus

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

6. map

La méthode map transmet tour à tour tous les membres du tableau dans la fonction paramètre, puis renvoie les résultats de chaque exécution dans un nouveau tableau. La boucle ne peut pas être arrêtée au milieu, et tous les membres seront toujours parcourus

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

七、filter过滤循环

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string)：

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean 是一个函数，它会对遍历数组中的元素，并根据元素的真假类型，对应返回 true 或 false.

八、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

判断一个对象是否是空对象，可以用Object.keys(obj).length>0

【推荐学习：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!