什么是分支语句

• JS 代码是从上往下按照顺序依次执行的, 从第一行代码一直执行到最后一行
• 如果有一种情况是我有两段代码, 我只需要执行其中一个即可, 那么就可以用到分支语句
• 总结: 分支语句就是根据我们设定好的条件来决定要不要执行某些代码

if语句

if单分支语句

• 语法：if (条件) { 想要执行的代码 }

        // 定义条件
        var flag = true;

        if (flag) {
            console.log(1);
            console.log(2);
            console.log(3);
        }
        
        if (!flag) {
            console.log(4);
            console.log(5);
            console.log(6);
        }

if else 语句

• 语法 ：if (条件) { 条件为真时 执行的代码 } else { 条件为假时 执行的代码 }

    if (true) {
        console.log('因为条件是 true 所以 我可以打印出来')
    } else {
        console.log('因为条件是 true 所以 我不会被打印')
    }
    if (false) {
        console.log('因为条件是 false 所以 我不会被打印')
    } else {
        console.log('因为条件是 false 所以 我可以打印出来')
    }

if 语句的嵌套

• 可以通过 if 和 else if 来设置多个条件进行判断
• 语法: if(条件1){条件1为true时执行} else if (条件2){条件2为true时执行}...
• 语法: if(条件1){条件1为true时执行} else if (条件2){条件2为true时执行}else{以上条件都不满足时执行}

switch 分支语句

• switch 也是 条件判断语句的一种, 是对于某一个变量的判断(全等的判断,数据类型不一致时会导致判断失败)
  • 语法：

    switch (要判断的变量) {
        case 情况1:
            情况1执行的代码
            break;
        case 情况2:
            情况2执行的代码
            break;
        case 情况3:
            情况3执行的代码
            break;
        default:
            上述情况都不满足时执行的代码
    }

• switch 通常是判断某一个变量等于某一个值的时候使用, 比如用户输入一个数字显示今天周几, 输入一个数字显示今天是几月
• switch 穿透语句的基本书写
  • 从第一个满足条件的 case 开始
  • 如果没有 break, 后面的条件不在判断, 直接执行代码
  • 直到遇到一个 break 或者 switch 结束

  switch (2) {
      case 0:
          console.log('星期日')
      case 1:
          console.log('星期一')
      case 2:
          console.log('星期二')
      case 3:
          console.log('星期三')
      case 4:
          console.log('星期四')
      case 5:
          console.log('星期五')
      case 6:
          console.log('星期六')
      default:
          console.log('请填写一个 0 ~ 6 的数字')
  }
  

三元表达式

• 三元表达式(三元表达式/三目运算符/问号冒号表达式)
• 语法
  • 条件 ? 真-执行的代码 : 假-执行的代码
  • 代码只有一行
• 意义
  • 对 if else 语句的简写
• 常用场景
  • 利用三目执行代码(对if else 的优化)
  • 利用三目给变量赋值

// 执行代码
var num = 5
num % 2 == 0 ? console.log('num 为偶数') : console.log('num 为奇数')

// 给变量赋值
var num = 1 // 我们暂且规定 num == 1 时代表为男性, num == 2 时代表为女性
var gender = num == 1 ? '男' : '女'
console.log(gender)

js -- 循环语句

• 定义：根据某些给出的条件，重复执行同一段代码

• 循环必须要有某些固定的内容组成
  • 初始化
  • 条件判断
  • 要执行的代码
  • 自身改变

while 循环

• 语法： while (条件) { 满足条件就会执行 }
• 注意 ：给循环设置边界值，也就是让循环结束，否则会进行死循环。
• 案例： 求100以内偶数和

        // 初始化变量
        var num = 1;
        // 定义总和
        var sum = 0;
        // 循环体
        // 判断条件
        while (num <= 100) {
            if (num % 2 === 0) {
                // 求和
                sum += num;
                
            }
            // 变量自增
            num++;
        }
        console.log(sum);

do...while 循环语句

• 类似while，但 do...while 会先进行此循环，然后再进行条件判断
• 语法：do { 要执行的代码 } while (条件)

// 1. 初始化
var num = 10;
do {
    // 3. 要执行的代码
    console.log('我执行了一次')
    // 4. 自身改变
    num += 1
// 2. 条件判断
} while (num < 10)

for 循环

• 相比 while 和 do...while 结构变化较大
• 语法：for (var i = 0; i < 10; i++) { 要执行的代码 }
• 案例1：水仙花数

        // 水仙花数取值范围
        for (var i = 100; i < 1000; i++) {
            // 获取百位数
            var a = parseInt(i/100);
            // 获取十位数
            var b = parseInt(i / 10) % 10;
            // 获取个位数
            var c = i % 10;
            // 判断是否复合要求
            if (a*a*a + b*b*b + c*c*c === i){
                console.log(i);
            }
        }

循环嵌套的书写

• 循环嵌套其实就是一个循环内部又写了一个循环

for (var i = 0; i < 3; i++) {   // 这个循环称为 外层循环
    for (var k = 1; k < 4; k++) {   // 这个循环称为 内层循环
        /**
         * 重点!!!
         *          两个循环的循环变量不能相同, 会有冲突
        */
    }
}

• 案例2：求质数

        // 得到1~30的数字
        for (var i = 1; i <= 30; i++) {
            // 设置计数器
            var sum = 0;
            // 得到2~i-1的数
            for (var j = 2; j < i; j++) {
                // 判断i求模j是否等于0
                if (i % j === 0) {
                    // 等于零sum++
                    sum++
                }
            }
            // sum等于零说明为质数
            if (sum === 0) {
                console.log(i);
            }
        }

流程控制语句

如果想要在循环执行到某一个时刻的时候, 停止循环, 我们就需要使用流程控制语句

• break
  • 在循环没有进行完毕的时候, 因为我们设置的条件满足了, 就提前终止整个循环
• continue
  • 在循环没有进行完毕的时候, 因为我们设置的条件满足了, 就结束当前一轮循环

定时器

• 两种定时器的介绍和作用 ( setTimeout / setInterval )
  • setInterval 计时器, 每间隔固定的时间执行一次 语法: setInterval(函数, 数字) 函数: 每间隔多少时间执行的代码 数字: 间隔时间, 单位是毫秒
  • setTimeout 倒计时器, 在指定时间到达后, 执行一次
    • 语法: setTimeout(函数, 数字) 函数: 一段时间后执行的代码 数字: 间隔时间, 单位是毫秒
• 定时器的返回值及意义
  • 返回值不区分定时器种类, 用于表示你这个定时器是页面中的第几个定时器
  • 作用: 用来关闭定时器
• 关闭定时器
  • 不区分定时器种类, 只要给出正确的定时器返回值就可以关闭
  • 语法:
    • clearTimeout(定时器返回值)
    • clearInterval(定时器返回值)

简单的代码异步执行机制

后面会出详细的解释

• 什么是非异步执行代码
  • 按照从上到下的顺序, 从左到右的顺序, 依次执行每一行代码
  • 上一行代码没有执行完毕, 不会执行下一行代码
• 什么是异步执行代码
  • 当代码遇到异步任务的时候, 会把该代码放在 异步队列 内等待
  • 所有的同步代码执行完毕后, 再开始执行 异步队列内的代码
• 什么是异步任务
  • 两种定时器都是异步任务
  • 可以理解为, 先执行定时器外面的代码, 然后执行定时器里边的代码