//1 there are three types of loops in JS
for loop while loop do while Loop
1 for loop
Repeated execution of some code, usually related to counting
1.1 grammatical structure
//for (initialization variable; condition expression; operation expression){
//Circulatory body
// }
//Initialization variable is a common variable declared with var
//Conditional expression: determines whether to continue the execution of each cycle and terminate the condition
//Operation expression: the code executed at the end of each loop, which is used for variable update (increment or decrement)
1.2 breakpoint commissioning
Observe the operation process
//Press F12 -- "sources -- > in the browser to find the file to be debugged -- set a breakpoint on a line of the program
//Watch: monitoring, which can monitor the change of variable value. It is very common.
//F11: execute the program step by step, let the program run line by line, and observe the change of watch value.
//Code debugging is very important to solve bugs
The 2 for loop executes the same code
<script>
for (var i = 1; i <= 5; i++) {
console.log('Consumption cannot be less');
}
</script>2.1 controllability
You can let the user control the number of outputs
<script>
var num = prompt('Please enter the number of times you want to output:');
for (var i = 1; i <= num; i++) {
console.log('2022,Work together!');
}
</script>The 3 for loop can execute different code
/ / due to the existence of calculator i, the loop value of i changes every time i is executed
<script>
for (var i = 1; i <= 5; i++) {
console.log('Xiaofei this year' + i + 'Years old');
}
</script>4. Expand application
<script>
for (var i = 1; i <= 80; i++) {
if (i == 1) {
console.log('One year old, born!');
} else if (i == 80) {
console.log('He's eighty years old. He's dead!');
} else {
console.log('this year' + i + 'Years old!');
}
}
</script>The 5 for loop can repeat some of the same operations
/ / requirement: find the cumulative sum of all integers between 1 and 100
<script>
var sum = 0; // You need a variable sum to store the results
for (var i = 1; i <= 100; i++) { // 100 cycles are required
sum = sum + i; // Core algorithm: sum = sum + i
}
console.log(sum); // Output results
</script>Case title of for loop
//1 find the average of all numbers between 1 and 100
<script>
var average = 0;
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum = sum + i;
average = sum / 100;
}
console.log(average);
</script>/ / 2 sum all even and odd numbers between 1-100
<script>
var doubles = 0;
var singles = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
doubles = doubles + i;
} else {
singles = singles + i;
}
}
console.log('1-100 The sum of all even numbers is' + doubles + '');
console.log('1-100 The sum of all odd numbers is' + singles + '');
</script>//3 find the sum of all numbers between 1 and 100 that can be divided by 3
<script>
var sum = 0;
for (i = 1; i <= 100; i++) {
if (i % 3 == 0) {
sum = sum + i;
}
}
console.log('1-100 The sum of numbers that can be 3 integers is:' + sum + '');
</script>//4 cases of seeking students' grades
/ / requirement: after the user enters the class number, the corresponding number pop-up box will pop up, and finally print the total score and average score of the class
<script>
var sum = 0; // Summation variable
average = 0; // Average variable
var num = prompt('Please enter the number of students in your class:'); // Enter the total number of people in the class in the pop-up box
for (i = 1; i <= num; i++) { // for loop, the pop-up times are consistent with the total number of students in the class
var score = prompt('Please enter page' + i + 'A student's grade');
sum = sum + parseFloat(score); // Total score
// Since the value obtained from prompt is character type, it needs to be converted to numeric type
}
average = sum / num; // Average score
alert('What is the average grade of your class' + average);
alert('What is the total score of your class' + sum);
</script>
</script>6. Expand the application of for loop
for loop prints a line of five stars
<script>
var str = '';
for (var i = 1; i <= 5; i++) {
str = str + '*'; // One more star for each cycle
}
console.log(str);
</script>Let the user decide how many stars in a row
<script>
var num = prompt('Please enter the number of stars:');
var str = '';
for (var i = 1; i <= num; i++) {
str = str + '*'; // One more star for each cycle
}
console.log(str);
</script>7 double for loop (loop nesting)
/ / define the syntax structure of a loop statement in a loop statement, which is called a double for loop
7.1 grammatical structure
/ / for (initialization variable of outer layer; conditional expression of outer layer; operation expression of outer layer){
/ / for (initialization variable of the inner layer; conditional expression of the inner layer; operation expression of the inner layer){
/ / executed statements;
// }
// }
7.2 precautions:
/ / the inner loop can be regarded as the execution statement of the outer loop
/ / the outer loop executes once, and the inner loop executes all
7.3 code verification
<script>
for (var i = 1; i <= 3; i++) {
console.log('This is the second phase of the outer cycle' + i + 'second');
for (var j = 1; j <= 3; j++) {
console.log('This is the second stage of the inner cycle' + j + 'second');
}
}
</script>7.4 print five lines and five columns
/ / core: the outer layer is responsible for printing five lines, and the inner layer is responsible for one line and five lines
<script>
var str = '';
for (i = 1; i <= 5; i++) {
for (var j = 1; j <= 5; j++) {
str = str + '*';
}
// If one line is printed, start another line
str = str + '\n';
}
console.log(str);
</script>7.5 expand printing n rows and N columns
<script>
var num1 = prompt('Please enter the number of lines you want to print');
var num2 = prompt('Please enter how many columns of stars you want to print');
var str = ''
for (i = 1; i <= num1; i++) {
for (j = 1; j <= num2; j++) {
str = str + '*';
}
str = str + '\n';
}
console.log(str);
</script>8 printing triangles
8.1 printing inverted triangle cases
<script>
for (var i = 1; i <= 10; i++) { // Outer loop control rows
for (var j = 1; j <= 10 - i; j++) { // The number of each line printed in the inner layer is different, j=i
for (var j = i; j <= 10; j++) // The second algorithm expression
str = str + '*';
}
str = str + '\n';
}
console.log(str);
</script>8.2 printing regular triangle cases
<script>
var str = '';
for (var i = 1; i <= 10; i++) { // Outer loop control rows
for (var j = 1; j <= i; j++) { // The number of each line printed in the inner layer is different, j =10-i
// For (VaR J = 10 - I; J < = 10; j + +) the second algorithm
str = str + '*';
}
str = str + '\n';
}
console.log(str);
</script><script>
var str = '';
for (i = 1; i <= 9; i++) { // The loop of the outer layer controls the number of lines i, loops nine times and prints nine lines
for (j = 1; j <= i; j++) { // Circulation control of inner layer number of American Airlines J < = I
// 1 × 2 = 2
str += j + '×' + i + '=' + i * j + ' \t '; // Write the algorithm according to the multiplication table
}
str = str + '\n'; // Each line needs to be wrapped when printing
}
console.log(str);
</script>