Home >Web Front-end >Front-end Q&A >What types of javascript loop statements are there?

What types of javascript loop statements are there?

青灯夜游
青灯夜游Original
2021-07-16 16:08:308735browse

Loop statements include: 1. for loop; 2. "for...in" loop; 3. while loop; 4. "do...while" loop; 5. forEach loop; 6. map; 7 , filter filter loop; 8. "Object.keys" traverses the properties of the object.

What types of javascript loop statements are there?

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

In project development, no matter which framework it is based on, data processing is necessary, and processing data is inseparable from various traversal loops. There are many ways to loop through in JavaScript. Here are some common js loops.

1. for loop

The for statement is mainly used to execute a loop that determines the number of executions.

The basic syntax of the for statement is as follows:

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

Description:

  • "Initial value expression": Set the initial value for the loop variable;

  • "Conditional expression": As the basis for whether to enter the loop, it can be any expression, but it is generally a relational expression or a logical expression, and the value is true or false. Each time before executing the loop, the conditional expression value will be judged. If the value is true (the value is true or non-0 or non-empty), the loop body statement is executed; otherwise, the loop is exited and the code after the loop statement is executed;

  • "Increment expression Expression": Update the value of the loop variable based on this expression.

Any of the above three expressions can be omitted, but it should be noted that; in for() cannot be omitted. So if all three expressions are omitted, the for statement becomes: for(;;){loop body statement}. What needs to be noted at this time is that if there is no statement to exit the loop within the loop body, it will enter an infinite loop.

Example:

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

2. for...in

##The for...in loop is mainly aimed at traversing objects. When you want to get the corresponding key value of an object, it is more convenient to use for...in

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. While loop

The while statement is the most commonly used A loop statement that is often used in programs to execute loops based on conditions without caring about the number of loops.

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

Explanation:

  • Conditional expression: It is a loop control condition and must be placed in parentheses. It can be any expression, but it is generally a relational expression or A logical expression that evaluates to true or false. Note: Values ​​that are true, non-0, and non-null are all true values, otherwise they are false values.

  • Loop body: represents an operation that needs to be performed repeatedly. It can be a simple statement or a compound statement. When it is a simple statement, the braces {} can be omitted, otherwise the braces {} must be used.

When the while statement is executed, it first judges the value of the conditional expression. If it is true, the loop body statement is executed, and then the conditional expression is judged. If the value is still true, , then continue to execute the loop body statement; otherwise, execute the statement after the while statement. If the value of the expression is false the first time it is evaluated (either false or 0 or null, etc.), the body of the loop will not be executed even once.

It should be noted that in order for the while loop to end normally, there should be statements in the loop body that modify the loop conditions or other statements to terminate the loop. Otherwise, the while loop will enter an infinite loop, that is, it will continue to execute in a loop. Loop body.

For example, the following loop statement will cause an infinite loop.

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

The initial value of i in the above code is 1. Since the value of the i variable is not modified in the loop body, the expression i72815d2f950ef43714f249b1bc9b2882{     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高级教程

The above is the detailed content of What types of javascript loop statements are there?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn