JavaScript-for循环

学习目标：

掌握for循环

学习内容：

for循环语法
退出循环
for循环和while循环有什么区别
for循环嵌套

`for循环`语法：

作用：重复执行代码。
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常用的循环形势。

for(变量起始值;终止条件;变量变化量){//循环体
}

代码

<title>练习-for循环</title>
</head><body><script>//1.利用for循环输出1-100岁//for (let i = 1; i <= 100; i++) {//document.write(`这个是${i}岁<br>`)// }//2.求1-100之间所有的偶数和// let sum = 0// for (let i = 1; i <= 100; i++) {//   if (i % 2 === 0) {//     // sum = sum + i//     sum += i//   }// }// document.write(`1-100之间所有的偶数和:${sum}`)//3.页面中打印5个小星星// for (let i = 1; i <= 5; i++) {//   document.write('⭐')// }//4.打印数组// let arr = ['王俊凯', '易烊千玺', '王源', '雪碧', '丸子', '妮妮']// for (let i = 0; i <= 5; i++) {//   console.log(arr[i])// }//必须从0开始，因为数组索引号从0开始  arr.length = 6//遍历数组 ： 从第一个循环到最后一个let arr = ['王俊凯', '易烊千玺', '王源', '雪碧', '丸子', '妮妮']for (let i = 0; i < arr.length; i++) {console.log(arr[i])}</script></body>

退出循环：

continue :退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue。
break：退出整个for循环，一般用于结果已经得到，后续的循环不需要的时候可以使用。
了解

while(true)来构造“无限”循环，需要使用break退出循环。
for( ; ; )也可以来构造“无限”循环，同样需要使用break退出循环。

代码

 <title>for循环-退出循环</title>
</head><body><script>// for (let i = 1; i <= 5; i++) {//   if (i === 3) {//     continue //退出本次循环，本次循环中continue 下面的语句不在执行//   }//   console.log(i)// }for (let i = 1; i <= 5; i++) {if (i === 3) {break //退出整个循环，结束循环}console.log(i)}</script></body>

`for循环`和`while循环`有什么区别：

当如果明确了循环的次数的时候推荐使用for循环。
当不明确循环的次数的时候推荐使用while循环。

`for循环`嵌套：

for(外部声明记录循环次数的变量;循环条件;变化值){for(内部声明记录循环次数的变量;循环条件;变化值){循环体}}

一个循环里再套一个循环，一般用在for循环里。
代码

<title>for循环嵌套</title>
</head><body><script>//外层循环打印 第n天for (let i = 1; i <= 3; i++) {document.write(`第${i}天<br>`)//里层循环打印  第几个单词for (let j = 1; j <= 5; j++) {document.write(`记住了第${j}个单词<br>`)}}</script></body>

练习-5行5列星星

<title>练习-for循环嵌套-5行5列星星</title>
</head><body><script>// //外层循环打印行数// for (let i = 1; i <= 5; i++) {//   //里层循环打印几个星星//   for (let j = 1; j <= 5; j++) {//     document.write('⭐')//   }//进行换行显示//   document.write('<br>')// }//升级版let row = +prompt('请输入行数:')let col = +prompt('请输入列数：')for (let i = 1; i <= row; i++) {//里层循环打印几个星星for (let j = 1; j <= col; j++) {document.write('⭐')}document.write('<br>')}</script></body>

练习-倒三角形星星

<title>练习-for循环嵌套-倒三角形星星</title>
</head><body><script>//1.外层循环控制行数for (let i = 1; i <= 5; i++) {//2.里层循环控制列数（几个星星）for (let j = 1; j <= i; j++) {document.write('⭐')}//换行document.write('<br>')}</script></body>

练习-九九乘法表

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习-for循环嵌套-九九乘法表</title><style>span {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .1);background-color: rgba(255, 192, 203, .1);text-align: center;}</style>
</head><body><script>for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`<span>${j} X ${i} = ${i * j}</span>`)}document.write('<br>')}</script></body></html>