while 循环语法:
while(循环条件){
要重复执行的代码(循环体)
}
执行流程
1.先判断循环条件
1.1 如果条件成立,则执行循环体代码
1.2 如果条件不成立,则结束循环语句
2.重复步骤1
循环需要具备三要素:
1.循环变量
2.循环条件(没有终止条件,循环会一直执行,造成死循环)
3.循环变量自增(用自增或者自减)
let i = 1 <!--循环变量-->
while ( i <= 3 ) { <!--循环条件-->
document.write('我会循环三次') <br>
i++ <!--循环变量自增-->
}
循环条件可以是如下代码:
1.关系表达式:结果一定是布尔类型
2.布尔类型值
3.其他数据:编译器会默认转成布尔类型判断是否成立
for循环
在介绍for循环之前 我们先了解了解 for循环和while循环有什么区别呢:
当如果明确了循环的次数的时候推荐使用for循环
for循环场景: 循环次数确定
当不明确循环的次数的时候推荐使用while循环
while循环场景:循环次数不确定
for循环语法:
for ( 语句1 , 语句2 ,语句3 ){
循环体
}
执行规则
1.执行语句1(声明循环变量)
2.判断语句2结果是否为true(循环条件)
2.1 true : 则执行循环体
2.1.1 : 执行语句3(循环变量自增)
2.2 false:循环结束
3.重复步骤2
退出循环:
循环结束: continue:结束本次循环体,继续下次循环
break:结束整个循环语句,跳出所在的循环(使用最多)
注意点: continue:只能用于循环语句 break:可以用于结束循环语句 + switch-case分支语句
for 循环嵌套:
for ( 外部声明记录循环次数的变量; 循环条件; 变化值 ){
for ( 内部声明记录循环次数的变量; 循环条件;变化值 ){
循环体
}
}
例如九九乘法表就是for循环嵌套:
<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>Document</title>
<style>
/* 此处是盒子的样式 */
div {
display: inline-block;
width: 100px;
border: 2px solid skyblue;
margin: 2px;
text-align: center;
}
</style>
</head>
<body>
<script>
// for循环
for (let i = 1; i <= 9; i++) {
for (let f = 1; f <= i; f++) {
document.write(`<div >${f} X ${i} = ${f * i}</div>`)
}
document.write(`<br>`)
}
</script>
</body>
再举个三角形的小爱心的栗子:
<script>
// 思路:外层每一行 ,跟内层里面小星星的个数是一样的,所以内层小星星可以等于外层的循环数(第五行里面有五个小星星)
for (let i = 1; i <= 10; i++) {
for (let j = 1; j <= i; j++) {
document.write("♥")
}
document.write("<br>")
}
for (let i = 1; i <= 10; i++) {
for (let j = i; j <= 10; j++) {
document.write("♥")
}
document.write("<br>")
}
</script>