js初级循环结构

Day 03---循环结构

一、三大循环结构

for循环、while循环、do...while循环。这三大循环在所有的编程语言中几乎都存在。这三种循环本质上是一样的，只是在语法上稍有不同。

另外，JavaScript为了提高遍历对象的属性和数组元素的性能，增加了for-in循环，待面向对象阶段再细讲。

1.1 for循环

语法：

javaScript for(表达式1; 表达式2; 表达式3){ //循环体 }

说明：

1. for循环开始执行，==首先执行表达式1==，表达式1一般是对循环变量做初始化的操作。表达式1在整个for循环执行期间只会执行一次。
2. 表达式1执行完毕后==开始执行表达式2==，表达式2一般是循环条件是否成立，如果表达式2最终的结果是true(或者可以通过Boolean()转化函数转换为true)，则开始执行循环体。如果表达式2最终的结果是false，则循环语句结束。
3. 循环执行完毕之后，开始执行表达式3，表达式3一般是对循环做自增或自减的操作。
4. 表达式3执行完毕后，继续执行表达式2。继续上面第2步的操作。

注意：

• 3个表达式的都可以省略。
• 对表达式1和表达式3省略，对for循环没有任何影响，只是少执行了代码而已。
• 如果表达式2省略，表示此处为true，那么这个循环就是死循环。
• 如果第一次检查表达式2的时候就是false，则循环体内的代码可能一次也不执行。

用for循环的时候，初始化变量的名字，最好优先使用i、j、z，如果被占用，则可以选择其他。

打印1-100

javascript for (var i = 1; i <= 100; i++) { console.log(i); } //注意：JS中没有块级作用域

打印100 - 1

javascript for (var i = 100; i >= 1; i--) { console.log(i); }

打印1-100的和

```javascript var sum = 0;

for (var i = 1; i <= 100; i++) { sum += i; //同等于 sum = sum + i; }

console.log(sum); ```

打印2 - 5 的乘积

```javascript var c = 1;

for (var i = 2; i <= 5; i++) { c *= i; }

console.log(c); ```

打印1-100内能既被3整除又能被7整除的数

javascript var str = ""; for (var i = 1; i <= 100; i++) { if (i % 3 == 0 && i % 7 == 0) { str += i + " "; } } console.log(str);

for循环 死循环 的写法

javascript for (;;) { alert("死循环！！！！"); }

1.2循环的嵌套

语法如下

```javascript for (var i = 1; i <= 5; i++) { //外层循环的操作 for (var j = 1; j <= 5; j++) { //内层循环的操作、注意：内层循环的变量不能和外层冲突 } }

/* 以上代码的逻辑：先执行一次外层循环，然后在执行一轮内层循环，执行完毕后，再次执行外层循环，然后在执行一轮内层循环。。以此类推。。直到外层循环全部执行完毕或者遇到break. */ ```

输入一个数字，根据数字生成一个 x * x 的组件矩阵

```javascript var starNum = parseInt(prompt("请输入一个数字"));

// //外层循环 for (var i = 1; i <= starNum; i++) { //内层循环 for (var j = 1; j <= starNum; j++) { document.write(" "); } document.write("
"); } ```

换成控制台打印 x * x效果

javascript //外层循环 var str = ""; for (var i = 1; i <= starNum; i++) { //内层循环 for (var j = 1; j <= starNum; j++) { str += "*"; } str += "\n"; } console.log(str);

1.3 break语句

break: 只能适用于switch语句结构和循环语句结构中。分别表示跳出switch语句和跳出整个循环语句

必须听话才能停止。。。

javascript for (;;) { var name = prompt("听话，必须输入字母'A'！否则你会一直输入！"); if (name == "A") { break; } }

循环条件很大，但只想要前面的某一部分

javascript for (var i = 0; i < 10; i++) { if (i == 6) { break; } console.log(i); }

输入两个数，求这两个数的最大公约数

```javascript /* 两个数的最大公约数：能同时被这两个数整除的最大的那个数。 例如：8 和 4 ：4， 1 和 8 ：1， 4 和 10 ：2 */ var num1 = parseInt(prompt("请输入第一个数")); var num2 = parseInt(prompt("请输入第二个数"));

//找到最小的那个数 var minNum = (num1 <= num2 ? num1 : num2);

for (var i = minNum; i >= 1; i--) { if (num1 % i == 0 && num2 % i == 0) { console.log(i); break; } } ```

输入两个数，求这两个数的最小公倍数

```javascript /* 两个数的最小公倍数：能同时整除这两个数的最小的那个数。 例如：8 和 4 ：8， 1 和 8 ：8， 4 和 10 ：20 */ var num3 = parseInt(prompt("请输入第一个数")); var num4 = parseInt(prompt("请输入第二个数"));

//找到最大的那个数 var maxNum = num3 >= num4 ? num3 : num4;

for (var i = maxNum; i <= num3 * num4; i++) { if ( i % num3 == 0 && i % num4 == 0) { console.log(i); break; } } ```

1.4 continue语句

continue：只能适用于循环结构，表示当前程序运行，到continue关键字的时候，会跳出当前循环，然后继续下一次循环。

打印0-4 6-9

javascript for (var i = 0; i < 10; i++) { if (i == 5) { continue; //只跳出当前循环，进行下一次循环操作。 } console.log(i); }

1.5 while循环

语法：

javascript while(condition){ // 循环体 }

说明：

1. 先判断condition是true还是false，如果是true，则执行循环体，循环体执行完毕，再次判断condition
2. 如果condition为false，则结束循环。

注意：

• condition不能省略。如果省略为语法错误
• while循环也有可能一次也不执行。

循环10次打印

javascript var num = 0; while (num < 10) { console.log("要亲亲，要抱抱，要举高高！"); num++; }

打印1-100

javascript var k = 1; while (k <= 100) { console.log(k); k++; }

打印100 - 1

javascript var m = 100; while (m >= 1) { console.log(m); m--; }

1- 100的和

javascript var z = 1; var sum = 0; //最后总和变量 while (z <= 100) { sum += z; // sum = sum + z; z++; }

死循环恶搞小例子

javascript var num = 0; while (true) { num++; if (num < 10) { alert("点死你！"); } else if (num < 20) { alert("快没了，加油！"); } else if (num < 30) { alert("相信我！最后十下！"); } else { alert("哈哈，骗你的！"); } }

1.6 do...while循环

语法：

javascript do{ //循环体 }while(condition);

说明：

1. 先执行循环体。
2. 循环体执行结束后，去判断condition，如果condition是true，则再次执行循环体，否则循环结束。

注意：

• condition条件不能省略，省略语法错误。
• 由于先执行在判断，所以，对do...while 循环来说，循环体至少执行一次。

```javascript var num = 1; while (num < 1) { console.log("============"); }

do { console.log("-----------"); } while (num < 1); ```

1.7 三大循环比较

从本质上来讲，三大循环都可以完成相同的工作。其实一个for循环可以适应所有的需要循环的场景。但是，有些地方用某个可能更方便一些。

从实际情况来看，大部分人更新换用for，比如我。

| 循环结构 | 特点和用途 | | :--------: | :-------------------------: | | for | 一般用于精确控制循环次数的场景。 | | while | 不能提前知道循环次数 | | do...while | 不能提前知道循环次数，且循环体的代码至少执行一次的场景 |