本节目标
- 掌握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层杨辉三角，请百度了解杨辉三角。
- 使用循环方式判断一个字符串是否全由数字组成。
- 判断一句话是否以句号结尾。
- 和电脑循环玩一个猜拳的小游戏：
- 电脑随机出，用户输入石头、剪刀、布，然后和电脑生成的进行对比，并判断谁赢，然后继续下一轮。
- 如果用户输出：退出，那么程序退出，然后分别打印出电脑、用户赢的次数、用户连续赢的最高次数。
- 用户点击取消：那么直接开始下一轮。
