foreword
In the continuous learning summary output, what I share today is the web front end, the for loop of JS foundation
Basic use of for loop
A loop executes a block of code a specified number of times. It also repeats code execution.
Using a loop is handy if you want to run the same code over and over, with different values each time.
Benefits: Write the initial value of the statement, the loop condition, and the change value together, making it clear at a glance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环语句</title>
</head>
<body>
<script>
// for (起始条件; 退出条件; 变化量) {
// 循环语句
// }
for (let i = 1; i <= 10; i++) {
document.write(`人永远都无法知道自己该要什么，因为人只能活一次 ${
i} <br>`)
}
</script>
</body>
</html>
operation result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for循环</title>
</head>
<body>
<script>
// 1. 循环的最大价值就是遍历数组
let arr = ['小超', '小云', '小飞', '小羽', '小黄', '小星']
// 利用循环的方式
document.write(arr.length)
// 2. arr.length 数组的长度 通过他可以告诉我们数组里面有几个元素
for (let i = 0; i < arr.length; i++) {
document.write(`名字 ${
i}: ${
arr[i]} <br>`)
}
</script>
</body>
</html>
operation result:
Summary
1. What is the difference between a for loop and a while loop:
when the number of loops is specified, it is recommended to use a for loop;
when the number of loops is not clear, it is recommended to use a while loop
exit loop
The difference between continue and break
continue: Exit this loop and continue to the next loop
break: Jump out of the loop where the loop ends and exit the entire loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>continue</title>
</head>
<body>
<script>
for (let i = 1; i < 6; i++) {
if (i === 2) {
continue // 1345 继续 退出本次循环，继续下一次循环
}
document.write(i)
}
</script>
</body>
</html>
operation result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break</title>
</head>
<body>
<script>
for (let i = 1; i < 6; i++) {
if (i === 2) {
break // 结束循环 退出整个循环
}
document.write(i)
}
</script>
</body>
</html>
operation result:
loop nesting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环嵌套</title>
</head>
<body>
<script>
// 循环嵌套
for (let i = 1; i < 6; i++) {
for (let j = 1; j < 6; j++) {
document.write('星辰迷上大海<br>')
}
}
// 外面循环执行一次，里面循环执行全部（5次）
</script>
</body>
</html>
operation result:
A loop is nested within a loop, which is generally used in a for loop
Print inverted triangle stars
Analysis:
1. Use double for loops to do it.
2. The outer loop controls the printing lines, and the inner loop controls how many (columns) each line prints.
3. The number of inner loops is the same as the number of rows corresponding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒三角形星星</title>
</head>
<body>
<script>
// 外层打印几行
for (let i = 1; i <= 5; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
document.write('★')
}
document.write('<br>')
}
</script>
</body>
</html>
operation result:
Summarize
Finally share a sentence:
People can never know what they want, because people can only live once
"The Unbearable Lightness of Being" - Milan Kundera
That's all for this sharing! ! !
Welcome to leave a message to discuss in the comment area! !