循环
1.for循环
for循环的作用是重复执行一段程序,能够解决大量的类似语句书写。
从一个例子了解循环语句的功能
题目: 在控制台逐行输出1 ， 2 ， 3 ， 4 …10
<script>
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);
</script>
可以使用for循环简化程序
<script>
for (let i = 0; i <= 10; i++) {
console.log(i);
}
//for在英语中没有特别的含义，其名称来源于1950年代的早期汇编语言，现在几乎世界上所有编程语言中都用for表示循环语句。
</script>
for语句的语法
for的圆括号有三个表达式 ,分号分隔 ,书写需要注意, 最后一个表达式没有分号.
定义-循环条件-更新变量
<script>
for (let i = 0; i <= 10; i++) {
console.log(i);
}
//表达式let i = 1; 表示定义一个"循环变量" i , 并赋值为1; i是iterator 里面还要使用循环则需要j k
//表达式i <= 10;表示继续执行循环的条件，只要这个条件为真，则会一直执行;
//表达式i++用来更新循环变量，使循环变量的值越来越趋向终点。
</script>
语法
首先会执行语句①，然后判断语句②是否满足，如果满足则进入循环体，执行语句③，如果不满足进入循环体则退出循环
for( 语句1(初始化表达式) ; 语句2(条件) ; 语句4(递增表达式) ){
//语句3 循环体代码
//语句3 循环体代码
//语句3 循环体代码
//……
}
for (let i = 0;① i <= 10;② i++④) {
console.log(i);③
}
//首先会执行语句①，然后判断语句②是否满足，如果满足则进入循环体，执行语句③，如果不满足进入循环体则退出循环
//语句体中的语句执行完毕后，执行语句④
//再次判断语句②是否满足，如果满足则再次判断语句②是否满足，如果满足进入循环体，执行语句③，如果不满足则退出循环
//执行顺序： 1只执行一次
//1 -> 2 -> 3 -> 4 -> 2 -> 3 -> 4 -> 2 ->3 ->4 -> …… 2
初始化表达式（initialize）：确定循环变量的初始值，只在循环
开始时执行一次。条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，
只有值为真，才继续进行循环。递增表达式（increment）：每轮循环的最后一个操作，通常用来
递增循环变量。
例子1
循环打印1到100到页面之上
<script>
for(let i = 1;i <= 100; i++){
document.write(i + "<br>"); // 1 2 3 100
}
</script>
例子2
<script>
for(let i = 3; i <= 13; i += 3){
console.log(i); //3 6 9 12
}
</script>
例子3
<script>
for (let i = 15; i > 2; i -= 3) {
console.log(i); // 15 12 9 6 3
}
</script>
例子3
<script>
for(let i = 2; i < 12; i += 3) {
i += 4; //这里面 i+=4 也在改变i的值
console.log(i);//6 13
}
</script>
例子4
<script>
for (var i = 1; i < 10; i++){
}
console.log(i);//10
</script>
例子5
<script>
for (let i = 1; i < 10; i--){
console.log(i);
}
//i永远满足 造成死循环
</script>
例子6
<script>
for (let i = 10; i < 4; i--){
console.log(i);//无
}
</script>
小练习
请使用for循环语句在控制台逐行输出18 ， 14 ， 10 ， 6 ， -2 ， -6
<script>
for (let i =18; i >= -6; i-=4){
console.log(i);
}
</script>
小练习
请使用for循环语句在控制台逐行输出0 ， 0.2 ， 0.4 ， 0.6 ， 0.8 ， 1
<script>
for (let i =0; i <= 1; i+=0.2){
console.log(i);
}
//会出现小数精度问题
for (let i =0; i <= 1; i+=0.2){
console.log(Number(i.toFixed(1)));
}
</script>
小练习
输出99 97 95 …3 1
for(let m= 99; m >= 1; m -= 2){
console.log(m); // 99 97 .... 3 1
}
最常用的写法
<script>
for(let i =0; i< 10; i++){
console.log(i);
}
</script>
for语句的三个部分（initialize、test、increment），可以省略任何一个，也可以全部省略。
for ( ; ; ){
console.log('Hello World');
}
//上面代码省略了for语句表达式的三个部分，结果就导致了一个无限循环。
//如果不想无限循环
let i = 0
for (; i < 10;) {
console.log(i);
i++
}
for in循环
for…in循环用来
遍历一个对象的全部属性。
let obj = {a: 1, b: 2, c: 3};
for (let i in obj) {
console.log('键名：' , i);
console.log('键值：' , obj[i]);
}
// 键名： a
// 键值： 1
// 键名： b
// 键值： 2
// 键名： c
// 键值： 3
//它遍历的是对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。
//它不仅遍历对象自身的属性，还遍历继承的属性
比如对象都继承了toString属性，但是for...in循环不会遍历到这个属性。
let obj = {};
// toString 属性是存在的
obj.toString // toString() { [native code] }
for (let p in obj) {
console.log(p);
} // 没有任何输出
// 对象obj继承了toString属性，该属性不会被for...in循环遍历到，因为它默认是“不可遍历”的
// 如果继承的属性是可遍历的，那么就会被for...in循环遍历到。
一般情况下，都是只想遍历对象自身的属性
使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。
let obj = {a: 1, b: 2, c: 3};
Object.prototype.age = 18;
for (let i in obj) {
if (obj.hasOwnProperty(i)) {
console.log("键名：", i);
console.log("键值：", obj[i]);
}
}
for循环嵌套
当循环与循环发生嵌套时遵循下列规则:
1.
外层为假时内层不执行; 2.先执行外层再执行内层,直至内层的条件为假时再返回外层去执行。
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 5; j++) {
console.log("i的值是" + i , "J的值是" + j);
}
}
for循环算法题1
计算1+2+3…+99+100的和
<script>
// 创建累加器
let sum = 0;
//遍历到1到100的每一个数字,每遍历到一个数字就把这个数字加到sum中去
for(let i = 1; i <= 100; i++){
sum += i;
}
console.log(sum);
//注意累加器sum不能写到循环里面 可以定义在for循环第一条表达式
//循环开始的时候定义sum sum就是累加器 初始值是0
// 遍历到1到100的每一个数字,每遍历到一个数字就把这个数字加到sum中去
for(let i = 1 , sum = 0; i <= 100; i++){
sum += i;
}
console.log(sum);
</script>
for循环算法题2
请问1~100中哪个数字除以3余1，除以4余2，除以5余3
可以使用穷举法 从1到100依次测试数字是否满足条件
<script>
for(let i = 1; i <= 100; i++){
if(i % 3 == 1 && i % 4 == 2 && i % 5 == 3){
console.log(i);
}
}
</script>
2.while循环语句
while语句也是一种循环结构，是一种“
不定范围”循环,和for循环各有不同的用武之地几乎所有的编程语言，都同时提供for循环和while循环
while语句事先不指定循环开始、结束的范围，只要测试条件满足，就一直执行循环体
语法：
while (测试条件){
需要执行的代码;
}
// 或者
while (测试条件) 需要执行的代码;;
//如果只有一条语句，可以省略大括号，否则就必须加上大括号。
while循环注意事项
while循环没有显式定义循环变量，必须自己在while循环
外先定义好循环变量，有时甚至可以没有循环变量。循环体内的语句，必须使循环测试条件趋向不成立，否则会死循环
用while实现之前的案例
输出到页面上1、2、3、4…100
<script>
let i = 1;
// while循环 while是"当"的意思
while (i <= 100) {
document.write(i + "<br>");
i++; //i=i+1
}
</script>
累加1+2+3+4+…100
<script>
//累加器
let sum = 0;
//循环变量
let i = 1;
while(i <= 100){
sum += i;
i++;
}
console.log(sum);
</script>
for与while的用法区别
for 适合已知
循环次数的循环体
更适合while循环的场景
寻找最小的满足n2>456789的整数n
<script>
// 寻找满足n的平方大于456789的最小整数
// 穷举法
let n = 1;
while(n * n <= 456789){
n ++;
}
console.log(n);
</script>
小兔子拔萝卜，第1天拔1个，第2天拔2个，第3天拔3个，以此类推。请问小兔子多少天能把500个萝卜拔光?
<script>
//天的序号 也就是这一天拔的萝卜数
let n = 1;
// 累加器
let sum = 0;
while(sum < 500){
sum += n;
n++;
}
//一定要注意这里会有一个"出一错误".
console.log(n); //33
// (1+33)*33/2 = 561
// (1+32)*32/2 = 528
// (1+31)*31/2 = 496
//针对"出一错误"我们要这样
console.log(n-1);
</script>
验证输入的密码
<script>
let pwd = Number(prompt("请输入你的密码"));
while (pwd != 123456) {
pwd = prompt("请正确输入你的密码");
}
while (pwd == 123456) {
pwd = prompt("请再次输入你的密码");
if (pwd != 123456) {
alert("两次输入密码不一致，验证不成功");
break;
} else if (pwd == 123456) {
alert("两次输入密码一致，验证成功");
break;
}
}
</script>
3.break 语句和 continue 语句
break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。
break语句
break表示
立即终止循环，它只能用在循环语句中，在for循环和while循环中都可以使用
例子1
<script>
let i = 0;
while(i < 100) {
console.log('i 当前为：' + i);
i++;
if (i === 10) break;
}
</script>
例子2
for循环也可以使用break语句跳出循环
<script>
for (let i = 0; i < 10; i++) {
if (i === 3){
break;
}
console.log(i);
}
</script>
break用在while语句中，通常和while(true){}搭配使用
<script>
let n = 1;
while (true) {
if (n * n > 456789) {
console.log(n);
break;
}
n++;
}
</script>
continue语句
continue :结束本次循环迭代,继续开始下一次循环迭代。for循环更经常使用continue
例子1
<script>
for (let i = 0; i < 10; i++) {
if (i == 3) {
continue;
}
console.log(i);
}
</script>
例子2
<script>
let i = 0;
while (i < 100) {
i++;
if (i % 2 == 0) {
continue;
}
console.log("i 当前为：" + i);
}
</script>
小练习1
<script>
let num = 0;
for (let i = 1; i < 10; i++) {
// 如果i是5的倍数，退出
if (i % 5 === 0) {
break;
}
num++; // i=1,num=1;i=2,num=2;i=3,num=3,i=4,num=4
}
console.log(num); //4 循环了四次
如果改编成continue 为8
</script>
小练习2
打印所有0-50之间除20和30之外的5的倍数
<script>
for(let i = 0; i <= 50; i++){
if(i == 20 || i == 30){
continue;
}
console.log(i);
}
</script>
小练习3
打印所有0-100（包含100）之间除了22，44，66以及88之外的偶数，并求他们的和。
<script>
let sum = 0;
for (let i = 0; i <= 100; i += 2) {
if (i == 22 || i == 44 || i == 66 || i == 88) {
continue;
}
sum += i;
console.log(i);
}
console.log(sum);
</script>
小练习4
打印 0 - 10（除了5之外） 所有数字的和
<script>
let num = 0;
for (let i = 1; i <= 10; i++) {
if (i % 5 === 0) {
continue
}
num += i; //i1 num1 i2 num3 i3 num6 i4 num10 i6 num16 i7 num23 i8 31 i9 num40
}
console.log(num); //40
//如果改成break则是10
</script>
可以使得无限循环的语句跳出
<script>
for(let i=0 ; true ; i++){
if(i === 20){
break;
}
console.log(i);
}
</script>
注意
如果存在多重循环，不带参数的
break语句和continue语句都只针对最内层循环。
4.do…while 循环
do while循环是一种“
后测试循环语句”。它不同于for循环和while循环每次都是“先测试条件是否满足，然后执行循环体”
do-while循环是“先执行循环体，然后测试条件是否满足”。
语法
<script>
do{
循环体
}while(循环执行条件)
//do-while循环 将循环执行条件写到了循环体的后面.
// 这样一来,循环体一定会至少执行一次，然后再检测循环执行条件是否为true,决定是否继续执行循环体.
</script>
例子1
<script>
do{
console.log("★");
}while(false);
</script>
例子2
输出1 - 100
<script>
let n = 1;
do {
console.log(n);
n++;
} while (n <= 100);
//实际上不是很常用 do while擅长的
</script>
取整函数
专门用于把数字转换成整数。
console.log(parseInt(3.14)); //3
// 等同于
console.log(parseInt("3.14")); // 3
随机数函数
先学习随机数函数 ， 得到 大于等于 0 小于 1 的一个随机数。
Math.random();
得到[a，b]区间的整数，公式:
parseInt(Math.random() * (b - a + 1)) + a;
如果我们想得到5 - 12 之间的整数
console.log( parseInt(Math.random()*8) + 5);
do while小案例
请编写程序，随机生成两个变量dx和dy，它们均在[-4,4]区间随机取值，但要求dx和dy不能同时为0
<script>
//随机两个变量 dx 和 dy 它们都在 [-4 , 4]之间随机取值 但是不能都为0
let dx, dy;
do {
dx = parseInt(Math.random() * 9) - 4;
dy = parseInt(Math.random() * 9) - 4;
} while (dx == 0 && dy == 0); //验收
//出循环保证dx dy不都是0
console.log(dx, dy);
//如果写成while循环
let dx = parseInt(Math.random() * 9) - 4;
let dy = parseInt(Math.random() * 9) - 4;
//当dx dy都为0 则进入循环
while (dx == 0 && dy == 0){
dx = parseInt(Math.random() * 9) - 4;
dy = parseInt(Math.random() * 9) - 4;
}
console.log(dx, dy);
</script>
while算法题
<script>
// 随机一个数字 , 2 ~ 99之间
let answer = parseInt(Math.random() * 98) + 2;
// 为了能够不断重复的执行询问 , 此时就必须使用死循环
while(true){
// 询问用户猜测的数字
let n = Number(prompt("请猜测数字 1 ~ 100"));
//判断用户输入的数字和answer的关系
if(n > answer){
alert("你输入的数字太大了");
}else if(n < answer){
alert("你输入的数字太小了")
}else{
alert("猜对了！")
}
}
</script>
**改进增加提示 **
<script>
// 随机一个数字 , 2 ~ 99之间
let answer = parseInt(Math.random() * 98) + 2;
//此时范围的最小值和最大值 这个数值是用来提示用户的
let min = 1;
let max = 100;
// 为了能够不断重复的执行询问 , 此时就必须使用死循环
while(true){
// 询问用户猜测的数字
let n = Number(prompt("请猜测数字"+ min+ "~" + max));
//判断用户输入的数字和answer的关系
if(n > answer){
alert("你输入的数字太大了");
//因为用户输入的数字较大，所以可以让此时的最大范围数字变为用户输入的值
max = n;
}else if(n < answer){
alert("你输入的数字太小了")
//因为用户输入的数字较小，所以可以让此时的最小范围数字变为用户输入的值
min = n;
}else{
alert("猜对了！");
//结束循环
break;
}
}
</script>
验证用户输入的数字是否在区间内
<script>
// 随机一个数字 , 2 ~ 99之间
let answer = parseInt(Math.random() * 98) + 2;
//此时范围的最小值和最大值 这个数值是用来提示用户的
let min = 1;
let max = 100;
// 为了能够不断重复的执行询问 , 此时就必须使用死循环
while(true){
// 询问用户猜测的数字
let n = Number(prompt("请猜测数字"+ min+ "~" + max));
// 验证用户输入的数字是否在范围内
if(n <= min || n >=max){
alert("你输入的数字不在范围内");
//不在区间内,直接放弃本轮循环,开启下一轮迭代.
continue;
}
//判断用户输入的数字和answer的关系
if(n > answer){
alert("你输入的数字太大了");
//因为用户输入的数字较大，所以可以让此时的最大范围数字变为用户输入的值
max = n;
}else if(n < answer){
alert("你输入的数字太小了")
//因为用户输入的数字较小，所以可以让此时的最小范围数字变为用户输入的值
min = n;
}else{
alert("猜对了！");
//结束循环
break;
}
}
</script>
如果使用do while循环
<script>
// 随机一个数字 , 2 ~ 99之间
let answer = parseInt(Math.random() * 98) + 2;
//此时范围的最小值和最大值 这个数值是用来提示用户的
let min = 1;
let max = 100;
// 为了能够不断重复的执行询问 , 此时就必须使用死循环
do{
// 询问用户猜测的数字
var n = Number(prompt("请猜测数字"+ min+ "~" + max));
// 验证用户输入的数字是否在范围内
if(n <= min || n >=max){
alert("你输入的数字不在范围内");
//不在区间内,直接放弃本轮循环,开启下一轮迭代.
continue;
}
//判断用户输入的数字和answer的关系
if(n > answer){
alert("你输入的数字太大了");
//因为用户输入的数字较大，所以可以让此时的最大范围数字变为用户输入的值
max = n;
}else if(n < answer){
alert("你输入的数字太小了")
//因为用户输入的数字较小，所以可以让此时的最小范围数字变为用户输入的值
min = n;
}
}while(n != answer);
//出了do while循环 就说明n 和 answer相等了 因为只有相等了 才能出循环
alert("恭喜猜对了！")
</script>
5.标签（label）
JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。
语法
label:
语句
//标签label的命名可以是任意标识符 但不能是保留字 语句可以是任意语句
标签通常与break语句和continue语句配合使用，跳出特定的循环。
top:
for (let i = 0; i < 3; i++){
for (let j = 0; j < 3; j++){
if (i === 1 && j === 1) break top;
console.log('i=' + i + ', j=' + j);
}
}
//上面是双重循环 break命令后面加上了top标签 top不用加引号
//满足条件时，直接跳出双层循环 如果break后面不使用标签 只能跳出内层循环 进入下一次的外层循环
continue语句也可以与标签配合使用。
top:
for (let i = 0; i < 3; i++){
for (let j = 0; j < 3; j++){
if (i === 1 && j === 1) continue top;
console.log('i=' + i + ', j=' + j);
}
}
//continue命令后面有一个标签名，
//满足条件时，会跳过当前循环，直接进入下一轮外层循环。
//如果continue语句后面不使用标签，则只能进入下一轮的内层循环。
小案例
循环打印10000个p
<body>
<div id="wrap"></div>
<script>
let oWrap = document.getElementById("wrap");
for (let i = 0; i < 10000; i++) {
oWrap.innerHTML += "<p>" + i + "</p>";
}
</script>
</body>
DOM循环操作要谨慎
<body>
<div id="wrap"></div>
<script>
let x = "";
let oWrap = document.getElementById("wrap");
for (let i = 0; i < 10000; i++) {
x += "<p>" + i + "</p>"; //字符串拼接
}
oWrap.innerHTML = x; //最后一步将拼接好的字符串赋值给oWrap.innerHTML
</script>
</body>
小案例
点击生成十个div
<style>
#wrap div {
float: left;
width: 30px;
height: 30px;
margin: 10px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<div id="wrap"></div>
<script>
let oWrap = document.getElementById("wrap"),
oBtn = document.getElementById("btn");
let x = "";
oBtn.onclick = function () {
for (let i = 0; i < 10; i++) {
x += "<div></div>";
}
oWrap.innerHTML = x;
};
</script>
</body>
扫一扫
7436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
