JavaScript 逻辑运算符 分支语句 循环语句

140 阅读6分钟

JavaScript 逻辑运算符 分支语句 循环语句

前端 JavaScript ES5 学习目录

1. 认识 JavaScript

2. JavaScript 基础语法

3. JavaScript 变量 数据类型 运算操作符

4. JavaScript 逻辑运算符 分支语句 循环语句

5. JavaScript 函数 作用域问题

6. JavaScript IIFE 面向对象 函数中的this

7. JavaScript 类和对象 window对象 常见内置类

8. JavaScript 数组基本使用 Date日期的使用

学习前言

  • 我们首先学习这个时候,我们首先需要了解我们的代码的执行顺序

    • 顺序语句 —— 从上到下,顺序性的执行我们的代码
    • 分支语句 —— 根据是否复合我们判断条件来实现运行内部的代码块
    • 循环语句 —— 根据我们的条件来实现决定我们的代码块是否重复执行
    • // 先书写我们的顺序语句
      var num01 = 10
      var num02 = 20
      console.log(num01, num02)
      ​
      ​
      // 然后书写分支语句
      var islogin = true
      if (islogin){
        console.log("欢迎来到首页……")
      }
      ​
      if (!islogin) {
        console.log("请登陆后重试……")
      }
      ​
      ​
      // 开始实现使用循环语句
      for (var i = 0; i < 10; i++) {
        console.log(i)
      }
      ​
      // 不要想的太简单了,这个只是简单的示例,一个程序的话就是由算法 + 逻辑来实现的
      

image-20241016152541091.png

  • 代码块的理解

    • 首先我们的每一行代码只是我们的一个代码语句

      • var num01 = 10  // 代码语句1
        var num02 = 10  // 代码语句2
        var result  = num01 - num02  // 代码语句3
        
    • 但是为了让多个代码语句成为一个整体,那么就可以实现使用我们的 {} 实现包裹起来

      •       {
                  // 开始将上面的几个语句整合成为一个代码块
                  var num01 = 10
                  var num02 = 10
                  var result = num01 - num02
              }
        
      • 上面的这个就是我们的代码块,{} 的出现就会生出我们的作用域问题

        • 通常我们就会通过一些关键字来告知 js引擎,我们的代码块该如何实现运行
        • 这些关键字比如说是: 分支语句 循环语句 中的一些关键字

JavaScript 分支语句(判断结构 / 选择结构)

  • 首先我们需要注意的是,编程的解决的东西,源于生活又超出生活

  • 在我们的实际开发中,我们是需要使用一定条件来决定我们的代码的执行方向的

    • 满足条件就直接执行内部的代码块
    • 不满足条件就做另一间事情
  • JavaScript 中的分支结构含有

    • if 分支语句

      • 单分支结构 if...

        •       function func(num) {
                    if (num > 1) {
                        console.log(`这个数字大于 1`)
                    }
                }
                ​
                func(21)  
          
      • 多分支结构 if...else if...else...

        • 这个就不演示了,就是多了一些情况来进行判断而已
        •       if (条件1) {
                    // 代码块1
                } else if (条件2) {
                    // 代码块2
                } else {
                    // 代码块3
                }
          
    • 三元运算符

      • 就是实现的是我们的在三个运算元直接的比较
      • 运算元1相关的条件 ? 运算2的相关的表达语句 : 运算元3的表达语句
      •       var num01 = 10
              var num02 = 5
              var num03 = 6
              ​
              console.log(num01 > 9 ? num02 : num03)  // 判断的条件语句成立,就是返回前者,否则就是后者
              console.log(num01 > 9 ? num02 + 10 : num03 - 10)
        
    • switch 分支语句

      •       function func(num) {
                switch (num) {
                  case 1:
                    console.log("这个数字是1")
                    break
                  case 2:
                    console.log("这个数字是2")
                    break
                  default:
                    console.log("其他数字")
                }
              }
              ​
              var num = 3
              func(num)
        

JavaScript 逻辑运算符

  • 逻辑运算符主要含有三个: || 逻辑或 && 逻辑与 ! 逻辑非

    • 逻辑或: 就是连接的多个表达式其中一个为真即为真
    • 逻辑与: 就是连接的多个表达式全部为真才为真
    • 逻辑非: 真的是假的,假的是真的
  • 就是用于含有多个语句需要来进行判断的时候,我们就是用逻辑运算符实现连接即可

