本节目标
- 掌握js中5种循环方式:while、do while、for、for in、for of。
- 掌握js中break和continue的应用时机。
- 掌握数组、字符串和对象的遍历方法。
内容摘要
本篇介绍了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);
}
本节总结
- 本篇梳理了js中5种循环结构:while、do while、for、for in、for of。
- 在循环过程中如果要退出可以用break,要继续下一轮循环可以用continue。
- 一般来看,while 循环用的不多,多用 for in 和 for of。
- for in可以遍历数组、对象和字符串、for of可以遍历数组和字符串。
练习题
- 输出1-10与5相乘的结果。
- 求出所有的水仙花数,水仙化数为3位数,并且每位上的数字的立方和等于该数本身。
- 打印1到10000之间的素数。
- 打印1到10000之间的完全数。
- 让用户输出一个整数n, 求 1!+2!+3!+4!+…n!。
- 使用循环的方式打印九九乘法表, 用表格呈现。
- 打印10层杨辉三角,请百度了解杨辉三角。
- 使用循环方式判断一个字符串是否全由数字组成。
- 判断一句话是否以句号结尾。
- 和电脑循环玩一个猜拳的小游戏:
- 电脑随机出,用户输入石头、剪刀、布,然后和电脑生成的进行对比,并判断谁赢,然后继续下一轮。
- 如果用户输出:退出,那么程序退出,然后分别打印出电脑、用户赢的次数、用户连续赢的最高次数。
- 用户点击取消:那么直接开始下一轮。