for循环
for循环是应用最广泛的循环形式
适用于已知循环次数,循环嵌套情况
for循环可以和while循环进行转化
两个语法,只是形式不同,作用,功能等全都完全相同
// 输出 1-100所有的偶数
var i = 2;
while(i <= 100){
console.log(`${i}是偶数`);
i += 2;
}
for( var i = 2; i <= 100 ; i += 2 ){
console.log(`${i}是偶数`);
}
for循环与while循环对比:
for循环的demo
特别注意的问题 for循环 () 中的内容顺序不能改变
for()中内容的顺序是:
for( 定义循环变量的初始值 ; 判断进入条件 ; 步长 ){
循环体
}
但是 执行顺序, 仍然是 1234 — 234 — 234
定义循环变量的初始值,判断进入条件,循环体,步长 ----
仍然是先执行循环体,再执行步长
or循环的优点之一,是将与循环变量和循环次数相关的设定,都定义在()中
设定内容更加集中,不容易造成语法形式混乱
// demo1 , 输出 1-100 所有可以被 2,5 整除的数值
// 第一个可以被2和5整除的数值是10
// 循环变量的初始值就是10
// 步长是 2,5 的最小公倍数,是10
// for( var i = 10 ; i <= 100 ; i += 10 ){
// console.log(`${i},是可以被2,5整除的数值`);
// }
// demo2 累加求和
// 我们通过 += 运算符,来实现累加求和效果
// var res = 0; 定义变量,用来存储执行结果
// res += 1; +=1,就是在原有数值基础上+1,也就是累加1
// res += 2; +=2,在执行了累加1的基础上,再累加2
// res += 3;
// res += 4;
// console.log(res); //最后输出累加结果
// 例如要计算 1-100的所有整数的和
// 思路: 1,通过循环实现1-100的所有数值
// 2,执行累加求和
// += 执行的是累加,也就是在存储的原始数值基础上,在加上新的数值
// ++ 每次只能加1,不能累加不同的额数值
// 因此,此处,使用 += 来实现效果
// 定义一个变量,来存储累加执行的结果
// 累加的初始值是0
// var res = 0;
// for(var i = 1 ; i <= 100 ; i++){
// console.log(i);
// res += i; // i 就是执行累加的数值,是从1-100循环生成的整数数值
// }
// 循环结束之后,输出累加结果 res
// console.log(res);
程序中需要注意的问题
-
res变量的定义,一定要放在for循环之外
如果将 var res = 0 的赋值语句,定义在 for循环内
每次执行 res都会重新赋值为 0 ,没法实现累加 -
console.log(),输出,在循环结束后,只要输出一次就可以了
没必要写在循环中,每次都输出// demo3, 阶乘 // 例如 5的阶乘 5! 表示的意思是 求 1*2*3*4*5 的累乘结果 // 实现思路 // 1, 通过循环 来 生成 1 至 阶乘数值 的所有整数 // 2, 实现累乘 // 定义一个变量,来存储累乘的结果 // 通过 *= 来实现累乘 // // 定义一个随机阶乘数值 5-20 var num = parseInt(Math.random()*(20+1-5) + 5); // 定义一个变量,来存储累乘结果 // 初始值要是1 var res = 1; // 循环的初始数值是 1 , 循环的最大数值是阶乘数值 也就是 num 变量 for(var i = 1 ; i <= num ; i++){ res *= i; } // 循环结束,输出结果 console.log( `${num}的阶乘结果是${res}` );
页面的打断点
在浏览器的控制台中,给我们提供了一种工具
这个工具可以直接显示JavaScript程序执行的顺序和过程
可以使用这个工具,看到for循环或者其他JavaScript程序执行的步骤
质数的判断
什么是质数:
一个数值,如果出了 1和这个数值本身,没有其他数值可以将这个数整除
那么这个数就是 质数
质数的判断:
// 例如 9 可以被 3整除 ,是 合数 不是质数
// 11 出了 1和11 没有其他数值可以将其整除 , 11就是质数
// 1和2是两个特殊的数值,不算质数也不算合数
// 判断一个随机数值,是否是质数
// 定义一个随机数 范围是 100 - 200 之间
// var num = parseInt(Math.random()*(200+1-100) + 100);
// 当前数值是 num 我们要判断 num 是否是质数
// 执行原理:
// 1,通过 for循环,生成 2 至 num -1 的所有整数
// 循环变量的初始值是2 , 判断进入循环的条件是 num -1
// 2,定义一个变量,来存储判断程序的执行结果
// 3,当循环结束时,根据存储的结果,来判断num是不是质数
// 定义一个数值,来判断这个数值是不是质数
// var num = 9; // num 中现在存储的是,固定数值 9,可以写成一个随机数的形式
// 随机数值 100-200之间
var num = parseInt(Math.random()*(200+1-100) + 100);
// 定义一个变量,来存储判断的结果
// 默认值表示这个数值是质数
// 默认值可以随便定义
var res = true;
// 循环,生成的整数是 2 至 判断数值-1 的所有整数
for(var i = 2 ; i <= num-1 ; i++){
// 执行判断
// 如果 数值9 与 循环变量 发生 整除
// 证明 有数值 可以 整除 9
// 此时就判断9 是 合数
if( num % i == 0){
// 给存储判断结果的变量,赋值新的数据,覆盖之前的默认值
res = false;
// 一旦发生整除,其他循环就可以终止了
break;
}
}
// 当循环结束了,判断 res变量中存储的是不是默认值
if(res == true){
// 如果是默认值,证明9是质数
console.log(`${num}是质数`);
}else{
// 如果不是默认值,证明9是合数
console.log(`${num}是合数`);
}
// 说明:
// 1,我们执行是否是质数,实际是执行的多次判断
// 2,如果每次判断都执行一个输出结果,会有多个结果
// 我们实际上只需要最终的执行结果,并且只输出一次
// 3,我们定义一个变量,来存储判断的结果,并且根据这个变量存储的数据,来执行输出
// 4,给这个变量,定义一个初始值,表示是质数
// 5,如果发生整除,就给变量,赋值一个新的数值,覆盖初始值,表示数值是合数了
// 6,当循环结束后,变量中,会存储一个数值
// 如果是原始值,表示数值是质数
// 如果不是原始值,表示是合数
// 根据结果来输出,数值是不是质数
break和contrnue
循环语句中的关键词
-
break 终止循环
终止当前循环break关键词之后,程序的执行,以及终止之后的循环
终止一切 -
continue 跳出循环
终止当前循环continue关键词之后,程序的执行,但是会继续之后的循环
只终止当前循环的循环体的执行,循环会继续// break demo for(var i = 1 ; i <= 10 ; i++){ if( i == 5){ break; } console.log(i); } // 没有break , 执行结果是 输出1-10的整数 // 当 i 循环至 5 , i == 5 判断那结果是true , 会执行if中的break // 首先 当前循环中 console.log(i) 是在 break 之后,不会执行 // 其次 之后应该执行的循环次数 6 7 8 9 10 也都不执行了 // 尤其 是当前循环中的步长也不会执行 i 就是 5
一般是提前结束循环,调高程序的执行效率
例如 : 质数的判断
如果一旦发生整除的情况,就可以立即判断,数值为合数
之后的循环,就是多余的循环,不用再执行了
console.log(’’)
for(var i = 1 ; i <= 10 ; i++){
if( i == 5){
continue;
}
console.log(i);
}
// 总结 :
// break : 就到 4 , 5以后都没有了
// continue : 就 少一个5, 其他都正常
// 输出 1 - 100 的 偶数
for(var i = 1 ; i <= 100 ; i++){
// 需要输出偶数,也就是如果是奇数,就跳出循环不输出
if( i % 2 != 0 ){
continue;
}
console.log(i);
}
循环的嵌套
循环的嵌套:
所谓的循环嵌套,就是 for(){} 的循环体,也包含 for循环
for(){
for(){}
}
for (var j = 1; j <= 5; j++) {
for (var i = 1; i <= 5; i++) {
console.log(`i是${i} , j是${j}`);
}
console.log('')
}
// 执行程序,先执行外层 j 的循环
// 当 j 第一次循环时 j 是 1
// 此时要执行 j 的循环体 --- 也就是 i 的循环
// i的for循环是从1-5来执行循环,然后输出内容
// id 的数值 是从1循环至5,j的数值始终是 1
// 当 i 1-5 循环结束了 执行 console.log('')
// 此时 j 的 第一次循环体完全执行完毕
// 执行 j 循环的步长 j++
// j 第二次循环 j 是 2
// 重新执行 循环体 i 从 1-5 循环 j 始终是 2
// i循环结束,执行console.log() 循环体执行结束
// j 的循环体执行结束, 执行 j 的步长 j++
// ......
// 特别注意:
// 1, 当 外层循环体 执行一次循环时 , 内层循环体 执行所有的循环
// 2, 当 内层循环执行时,外层循环数值是保持不变的
// 3, 内层循环体的循环变量,往往与外层循环变量相关联
// 也就是 i 往往与 j 有关系
// 相当于时钟的效果
// 当前 是 12:00:00
// 之后 秒针要 从 1-60 循环
// 此时 分钟是保持不变的
// 12:00:01 12:00:02 12:00:03 12:00:04....
循环的嵌套demo
输出一个由 * 星号组成的三角形
/* //输出一个由 * 星号组成的三角形
*
* *
* * *
* * * *
* * * * *
*/
// 分析 :
// 每行 : 输出 星号, 星号之后有空格 , 结束有换行
// 重复执行 : 将每行内容重复执行
/*
for(var i = 1 ; i <= 1 ; i++){
// 循环5次,每次输出一个星星和一个空格
document.write('* ');
}
// 当前行的星星和空格输出之后,再输出一个换行
document.write('<br>');
for(var i = 1 ; i <= 2 ; i++){
// 循环5次,每次输出一个星星和一个空格
document.write('* ');
}
// 当前行的星星和空格输出之后,再输出一个换行
document.write('<br>');
for(var i = 1 ; i <= 3 ; i++){
// 循环5次,每次输出一个星星和一个空格
document.write('* ');
}
// 当前行的星星和空格输出之后,再输出一个换行
document.write('<br>');
for(var i = 1 ; i <= 4 ; i++){
// 循环5次,每次输出一个星星和一个空格
document.write('* ');
}
// 当前行的星星和空格输出之后,再输出一个换行
document.write('<br>');
for(var i = 1 ; i <= 5 ; i++){
// 循环5次,每次输出一个星星和一个空格
document.write('* ');
}
// 当前行的星星和空格输出之后,再输出一个换行
document.write('<br>');
*/
// 定义一个变量,是随机的总函数 5-15行
var line = parseInt(Math.random()*( 15+1-5 ) + 5);
console.log(line);
// 一行内容,循环的次数,也就是行数
// j 是 从 1 至 5 的循环
for (var j = 1; j <= line; j++) {
// 一行内容 , 星星 空格 一行结束 有换行
// j 是从1至5 变化的
// 当第一次 j 循环 j 是 1, i 就是 <= 1 , i 循环 执行 1 次
// 当第二次 j 循环 j 是 2, i 就是 <= 2 , i 循环 执行 2 次
// 当第五次 j 循环 j 是 5, i 就是 <= 5 , i 循环 执行 5 次
// 总结 : i 的循环次数 与 j 的数值 是相关联的
for (var i = 1; i <= j; i++) {
document.write('* ');
}
document.write('<br>');
}
// 总结步骤
// 1,先定义最多一行输出内容的程序 -- 内层循环
// 2,再定义变量,生成行数 -- 外层循环
// 3,判断行数,与当前行,循环次数的关系
99乘法表
// 外层循环,生成的是9行的行数
// 也就是将一行内容,循环执行9次
for (var j = 1; j <= 9; j++) {
// 一行的内容,循环输出,乘法公式
// 乘法公式的第一个数值是内层循环变量,第二个数值是外层循环变量
for (var i = 1; i <= j; i++) {
document.write(`${i}*${j}=${i * j} `);
}
// 每行结束之后,有一个换行
document.write('<br>');
}
// 总结
// 1,先写内容最多的一行 --- 内层循环
// 2,定义行数 --- 外层循环
// 3,将两个循环套一起
// 4,将内层循环中,所有与外层循环变量相关的数值,做替换
div{
background: #CCE8CF;
padding: 30px;
}
span{
border: 1px solid blue;
display: inline-block;
text-align: center;
width: 100px;
line-height: 50px;
margin: 10px;
background: #fff;
color: blue;
}
do…while
do…while
是while语句的一种特殊语法形式
作用就是确保,循环可以至少执行一次
实际项目中,基本不用
// 当前情况下,i的数值,不满足执行循环条件
// 循环不会执行
var i = 0;
while(i > 10){
console.log('我执行了');
i++;
}
console.log('')
// do...while 会确保循环至少执行一次,即时不符合条件
var i = 0;
do{
console.log('我执行了');
i++;
}while(i > 10)
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
