Maison  >  Article  >  interface Web  >  Quels types d’instructions de boucle javascript existe-t-il ?

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

青灯夜游
青灯夜游original
2021-07-16 16:08:308687parcourir

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.

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

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 i3243f903132e53f8cc1d9bc96a250b45{     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: &#39;xiaohua&#39;
},{
    id:2,
    name: &#39;xiaomin&#39;
},{
    id:3,
    name: &#39;xiaobai&#39;
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === &#39;xiaohua&#39;)
})
console.log(arr2)  // [{id:1,name:&#39;xiaohua}]

 ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素  (falsenullundefined0NaN 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!

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