Day03 运算符+IF条件分支结构

最新推荐文章于 2024-10-09 21:26:04 发布

奋斗de皮卡丘

最新推荐文章于 2024-10-09 21:26:04 发布

阅读量233

点赞数

文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/qq_63778549/article/details/122212221

版权

一、赋值运算符： **= += -= *= /= %=**

= 赋值运算符

将右侧表达式的执行结果赋值给左侧变量储存

如果对一个变量重复赋值执行结果是覆盖效果

+= 加等赋值运算符 / 累加运算符

在左侧变量储存数据的基础上

累加右侧表示的执行结果

再将最终的执行结果赋值给左侧变量储存

-= 减等赋值运算符 / 累减运算符

在左侧变量储存数据的基础上

累减右侧表示的执行结果

再将最终的执行结果赋值给左侧变量储存

*= 乘等赋值运算符 / 累乘运算符

在左侧变量储存数据的基础上，累乘右侧表示的执行结果

再将最终的执行结果赋值给左侧变量储存

/= 除等赋值运算符 / 累除运算符

在左侧变量储存数据的基础上，累除右侧表示的执行结果

再将最终的执行结果赋值给左侧变量储存

%= 模等赋值运算符

左侧变量储存的原始数据作为被除数

右侧表达式的执行结果作为除数

两个数值求余数将最终的结果赋值给左侧变量储存

特别注意

如果 += 有字符串参与执行效果是字符串拼接

二、三元运算符

就是用 两个符号 组成一个语句表达式？程序1：程序2
三元运算只是对 if else 语句的一个简写形式
语法： `条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行`
执行逻辑和if...else相同，语法更灵活

三种形式：基本，赋值形式，和模板字串符解析

      
var num = Number (window.prompt(`请您输入数值`));

num % 3 === 0 ? console.log(`数值${num}可以被三整除`):console.log(`数值${num}可以被三整除`);

       // 三元运算符  赋值形式
          // 当 表达式 结果是 true  给变量赋值 数据1
        // 当 表达式 结果是 false 给变量赋值 数据2
        // 当 num % 3 === 0 结果是 true  给变量res 赋值 可以
        // 当 num % 3 === 0 结果是 false 给变量res 赋值 不可以
        var res = num % 3 === 0 ? '可以' : '不可以' ;
        console.log( res );
        // 三元运算符   模板字符串解析
        // 当 num % 3 === 0 的执行结果 是 true  整个三元运算符 在 模板字符串中 解析的结果是 数值1 可以
        // 当 num % 3 === 0 的执行结果 是 false 整个三元运算符 在 模板字符串中 解析的结果是 数值2 不可以
        console.log( `您输入的数值是${num} ${ num % 3 === 0 ? '可以' : '不可以' } 被 3 整除  ` );

三.自增自减运算符（一元运算符）

++ --

每次执行变量存储的数据数值自增1/自减1

++相当于变量+=1

--相当于变量-=1

只要变量存储的数据可以转化为数值类型就支持++ --操作

如果不能转化为数值类型转化为NaN 结果是NaN
`++`
进行自增运算

分成两种，前置++ 和 后置++
前置++，会先把值自动 +1，在返回
var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11
后置++，会先把值返回，在自动+1
var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11
--

进行自减运算

分成两种，前置-- 和 后置--

和 ++ 运算符道理一样
<script>
 var int1 =100;
         int1++
         console.log(int1);
         //    输出结果是101

         var int2 = 100 ;
        int2--;
        console.log( int2 );
        //    输出结果是99

        var int3 = true ;
        int3++ ;
        console.log( int3 );
        //    输出结果是2

        var int4 = false ;
        int4++ ;
        console.log( int4 );
        //    输出结果是1

        var int5 = '50' ;
        int5-- ;
        console.log( int5 );
//    输出结果是49
        var int6 = '北京' ;
        int6-- ;
        console.log( int6 );
     //    输出结果是NaN



</script>

四.逻辑运算符:与或非 && || !

1. `&&`  见 false 就是 false    都是 true 才是 true

   - 进行 且 的运算

     >  符号左边必须为 `true` 并且右边也是 `true`，才会返回 `true`
     >
     >  只要有一边不是 `true`，那么就会返回 `false`
     >
     >  `true && true`  结果是 `true`
     >
     >  `true && false`  结果是 `false`
     >
     >  `false && true`  结果是 `false`
     >
     >  `false && false`  结果是 `false`

2. `||`   见 true 就是 true   都是 false 才是false

   - 进行 或 的运算

     >  符号的左边为 `true` 或者右边为 `true`，都会返回 `true`
     >
     >  只有两边都是 `false` 的时候才会返回 `false`
     >
     >  `true || true`  结果是 `true`
     >
     >  `true || false`  结果是 `true`
     >
     >  `false || true`  结果是 `true`
     >
     >  `false || false`  结果是 `false`

