JS基础第三天

本章介绍循环

思维导图

for循环☆

语法结构

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

名称	作用
初始化变量	通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

执行过程★

1.初始化变量，初始化操作在整个 for 循环只会执行一次。

2.执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。

3.执行操作表达式，此时第一轮结束。

4.第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。

5.继续执行操作表达式，第二轮结束。

6.后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

for 循环重复相同的代码

比如输出10句“媳妇我错了”

//  基本写法
for(var i = 1; i <= 10; i++){
    console.log('媳妇我错了~');
}
// 用户输入次数
var num = prompt('请输入次数:')；
for ( var i = 1 ; i <= num; i++) {
    console.log('媳妇我错了~');
}

for 循环重复不相同的代码

例如，求输出1到100岁：

//  基本写法
for (var i = 1; i <= 100; i++) {
      console.log('这个人今年' + i + '岁了');
}

例如，求输出1到100岁，并提示出生、死亡

// for 里面是可以添加其他语句的 
for (var i = 1; i <= 100; i++) {
 if (i == 1) {
    console.log('这个人今年1岁了， 它出生了');
 } else if (i == 100) {
    console.log('这个人今年100岁了，它死了');
  } else {
       console.log('这个人今年' + i + '岁了');
  }
}

for循环因为有了计数器的存在，还可以重复的执行某些操作，比如做一些算术运算。

将1~100之间的偶数打印到控制台★

//1.编写循环，从1开始到100结束
for (var i = 1; i <= 100; i++) {
    //2.判断i的值是不是偶数,如果是偶数就输出到控制台
    if (i % 2 == 0) {
        console.log(i);
    }
}

统计思想

可以统计个数(count)、和(sum)、积(amass)、平均值(avg)
但凡涉及到统计思想，我们可以使用固定步骤完成：1.先在循环外面定义一个变量用来存储数据,2.编写循环，3.在循环内部满足条件，进行统计即可（统计个数用++，求和用+=，求积用*=）

统计1~10之间的和★

//1.在循环外定义变量sum，存累加的和
var sum = 0;

//2.定义循环
for (var i = 1; i <= 10; i++) {
    //3.因为是求和，所以要对sum进行累加操作
    sum += i;
}

console.log(sum);

统计1~100之间偶数和★

//1.在循环外定义变量sum，存累加的和
var sum = 0;
//2.定义循环
for (var i = 1; i <= 100; i++) {
    //3.判断i是否满足条件
    if (i % 2 == 0) {
        //4.因为是求和，所以要对sum进行累加操作
    	sum += i;
    }
}

console.log(sum);

统计1~100之间偶数的个数★

//1.在循环外定义变量count,记录个数
var count = 0;
//2.定义循环
for (var i = 1; i <= 100; i++) {
    //3.判断i是否满足条件
    if (i % 2 == 0) {
        //4.因为求个数，所以用++
        count++;
    }
}

console.log(count);

双重for循环★

目的

通过一系列的学习我们需要知道外循环执行一次，内循环执行n次。

概述

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}

内层循环可以看做外层循环的循环体语句

内层循环执行的顺序也要遵循 for 循环的执行顺序

外层循环执行一次，内层循环要执行全部次数

打印五行五列星星

思考：

以下代码在控制台打印五行十列的★，使用循环应该如何优化

★★★★★★★★★★
★★★★★★★★★★
★★★★★★★★★★
★★★★★★★★★★

console.log("★★★★★★★★★★");
console.log("★★★★★★★★★★");
console.log("★★★★★★★★★★");
console.log("★★★★★★★★★★");
console.log("★★★★★★★★★★");
console.log("★★★★★★★★★★");

1.我们发现一行有十个星星，可以使用循环优化

var str = "";
for (var i = 0; i < 10; i++) {
	str += "★";
}
console.log(str); //输出★★★★★★★★★★

2.需求需要5行，将上面代码用循环包裹起来，执行5次即可

for (var j = 0; j < 5; j++) {
    var str = "";
    for (var i = 0; i < 10; i++) {
        str += "★";
    }
    console.log(str);
}

但是控制台只能输出1行

3.所以需要将每一行的星星都拼接到字符串中，并且中间使用\n连接。因为要换行

var str = "";
//外循环控制几行
for (var j = 0; j < 5; j++) {
    //内循环控制一行几列，控制列数
    for (var i = 0; i < 10; i++) {
        str += "★";
    }
    //每一行完了需要追加\n,确保下一行能够换行
    str += "\n";
}
console.log(str);

核心逻辑

1.内层循环负责一行打印五个星星

2.外层循环负责打印五行

九九乘法表

//知识点1 外循环控制行数  内循环控制列数
//知识点2 如何打印正三角形，外循环i<=9,内循环j<=i
//知识点3 字符串拼接

var str = "";
for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        str += j + "*" + i + "=" + i * j + "\t";
    }
    str += "\n";
}
console.log(str);

for 循环小结

for 循环可以重复执行某些相同代码

for 循环可以重复执行些许不同的代码，因为我们有计数器

for 循环可以重复执行某些操作，比如算术运算符加法操作

随着需求增加，双重for循环可以做更多、更好看的效果

双重 for 循环，外层循环一次，内层 for 循环全部执行

for 循环是循环条件和数字直接相关的循环

while循环

while语句的语法结构如下：

while (条件表达式) {
    // 循环体代码 
}

执行思路：

1 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码

2 执行循环体代码

3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

注意

使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环

do-while循环

do… while 语句的语法结构如下：

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路

1 先执行一次循环体代码

2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

注意

先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

continue、break★

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        console.log('这个包子有虫子，扔掉');
        continue; // 跳出本次循环，跳出的是第3次循环 
    }
    console.log('我正在吃第' + i + '个包子呢');
}

运行结果：

break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break; // 直接退出整个for 循环，跳到整个for下面的语句
    }
    console.log('我正在吃第' + i + '个包子呢');
}

运行结果：

代码规范

标识符命名规范

• 变量、函数的命名必须要有意义
• 变量的名称一般用名词
• 函数的名称一般用动词

操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个 for 循环，跳到整个for循环下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
}

单行注释规范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 单行注释前面注意有个空格
   }
   console.log('我正在吃第' + i + '个包子呢');
}

其他规范

关键词、操作符之间后加空格