我是靠谱客的博主 土豪宝贝，最近开发中收集的这篇文章主要介绍JavaScript 流程控制-循环之for 循环与双重 for 循环一、for 循环二、双重 for 循环，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
目录
一、for 循环
例1： 输出100句“你好”。
例2：求1-100之间所有整数的累加和
例3：求1-100之间所有数的平均值
例4：求学生成绩
例5：求1-100之间所有偶数和奇数的和
例6：求1-100之间所有能被3整除的数字的和
二、双重 for 循环
例1：打印 n 行 n 列的星星
例2：打印倒三角形
例3：打印九九乘法表
一、for 循环
for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。
执行过程：
1. 初始化变量，初始化操作在整个 for 循环只会执行一次。
2. 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
3. 执行操作表达式，此时第一轮结束。
4. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
5. 继续执行操作表达式，第二轮结束。
6. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。
例1： 输出100句“你好”。
<!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>Document</title>
<script>
var num = prompt("请输入循环次数！");
for (var i = 1; i <= num; i++) {
document.write(i + "、" + "你好！"+"<br/>");
}
</script>
</head>
<body></body>
</html>
例2：求1-100之间所有整数的累加和
<!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>Document</title>
<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
document.write("1~100的累加和为：" + sum);
</script>
</head>
<body></body>
</html>
例3：求1-100之间所有数的平均值
<!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>Document</title>
<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
document.write("1~100的平均值为" + sum / 100);
</script>
</head>
<body></body>
</html>
例4：求学生成绩
<!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>Document</title>
<script>
var num = prompt("请您输入班级的总人数：");
var sum = 0;
var avg = 0;
for (var i = 1; i <= num; i++) {
var score = prompt("请输入第" + i + "个学生的成绩");
sum += parseFloat(score);
}
avg = sum / num;
document.write("班级总的成绩是：" + sum + "<br/>");
document.write("班级的平均分是：" + avg);
</script>
</head>
<body></body>
</html>
例5：求1-100之间所有偶数和奇数的和
<!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>Document</title>
<script>
var ouShu = 0;
var jiShu = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
ouShu += i;
} else {
jiShu += i;
}
}
document.write("1~100之间的偶数和是:" + ouShu + "<br/>");
document.write("1~100之间的奇数和是:" + jiShu);
</script>
</head>
<body></body>
</html>
例6：求1-100之间所有能被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>Document</title>
<script>
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0) {
sum = sum + i;
}
}
document.write("1~100能被三整除的数字和为:" + sum);
</script>
</head>
<body></body>
</html>
二、双重 for 循环
双重 for 循环语法：
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}1、内层循环可以看做外层循环的语句
2、内层循环执行的顺序也要遵循 for 循环的执行顺序
3、外层循环执行一次，内层循环要执行全部次数
例1：打印 n 行 n 列的星星
<!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>Document</title>
<script>
var row = prompt("请输入您打印几行星星:");
var col = prompt("请输入您打印几列星星:");
var str = "";
for (var i = 1; i <= row; i++) {
for (j = 1; j <= col; j++) {
str += "☆";
}
str += "n";
}
console.log(str);
</script>
</head>
<body></body>
</html>
例2：打印倒三角形
<!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>Document</title>
<script>
var str = "";
for (var i = 1; i <= 10; i++) {
for (var j = i; j <= 10; j++) {
str += "★";
}
str += "n";
}
console.log(str);
</script>
</head>
<body></body>
</html>
例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>Document</title>
<script>
var str = "";
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + " × " + i + " = " + i * j + "t";
}
str += "<br/>";
}
document.write(str);
</script>
</head>
<body></body>
</html>
最后
以上就是土豪宝贝为你收集整理的JavaScript 流程控制-循环之for 循环与双重 for 循环一、for 循环二、双重 for 循环的全部内容，希望文章能够帮你解决JavaScript 流程控制-循环之for 循环与双重 for 循环一、for 循环二、双重 for 循环所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复