JavaScript 循环语句

  • 循环就是实现的是我们的将同一个代码块实现多次的循环执行的操作

  • 常用的场景就是对一个列表实现循环取值,这个过程就是 遍历(traversal) 或者 迭代(iteration)

  • 常见的循环含有:

    • while 循环

      • 条件成立那就进入循环,否则跳出循环
      • 无限循环的条件就是: while(true)
      •       var num = 0while (num < 10) {
                console.log("我喜欢你")
                num++  // 条件更新
              }
              ​
              /*
                所以说我们的循环语句的话就是包含了三个部分的
                循环的标识的变量,循环条件,循环标识变量的更新
              */
        
    • do...while 循环

      • 就是实现的是我们的不管条件成不成立,do循环都会先执行一次
      •       do {
                  // 循环体代码
              } while(循环条件)
        
    • for 循环(常用的一种循环)

      • 首先我们需要注意的是这个循环是使用得十分多的

      • 开发中我们实现使用得比较多的是我们的 for 循环,但是如果是想玩算法的,会发现使用 while 循环是比较多的

      • for 循环的基本格式

        •       for (begin; condition; step){
                    // 循环体代码
                }
                ​
                // 示例
                for (var i = 0; i < 3; i++) {
                    console.log(i)
                }
          
        • for 循环的执行顺序是: 先执行我们的 begin ,然后再进行我们的 condition ,然后循环条件,最后执行刷新条件

          • 所以说我们的 for 循环的怪异写法:(经过验证,我们的C++也是可以这么写的

            • 首先先定义我们加入循环的变量
            • 然后 for 循环的进入条件
            • 然后定义代码块以及添加更新条件
          •       var num = 1
                  for(; num < 10 ;){
                    // 代码块语句
                    console.log(num)
                    // step  
                    num++;
                  }
            
          •       // 注意这个是我们的 C++ 代码哈,莫搞混了#include<iostream>
                  using namespace std;
                  ​
                  int main() {
                      int num = 0;
                      for (; num < 10 ;) {
                          cout << num << endl;
                          num++;
                      }
                  }
            
          • 但是这样进行书写的代码的可阅读性是十分低的,不建议这个进行书写(切记

    image-20241017002216707.png

  • 我们注意的一点是我们的 分支语句和循环语句是可以实现嵌套的

    • 分支语句和循环语句之间的嵌套
    • 分支语句和分支语句之间的嵌套
    • 循环语句和循环语句之间的嵌套
  • 循环控制关键字 breakcontinue 的使用

    • break 就是实现的是直接跳出我们的最近的一个循环语句
    • continue 就是实的是我们的直接跳出本次循环,进入下一次循环
const readline = require("readline");
// 点击查看 readline 源码let isTrue = false;
const index = 0;
​
// 0 - 99
const computeNum = Math.floor(Math.random() * 100);
​
// 创建readline接口实例
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});
​
​
/**
 * 用来处理用户的每一次输入,并与电脑的随机生成的数字进行比较
 * @param {Number} computeNum 
 * @param {Boolean} boolValue
 * @param {Number} index
 */
function getUserInputData(computeNum, boolValue, index) {
  rl.question(`你已经挑战${index+1}次,请输入一个数字(0-99):`, (answer) => {
​
    const numAnswer = Number(answer);
​
    if (!isNaN(numAnswer)) {
      console.log(`你输入的数字是:${numAnswer}`);
      // console.log(`电脑是:${computeNum}`);
​
      if (numAnswer === computeNum) {
        console.log("恭喜,你猜对了!")
        console.log(`电脑生成的数字是:${computeNum}`);
        boolValue = true
        return boolValue
      } else if (numAnswer > computeNum) {
        console.log("你猜的数字过大……")
      } else {
        console.log("你猜的数字过小……")
      }
​
    } else {
      console.log("请输入一个有效的数字。");
    }
​
    checkIfContinue(index);
  });
}
​
/**
 * 检查是否继续游戏或关闭接口
 * @param {Number} index
 */
function checkIfContinue(index) {
  index++
  // console.log(index)
  if (getUserInputData(computeNum, isTrue, index)) {
    const res = getUserInputData(computeNum, isTrue, index)
    if (res) {
      console.log("恭喜你挑战成功!!!")
      rl.close();
    }
  }
​
  if (index >= 7) {
    console.log("次数超过七次, 挑战失败!!!")
    rl.close();
  }
}
​
getUserInputData(computeNum, isTrue, index);
​
// bug: 发现暂时性的 isTrue 并没有加入判断中去,没有实现持久化的修改 
// 运行: node 文件名.js 
  • 注意我们的 循环语句以及分支语句使用的关键字只是我们的进入需要执行的代码段的条件而已,所以说,我们是可以先书写代码块后在实现书写 while for if else 等关键字,这样就可以对代码块有一个更加深入的理解