1.3 运算符表达式和流程控制 —— JS

Love The Way You Lie 2023-09-29 10:47 8阅读 0赞

**目录**

1.运算符和表达式

1.1算术运算符

1.2 比较运算符（关系运算符）

1.3 逻辑运算符

1.3.1 逻辑与

1.3.2 逻辑或

2. 流程控制

3.分支（分布流程控制if语句）

4.循环（有许多规律性的重复操作）

5.断点调试

--------------------

## 1.运算符和表达式 ##

### 1.1算术运算符 ###

表达式和返回值

> 表达式：是由数字，运算符，变量等组成的式子
> 
> 表达式最终都会有一个结构，返回给我们，结果叫做返回值
> 
>     console.log(1+1);//2返回值
>     var num = 1+1;//表达式

### 1.2 比较运算符（关系运算符） ###

> 是**两个数据进行比较时所使用的运算符**，比较运算后，**会返回一个布尔值（true/false）**

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>运算符名称</th> 
   <th>说明</th> 
   <th>案例</th> 
   <th>结构</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>&lt;</p> </td> 
   <td>小于号</td> 
   <td>1&lt;2</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>大于号</td> 
   <td>1&gt;2</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>&gt;=</td> 
   <td>大于等于号</td> 
   <td>2&gt;=2</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>&lt;=</td> 
   <td>小于等于号</td> 
   <td>2&lt;=2</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>==</td> 
   <td>判等号（会转型）</td> 
   <td>37！=37</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>!=</td> 
   <td>不等号</td> 
   <td>37！=37</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>===&nbsp; &nbsp; !==</td> 
   <td>全等 要求值和 数据类型都一致</td> 
   <td>37==='37'</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

console.log(3>=5);//false
    console.log(2<=4);//true
    //1.我们程序里面的等于符号 是==  默认转换数据类型  
    会把字符串型的数据转换为数字型  只要求值相等就可以
    console.log(3==5);//false
    console.log('pink老师'=='刘德华');//false
    console.log(18==18);//true
    console.log(18=='18');//true
    console.log(18!=18);//false
    //2.我们程序里面有全等  一模一样 
    要求 两侧的值 还有 数据类型完全一致才可以 true
    console.log(18===18);
    console.log(18==='18');//false

### 1.3 逻辑运算符 ###

> 用我们的布尔值参与的逻辑运算 true&&false==false
> 
> 短路运算（逻辑中断）
> 
> 短路运算原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值；

#### 1.3.1 逻辑与 ####

> 语法表达式1 && 语法表达式2
> 
> 如果第一个表达式值为真，则返回表达式2
> 
> 如果第一个表达式值为假，则返回表达式1

console.log(123&&456);//456
    console.log(0&&456);//0
    console.log(0&&1+2&&456&&56789);//0
    console.log(''&&1+2&&456&&56789);//''

#### 1.3.2 逻辑或 ####

> 如果表达式1 结果为真，则返回的是表达式1
> 
> 如果表达式2 结果为真，则返回的是表达式2

console.log(123||56);//123
    console.log(123||456||456+123);//123
    console.log(0||456||456+123);//456

逻辑中断很重要，它会影响我们程序运行结果

var num=0;
    console.log(123||num++);
    console.log(num);//0

## 2. 流程控制 ##

> 就是控制代码按什么结构顺序执行
> 
> 有三种结构（顺序，分布，循环 ）

## 3.分支（分布流程控制if语句） ##

> 分支结构
> 
> 根据不同条件执行不同的路径代码，从而得到不同的结构,JS有两种分支结构语句，if,switch

//1.if
    if(条件表达式){
          //执行语句
    }
    //2.if-else
    if(条件表达式){
         //执行语句
    }
    else{
         //执行语句
    }
    //3.if-else if-else
    if(条件表达式1){
         //执行语句
    }
    else if(条件表达式2){
         //执行语句
    }
    else{
         //执行语句
    }
    
    //4.switch
    switch(表达式){
       case value1:
            //执行语句1
            break;
       case value2:
            //执行语句2
            break;
       ...
       default:
           //执行最后的语句
    }

## 4.循环（有许多规律性的重复操作） ##

> 一组被重复执行的语句被称为循环体，能否继续重复执行取决于终止条件
> 
> 循环的语句（for , while , do while , contine , break ）

//1.for（由条件表达式来判断继续执行还是停止）
    for(初始变化式;条件表达式;操作表达式)
    {
        //循环体
    }
    //2.while（由条件表达式来判断继续执行还是停止）
    while(条件表达式){
        //循环体
    }
    //3.do while（先无条件执行一次，然后由条件表达式来判断继续执行还是停止）
    do{
       //循环体
    }while(条件表达式)
    //4.continue 关键字
    //用于立即跳出本次循环，继续下一次循环
    //5.break 关键字
    //跳出整个循环

## 5.断点调试 ##

> 浏览器中按F12->sourses->找到需要调试的文件->在程序中某一行设置断点
> 
> watch ：监视变量的值
> 
> F11：程序单步执行，观察watch，变量值的变化