欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javaScript 基础二 运算符;递增、减-- ++; 逻辑运算符;赋值运算符;分子语句 if...else switch...case ;break退出

程序员文章站 2022-04-10 15:38:59
...

1.0 运算符 operator

运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:

  1. 算数运算符
  2. 递增和递减运算符
  3. 比较运算符
  4. 逻辑运算符
  5. 赋值运算符

2.0 算数运算符

概念:算术运算使用的符号,用于执行两个变量或值的算术运算。

浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。(所以:不要直接判断两个浮点数是否相等 !)

    <script>
        console.log(1 + 1); // 2  +
        console.log(1 - 1); // 0  -
        console.log(1 * 1); // 1  *
        console.log(1 / 1); // 1  /
        
        // 1.取余(取模)  %
        console.log(4 % 2); // 0
        console.log(5 % 3); // 2
        console.log(3 % 5); // 3
        
        // 2. 浮数点 算法运算里面有问题
        console.log(0.1 + 0.2); //  0.3000000000004
        console.log(0.07 * 100); // 7.0000000000001
        
        // 3. 我们不能直接拿浮数点来进行比较  是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3); // false
    </script>

2.1 表达式和返回值

表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果,返回给我们,我们成为返回值

        // 是由数字,运算符,变量等组成的式子,我们称为表达式   1 + 1
        console.log(1 + 1); // 2 就是返回值  
        
        // 1 + 1 = 2
        // 在我们程序里,  2 = 1 + 1     把我们的右边表达式计算完毕  把 返回值给左边。
        var num = 1 + 1;

3.0 递增和递减运算符 – ++

如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( – )运算符来完成。

在 JavaScript 中,递增(++)和递减( – )既可以放在变量前面,也可以放在变量后面。
放在变量前面时,我们可以称为前置递增(递减)运算符,
放在变量后面时,我们可以称为后置递增(递减)运算符。

注意:递增和递减运算符必须和变量配合使用

3.1 前置递增运算符 和 后置

    <script>
         1. 想要一个变量自己 + 1    num = num + 1
        var num = 1;
        num = num + 1; // ++num
        num = num + 1;
        console.log(num); // 3
        
         2.前置递增运算符   ++  写在变量前面
        var age = 10;
        ++age; // 类似   age = age + 1
        console.log(age);
         先加1    后返回值!!!!
        var p = 10;
        console.log(++p + 10); //21
        
         3.前置递增运算符   ++  写在变量后面
        var age = 10;
        age++; // 类似   age = age + 1
        console.log(age);
         先返回值  后加1!!!!
        var p = 10;
        console.log(p++ + 10); //20
        console.log(p); //  11

3.2 前置递增和后置递增小结

  1. 前置递增和后置递增运算符可以简化代码的编写,让变量的值 + 1 比以前写法更简单
  2. 单独使用时,运行结果相同
  3. 与其他代码联用时,执行结果会不同
  4. 后置:先原值运算,后自加(先人后己)
  5. 前置:先自加,后运算(先已后人)
  6. 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++; 或者 num–;

4.0 比较运算符 < = > !等

**概念:**比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,
比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。

    <script>
        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(5 != 5); // false
        // 2. 我们程序里面有全等, 一模一样    要求 两侧的值  还有数据类型完全一致才可以
        console.log(18 === 18); // true
        console.log(18 === '18'); // false
    </script>

注意: = 和 == 和 === 直接的区别

5.0 逻辑运算符 && 、|| 、!

**概念:**逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断

    <script>
         1. 逻辑与 && and  两侧都为true 时 结果才是 true
        console.log(3 > 5 && 4 < 5); // false
        console.log(3 < 5 && 4 < 5); // true
        
         2. 逻辑或 || or  只要有一侧都为true 时  就是true
        console.log(3 > 5 || 4 < 5); // true
        console.log(3 > 5 || 4 > 5); // false
        
         3. 逻辑非 ! not    也叫取反符
        console.log(!true); // false
        console.log(!false); // true
    </script>

5.1 短路运算(逻辑中断)

    <script>
         1. 用我们的布尔值参与的逻辑运算, true && false == false
         2. 123 && 456 是值  或者是 表达式 参与逻辑运算?
         3. 逻辑与  短路运算   如果表达式1 结果为真  则返回表达式2  如果表达式1 为假 那么返回表达式1
         如果有空的或者否定的为假  其余是真的    0 '' null  undefined  NaN
        console.log(123 && 345); // 345
        console.log(0 && 345); // 0
        console.log(0 && 1 + 2 && 3 * 8); // 0
        console.log('' && 345 + 222 && 22 * 22); // ''

         4. 逻辑或  短路运算   如果表达式1 结果为真  则返回表达式1  如果表达式1 为假 那么返回表达式2
        console.log(123 || 456); // 123
        console.log(123 || 456 || 4231 * 222); // 123
        console.log(0 || 456 || 124 + 222); // 456   根据表达式1与表达式2  1为假 所以返回2   而2再比3  2为真 所以还是返回2
        !!! 逻辑中断很重要  它会影响我们程序运行的结果
        var num = 0;
        console.log(123 || num++); //表达式1是真 则返回表达式1 所以num++ 不运行, 所以num没变 还是0 
        console.log(num); // 0
    </script>

6.0 赋值运算符

概念:用来把数据赋值给变量的运算符(= 、+=、-=、*=、/=、%=)

        var num1 = 5;
        num1 += 5; //10
        console.log(num1);
        
        var num2 = 5;
        num2 *= 2; //10 
        console.log(num2);
        
        var num3 = 5;
        num3 %= 5; //0
        console.log(num3);

7.0 运算符优先级

从高到低排序:

		()
		++-- ;!
		先 * /+ -
		>=  <=
		==  !=  ===  !==&&||
		=
		,

** 流程控制**

流程控制主要有三种结构,分别是顺序结构分支结构循环结构,这三种结构代表三种代码执行的顺序。

1.0 顺序结构

顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,**程序会按照代码的先后顺序,依次执行,**程序中大多数的代码都是这样执行的。

2.0 分支结构

由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果。

JS 语言提供了两种分支结构语句

  1. if 语句
  2. switch 语句

2.1 if 语句

		if() {}
		if() {} else {}
		if() {} else if() {} else{}

2.2 三元表达式

三元表达式也能做一些简单的条件选择。 有三元运算符组成的式子称为三元表达式
类似于 if else (双分支) 的简写

    <script>
        //如果条件表达式结果为真  则返回 表达式1  如果条件表达式结果为假 则返回表达式2的值
        var num = 10;
        var result = num > 5 ? '是的' : '不是';
        console.log(result);
    </script>

2.3 switch 语句

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。
break 结束分支流程

        // 执行思路, 利用我们的表达式的值  和  case 后面的选项值相匹配 如果匹配上 ,
        // 就执行该 case 里面的语句, 如果都没匹配上  那么执行 default 里面的语句。
        var num = 2;
        switch (num) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            default:
                console.log('以上结果都不是');
        }

语法结构:

  1. switch :开关 转换 , case :小例子 选项
  2. 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量
  3. 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号
  4. switch 表达式的值会与结构中的 case 的值做比较
  5. 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束
  6. 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码

注意: 执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。

2. 总结:switch 语句和 if else if 语句的区别

  1. 一般情况下,它们两个语句可以相互替换
  2. switch…case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)
  3. switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得判断多少次。
  4. 当分支比较少时,if… else语句的执行效率比 switch语句高。 ⑤ 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。