Home > Web Front-end > JS Tutorial > What are the loop structures in javascript

What are the loop structures in javascript

青灯夜游
Release: 2021-11-05 14:01:17
Original
7132 people have browsed it

There are three types of js loop structures: 1. for loop, with the syntax "for (initialization statement; loop condition; self-increment or self-decrement) {code block}"; 2. while loop, with the syntax "while (conditional statement) ){code block}"; 3. "do while" loop, the syntax is "do{statement block}while (conditional statement);".

What are the loop structures in javascript

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

The so-called loop is to repeatedly execute a piece of code. The judgment ability of computers is far inferior to that of humans. Computers are better at one thing-constant repetition. And we call this a loop in JavaScript. Let's learn about loops in JavaScript.

What are the js loop structures?

There are three types of js loop structures

  • for loop==> Used multiple times Traverse the code block

  • while loop==> When the specified condition is true, loop the code block

  • do while loop==> When the specified condition is true, the loop code block

1, for loop

for is composed of two parts, the condition control and the loop body

Grammar:

for(初始化语句;循环条件;自增或自减){
	需要重复的代码块;
}
Copy after login

The structure of the for statement is as shown in the figure:
What are the loop structures in javascript
The execution sequence of the for loop

1. Initialization expression

2. Loop conditional expression

3. Code blocks that need to be repeated

4. Operation expression after loop

Simple for loop, one execution of the loop will change the value of a variable
Example: output a value from 1 to 100

for(var i=1; i <= 100; i++){
//在循环开始时设置一个变量i;//定义运行循环的条件i<=100;//每个循环执行后,变量增加1
console.log(i);
}
Copy after login

2, while loop

The while loop will repeatedly execute a piece of code until a certain condition is no longer met.

Grammar:

while(条件表达式语句){
	执行的代码块;
}
Copy after login

The while loop structure is as shown in the figure:
What are the loop structures in javascript
while execution sequence

When the return value of our conditional condition is true, the code block inside the curly braces will be executed. After the statement in the curly braces is executed, the statement in the curly braces will be repeated until the return value of the judgment condition is false to end the loop.

Case:

var i = 0;
while (i < 10){
	console.log(i);
	i++;
}
//while循环会先判定条件,再根据条件是否成立达成决定是否进入循环
//如果条件一开始就是false ,则不会进入循环
Copy after login

Disadvantages:

  • When using the while statement, be sure to write Braces

  • If there are no conditions, it will run indefinitely, causing an infinite loop.

3. Structure of do while loop

The basic principle of do while structure is basically the same as that of while structure, but it guarantees that the loop body is executed at least once. Because it executes the code first and then judges the condition
Syntax:

do {
	执行语句块;
}
while(条件表达式语句);
Copy after login

do while Execution order:

Execute the code once, Make another judgment. Unlike the while loop, do while will execute the code once regardless of the condition

Case:

var i = 0;
do{
	console.log(i);
	i++;
}while(i<10);
Copy after login

The difference between while and do while

  • while: First judge and then execute if the condition is not true, the loop body will not be executed once

  • do...while: First execute and then judge if the condition is not true, the loop body will be executed at least once

[Recommended learning: javascript advanced tutorial]

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template