Detailed explanation of Javascript basics loop

Detailed explanation of Javascript basics loop

cycle

for

A loop is a command in any language that is used to execute a section of code repeatedly.

For example, to loop a code block 5 times:

for (let i = 0; i < 5; i++) {
  let text = `The current number is ${i}`
  console.log(text)
}

// Output:
The current number is 0
The current number is 1
The current number is 2
The current number is 3
The current number is 4

In this example, let i = 0 declares the loop counter variable, i < 5 is the loop termination condition, i++ is the counter variable update step, and all the code within {} is the code block within the loop body.

The specific process is: the counting variable performs the termination condition judgment operation. If the result is true, the loop body is executed, and after the end, the step length is updated to obtain a new result and participate in the judgment again; if the result is false, the loop is terminated immediately;

Therefore, if you want to control the number of loops, you can usually change the judgment condition to achieve it. If the loop condition is always true, it is an infinite loop.

for-in

The for-in loop is a special loop that can be used to loop over an object or an array (usually an array, using for-of).

let o = {
  name: 'dapiaoliang',
  age: 18,
  sex: 'woman'
}

// Loop through all key-value pairs in the object. You can use for-in at this time.
for (let key in o) {
  let text = `Current property name: ${key}, value: ${o[key]}`
}

// Result (the output order of this loop may be different, but the number remains the same)
Current attribute name: name, value: dapiaoliang
Current attribute name: age, value: 18
Current attribute name: sex, value: woman

It can be seen that for-in is used to loop all the key-value pairs in the object. The specific output order may change, but each key-value pair will be looped once.

for-of

for-of is a loop command specifically used to loop arrays or array-like structures (Iterator interface)

let arr = ["dapiaoliang", 18, 'woman']

for (let value of arr) {
  let text = `The current value is: ${value}`
  console.log(text)
}

// The current value of the result is: dapiaoliang
Current value is: 18
Current value: woman

Similar to for-in, you can directly loop each item of the array

while

while is a variation of for. (not commonly used)

while (condition) {
	Loop Body}

When the condition is true, the loop body will be executed. This loop has no count variable and does not need to update the step size. Therefore, the condition usually needs to be a variable parameter. If it is not a variable parameter, there needs to be a clear termination condition in the loop body.

do-while

do-while is a special while loop (not commonly used)

do {
  Loop body}while(condition)

The current number is 0
The current number is 1
The current number is 2
The current number is 4

It seems that the while condition and loop body are swapped. Therefore, this loop body will be executed without judging the condition for the first time. After the execution is completed, the judgment will be made again, and the judgment result will determine whether it will loop next time.

Therefore, the condition of do-while is to determine whether to loop next time, and the first time will always be executed, so it can be understood as a while loop that is executed at least once.

Break out of the loop

If you need to jump out of the loop within the code block for some reason, you can use the corresponding keyword.

break is used to permanently terminate this loop, and continue is used to terminate the current loop (enter the next one immediately)

For example, skip i = 3

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue
  }
  let text = `The current number is ${i}`
  console.log(text)
}

In the above example, when i=3, the loop body is judged as true and continue is executed. Then the next two lines of code will not be executed and the next loop will be entered immediately.

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break
  }
  let text = `The current number is ${i}`
  console.log(text)
}

The current number is 0
The current number is 1
The current number is 2

At this time, it is judged that there is a break. Then when i=3, break is executed, and all subsequent loops will not be executed. Break will close the entire loop.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • How to use async and await correctly in JS loops
  • Four data type judgment methods in JS
  • About the difference between js typeof and instanceof in judging data types and their development and use
  • An example of elegant writing of judgment in JavaScript
  • How to convert a string into a number in JavaScript
  • parseInt parseFloat js string conversion number
  • JavaScript common statements loop, judgment, string to number

<<:  CSS border adds four corners implementation code

>>:  Appreciation of the low-key and elegant web design in black, white and gray

Recommend

CSS3 property line-clamp controls the use of text lines

Description: Limit the number of lines of text di...

Detailed process of building mysql5.7.29 on centos7 of linux

1. Download MySQL 1.1 Download address https://do...

Solution to Nginx SSL certificate configuration error

1. Introduction When a web project is published o...

Alpine Docker image font problem solving operations

1. Run fonts, open the font folder, and find the ...

MySQL Full-text Indexing Guide

Full-text indexing requires special query syntax....

Detailed explanation of how MySQL solves phantom reads

1. What is phantom reading? In a transaction, aft...

The meaning and calculation method of QPS and TPS of MySQL database

When doing DB benchmark testing, qps and tps are ...

Design Story: The Security Guard Who Can't Remember License Plates

<br />In order to manage the vehicles enteri...

Disabled values ​​that cannot be entered cannot be passed to the action layer

If I want to make the form non-input-capable, I se...

43 Web Design Mistakes Web Designers Should Watch Out For

This is an article about website usability. The a...

Docker container introduction

1. Overview 1.1 Basic concepts: Docker is an open...

A brief discussion on the maximum number of open files for MySQL system users

What you learn from books is always shallow, and ...

JavaScript event loop case study

Event loop in js Because JavaScript is single-thr...