3. `!`     - 进行 取反 运算

     >  本身是 `true` 的，会变成 `false`
     >
     >  本身是 `false` 的，会变成 `true`
     >
     >  `!true`  结果是 `false`
     >
     >  `!false`  结果是 `true`
 
短路求值 
      &&  第一个表达式是 false 第二个表达式不执行

      ||  第一个表达式是 true  第二个表达式不执行

逻辑运算符的赋值
      var 变量 = 表达式1 && 表达式2
           表达式1 自动转化为 true  赋值 表达式2 的数值
           表达式1 自动转化为 false 赋值 表达式1 的数值
      var 变量 = 表达式1 || 表达式2
          表达式1 自动转化为 true  赋值 表达式1 的数值
          表达式1 自动转化为 false 赋值 表达式2 的数值

五.比较运算符

1. `==`

   - 比较符号两边的值是否相等，不管数据类型

     >  `1 == '1'`
     >
     >  两个的值是一样的，所以得到 `true`

2. `===`

   - 比较符号两边的值和数据类型是否都相等

     >  `1 === '1'`
     >
     >  两个值虽然一样，但是因为数据类型不一样，所以得到 `false`

3. `!=`

   - 比较符号两边的值是否不等

     >  `1 != '1'`
     >
     >  因为两边的值是相等的，所以比较他们不等的时候得到 `false`

4. `!==`

   - 比较符号两边的数据类型和值是否不等

     >  `1 !== '1'`
     >
     >  因为两边的数据类型确实不一样，所以得到 `true`

5. `>=`

   - 比较左边的值是否 **大于或等于** 右边的值

     >  `1 >= 1`  结果是 `true`
     >
     >  `1 >= 0`  结果是 `true`
     >
     >  `1 >= 2`  结果是 `false`

6. `<=`

   - 比较左边的值是否 **小于或等于** 右边的值

     >  `1 <= 2`  结果是 `true`
     >
     >  `1 <= 1`  结果是 `true`
     >
     >  `1 <= 0`  结果是 `false`

7. `>`

   - 比较左边的值是否 **大于** 右边的值

     >  `1 > 0`  结果是 `true`
     >
     >  `1 > 1`  结果是 `false`
     >
     >  `1 > 2`  结果是 `false`

8. `<`

   - 比较左边的值是否 **小于** 右边的值

     >  `1 < 2`  结果是 `true`
     >
     >  `1 < 1`  结果是 `false`
     >
     >  `1 < 0`  结果是 `false`

六.数学运算符

1. `+`

   > 只有符号两边都是数字的时候才会进行加法运算
   >
   > 只要符号任意一边是字符串类型，就会进行字符串拼接

2. `-`

   > 会执行减法运算
   >
   > 会自动把两边都转换成数字进行运算

3. `*`

   > 会执行乘法运算
   >
   > 会自动把两边都转换成数字进行运算

4. `/`

   > 会执行除法运算
   >
   > 会自动把两边都转换成数字进行运算

5. `%`

   > 会执行取余运算
   >
   > 会自动把两边都转换成数字进行运算

七.IF条件分支结构（重点）

if语句

通过一个 if 语句来决定代码是否执行
语法： if (条件) { 要执行的代码 }

通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

// 条件为 true 的时候执行 {} 里面的代码
if (true) {
  alert('因为条件是 true，我会执行')
}

// 条件为 false 的时候不执行 {} 里面的代码
if (false) {
	alert('因为条件是 false，我不会执行')    
}

if else 语句

通过 if 条件来决定，执行哪一个 {} 里面的代码
语法： if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }

两个 {} 内的代码一定有一个会执行

// 条件为 true 的时候，会执行 if 后面的 {} 
if (true) {
  alert('因为条件是 true，我会执行')
} else {
  alert('因为条件是 true，我不会执行')
}

// 条件为 false 的时候，会执行 else 后面的 {}
if (false) {
  alert('因为条件为 false，我不会执行')
} else {
  alert('因为条件为 false，我会执行')
}

if else if ... 语句
可以通过 if 和 else if 来设置多个条件进行判断
语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }
会从头开始依次判断条件
- 如果第一个条件为 true 了，那么就会执行后面的 {} 里面的内容
- 如果第一个条件为 false，那么就会判断第二个条件，依次类推

多个 {} ，只会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了

// 第一个条件为 true，第二个条件为 false，最终会打印 “我是代码段1”
if (true) {
  	alert('我是代码段1')
} else if (false) {
	alert('我是代码段2')           
}

// 第一个条件为 true，第二个条件为 true，最终会打印 “我是代码段1”
// 因为只要前面有一个条件满足了，就不会继续判断了
if (true) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2”
// 只有前一个条件为 false 的时候才会继续向后判断
if (false) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 false，最终什么也不会发生
// 因为当所有条件都为 false 的时候，两个 {} 里面的代码都不会执行
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
}

if else if … else 语句

和之前的 if else if ... 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 `{}`

// 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
// 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
// 只要前面有一个条件满足了，那么后面的就都不会执行了
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
} else {
  	alert('我是代码段3')
}