08-循环
晴空闲云 505 1

本节目标

  1. 掌握js中5种循环方式:while、do while、for、for in、for of。
  2. 掌握js中break和continue的应用时机。
  3. 掌握数组、字符串和对象的遍历方法。

内容摘要

本篇介绍了js中循环5种循环方式:while、do while、for、for in、for of,循环控制关键词 break 和 continue。

阅读时间20~30分钟。

循环简介

有时我们会重复做一件事,或者说重复运行一段代码,这时候就可以用循环来处理了。在js中有5中循环:

while
do while
for
for in
for of

网上有的文章还有forEach、map、filter等方法,这些是数组对象的方法,个人倾向不能是严格的js循环的语法。

while

语法结构:

while (条件) {
    循环体代码块
}

示例1,循环输出1到10。

let i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

循环这边有3要素:

1. 初始化条件的变量
2. 条件判断
3. 条件相关变量变化

思考:

看上面例子,如果循环结束后,打印i,i等于多少呢?

let i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

console.log(i); // 打印?

解答:

答案是:11,因为上面循环到当i为11时,不满足判断条件 i <= 10 时才会退出循环,此时 i = 11。

do while

do while 循环和 while 循环相比,do while循环至少会执行一次。

语法结构:

do {
    循环体代码块
}
while (条件);

示例1,打印1到100之间的偶数。

let i = 2;
do {
    console.log(i);
    i += 2;
} while (i <= 100)

上面设置 i = 2 后,先执行循环代码体,再判断条件。

思考:

阅读如下代码,分析输出:

let i = 101;
do {
    console.log(i); // 输出?
    i += 2;
} while (i <= 100);

console.log(i);// 输出?

解答:

因为 do while 循环最少执行一次,所以当 i = 101 时,先运行循环代码体,打印 101,i加上2等于103,最后判断条件不符合就退出了。

退出循环后,外面输出i,i这时候为 103。

for

上面 while 循环要将三要素分开来写,比较麻烦,通过 for 循环写法比较简洁。

语法结构:

for (1 初始化; 2 条件; 4 循环后执行的表达式) {
    3 循环代码块
}

执行顺序:

1 ->
    2 -> 3 -> 4 ->
    2 -> 3 -> 4 ->
    2 -> 3 -> 4 ->
    ...

示例1,接 while 示例,使用 for 循环打印1到10。

for(let i = 1; i <= 10; i++) {
    console.log(i);
}

相比while循环简单了很多。

思考:

看上面例子,如果循环结束后,打印i,i等于多少呢?

for(let i = 1; i <= 10; i++) {
    console.log(i);
}

console.log(i); // 打印多少?

解答:

这边很容易解答成11,但是因为 let 声明的变量是块作用域,只在循环内,所以在循环是访问不到 i 这个变量的。 所以这边会报 i is not defined 没有定义的错误。

示例2,输入1个数字,判断是否是素数。

let i = window.prompt("输入一个数字:");
let b = true;
for (let j = 2; j < i; j++) {
    if (i % j === 0) {
        b = false;
    }
}
if (b) {
    console.log("是素数");
} else {
    console.log("不是素数");
}

这边有两个优化技巧:

1. 将判断条件: j < i 替换成 j <= i/2 。
2. b = false,后面增加break。

思考两个优化是什么原因呢?

for in

前面3种循环方式可以说大部分语言都有,for in 循环在js中主要是针对数组、对象和字符串。

语法:

for (let 变量名 in 数组|对象|字符串) {
    代码块
}

其中:

如果遍历数组,那么变量名为下标。
如果遍历对象,那么变量名为对象属性。
如果遍历字符串,那么变量名为字符的位置,也可以理解成下标。

示例1,有数组元素1~5,循环打印数组元素:

let arr = [1, 2, 3, 4, 5];
for (let i in arr) {
    console.log(i + ": " + arr[i]);
}

这边循环的是数组,所以i是下标,通过 arr[i] 可以索引到具体的数组元素。

示例2,声明一个对象:goodsId为1,goodsName为电动牙刷,价格price为1元,遍历打印属性。

let goods = {goodsId: 1, goodsName: "电动牙刷", price: 1};
for(let i in goods){
    console.log(i + ": " + goods[i]);
}

这边循环的是对象,所以i是对象的属性,对象通过类似数组的下标索引方式也能取到对应值,例如:goods[i] 。

示例3,遍历字符串:less is more. 。

let arr = "less is more.";
for (let i in arr) {
    console.log(i + ": " + arr[i]);
}

字符串也可以遍历,js很神奇了吧。这边呢i就是字符在字符串中的位置。

for of

和 for in 不同,for in 遍历的变量是下标,for of 遍历的变量是值,另外 for of 不能遍历对象。

语法结构:

for (let 变量名 of 数组|字符串) {
    代码块
}

其中:

变量为数组或者对象的值。

示例1,尝试对上面的例子改造成 for of 输出。

let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
    console.log(value);
}

示例2,尝试对字符串进行遍历: Hello JavaScript 我来了!

let str = "Hello JavaScript 我来了!";
for (let s of str) {
    console.log(s);
}

break

前面有一个例子,是判断一个数是否是素数的,我们试想,如果找到一个数字可以被这个数整除,那么是不是就可以退出了,不需要再循环了。

循环过程中,如果要退出,可以使用break语句。

简单示例:

for(let i = 1; i <= 10; i++) {
    console.log(i);
    if (i % 3 == 0) {
        break;
    }
}

因为i如果可以整除3就退出循环了,所以控制台输出:1 2 3。

示例1,改进上面判断素数的例子:

let i = window.prompt("输入一个数字:");
let b = true;
for (let j = 2; j <= i/2; j++) {
    if (i % j === 0) {
        b = false;
        break; // 有一个整除,那么就可以退出了,不需要再往下判断了。
    }
}
if (b) {
    console.log("是素数");
} else {
    console.log("不是素数");
}

continue

如果有这样一个需求,需要打印1到100之间的不被3整除的数字。我们可以考虑从1循环到100,如果碰到整除3的数字就跳过,然后继续后面的循环。

这边就可以用 continue 关键词,continue 循环中用于直接执行下一个循环的控制语句。

示例1,打印1到100之间的不被3整除的数字。

for(let i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
        continue;
    }
    console.log(i);
}

本节总结

  1. 本篇梳理了js中5种循环结构:while、do while、for、for in、for of。
  2. 在循环过程中如果要退出可以用break,要继续下一轮循环可以用continue。
  3. 一般来看,while 循环用的不多,多用 for in 和 for of。
  4. for in可以遍历数组、对象和字符串、for of可以遍历数组和字符串。

练习题

  1. 输出1-10与5相乘的结果。
  2. 求出所有的水仙花数,水仙化数为3位数,并且每位上的数字的立方和等于该数本身。
  3. 打印1到10000之间的素数。
  4. 打印1到10000之间的完全数。
  5. 让用户输出一个整数n, 求 1!+2!+3!+4!+…n!。
  6. 使用循环的方式打印九九乘法表, 用表格呈现。
  7. 打印10层杨辉三角,请百度了解杨辉三角。
  8. 使用循环方式判断一个字符串是否全由数字组成。
  9. 判断一句话是否以句号结尾。
  10. 和电脑循环玩一个猜拳的小游戏:
    1. 电脑随机出,用户输入石头、剪刀、布,然后和电脑生成的进行对比,并判断谁赢,然后继续下一轮。
    2. 如果用户输出:退出,那么程序退出,然后分别打印出电脑、用户赢的次数、用户连续赢的最高次数。
    3. 用户点击取消:那么直接开始下一轮。
评论区

索引目录