序文
継続学習の概要出力で、今日私が共有するのは、Web フロントエンド、JS 基盤の for ループです。
forループの基本的な使い方
ループは、コードのブロックを指定された回数実行します。また、コードを繰り返し実行します。
ループを使用すると、毎回異なる値を使用して同じコードを何度も実行する場合に便利です。
メリット：文の初期値、ループ条件、変更値をまとめて書くことで一目瞭然
<!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>
操作結果:
<!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>
操作結果:
まとめ
1. for ループと while ループの違い:
ループ回数が指定されている場合は for ループ、
不明な場合は while ループを使用することをお勧めします
ループを出る
continue と Break の違い
continue: このループを終了し、次のループに続行します。
Break: ループが終了する位置でループから飛び出し、ループ全体を終了します。
<!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>
操作結果:
<!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>
操作結果:
ループの入れ子
<!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>
操作結果:
ループはループ内にネストされており、通常は for ループで使用されます。
逆三角形の星を印刷する
分析:
1. これを行うには double for ループを使用します
2. 外側のループは印刷行を制御し、内側のループは各行の印刷数 (列) を制御します 3.
内側のループの数は同じです対応する行数として
<!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>
操作結果:
要約する
最後に一文をシェアします。
人は自分が何を望んでいるのか決して分かりません、なぜなら人は一度しか生きられないからです
「存在の耐えられない軽さ」 - ミラン・クンデラ
今回の共有は以上です。！！
コメント欄にメッセージを残して議論することを歓迎します。！