运算符+分支语句+循环语句（for&while）

不要图透
412 阅读8分钟

运算符

1、算数运算符

含义：

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

作用：

实现数字之间的数学计算。

常见属性：

+：求和；

-：求差；

*：求积；

/：求商；

%：取余，主要用来判断某个数字是否能被整除。

使用方法：

let a, b, c;
        a = 100;
        b = 100;
        c = a + b;
        alert(c);//200

注意：

算数运算符有优先级顺序：

  1. 乘、除、取余优先级相同；
  2. 加、减优先级相同；
  3. 乘、除、取余优先级大于加、减；
  4. 使用 () 可以提升优先级；
  5. 总结： 先乘除后加减，有括号先算括号里面的。

2、赋值运算符-进阶

含义：

对变量进行赋值的运算符，相当于常规运算符‘=’的进阶；

例：（num3 += 1;和num3 = num3 + 1;）它俩是一样的。

属性：

+=；

-=；

*=；

/=；

%=。

作用&使用方法：

作用：简化代码；

例如：

<script>

        /* 使用常规赋值运算符‘=’给变量进行加1操作 */
        let num2 = 1;
        num2 = num2 + 1;
        console.log(num2);//2


        /* 使用改进后的赋值运算符‘+=’给变量进行加1操作 */
        let num3 = 1;
        num3 +=  1;//和num3 = num3 + 1;一样
        console.log(num3);//2
        
    </script>

优点：

使用这些运算符可以在对变量赋值时进行快速操作，使代码更简洁。

3、一元运算符

含义：

正负号、自增、自减都是一元运算符（这里主要讲自增或自减），

自增或自减只会自增’ 1 ‘或自减’ 1 ‘；

例： ‘i++‘，i++=i+1。

作用&使用方法：

作用：简化代码；

例如：

<script>

        /* 常规的加1操作 */
        let num2 = 1;
        num2 = num2 + 1;
        console.log(num2);//2


        /* 使用自增自减的加1操作 */
        let num3 = 1;
        num3++;
        console.log(num3);//2

    </script>

-----（一般用于循环语句中）

属性：

后置自增：i++、i--;

前置自增：++i、--i。

注意：

后置自增和前置自增存在区别：

  1. 它两单独存在时，执行结果是一样的；

  2. 但，当它们处在一个表达式或语句里，它两的结果就存在区别；例：‘i++’是先执行表达式或语句，再执行自增加1 的操作；而‘++i’是先执行自增加1的操作，然后再执行表达式或语句，代码如下：

    <script>
    
        /* i++ */
        let a = 1, sum1 = 1;
        sum1 = sum1 + (a++);//a先进行计算，再自增 加1
        console.log(sum1);//2


        /* ++i */
        let b = 1, sum2 = 1;
        sum2 = sum2 + (++b);//b先自增 加1，再进行计算
        console.log(sum2);//3

    </script>

优点：

使变量加1或减1的代码更简洁。

缺点：

自增或自减只会自增’ 1 ‘或自减’ 1 ‘。

4、比较运算符

含义：

对两个数据进行比较，比较结果为boolean类型,返回值为true或false。

属性：

'>'： 左边是否大于右边;

'<'： 左边是否小于右边;

'>='： 左边是否大于或等于右边;

'<='： 左边是否小于或等于右边;

'=='： 左右两边是否相等,将两边的数据进行转换为数字类型进行比较;

'==='： 左右两边是否类型和值都相等;

'!='：左右两边是否不相等,将两边的数据进行转换为数字类型进行比较;

'!=='： 左右两边是否不全等。

= 和 == 和 === 怎么区别？

= 是赋值； == 是判断 只要求值相等，不要求数据类型一样，即可返回true； === 是全等 要求值和数据类型都一样返回的才是true。 ------开发中，请使用 ===

使用方法：

<script>

        let i = 1, u = 2;
        alert(i < u);//true
        alert(i > u);//false

    </script>

注意：

1、字符串的比较，是比较字符对应的ASCII码；

  1. 从左往右依次比较；

  2. 如果第一位一样再比较第二位，以此类推；

image-20220329180026519.png

2、NaN不等于任何值，包括它本身；

3、尽量不要比较小数，因为小数有精度问题；

4、不同类型之间比较会发生隐式转换，

  1. 最终把数据隐式转换转成number类型再比较；
  2. 所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

5、逻辑运算符

作用：

解决由多个条件共同判断的问题。

属性：

image-20220329181957446.png

使用方法：

image-20220329182039227.png

注意：

  1. 逻辑运算符的最终运算结果是最后执行表达式的值；
  2. undefined、null、0、” “、false、NaN：转为布尔类型，值为false；

拓展：

逻辑运算符里的短路：

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行；

image-20220329183155620.png

image-20220329182039227.png

原因：
  1. 通过左边能得到整个式子的结果，因此没必要再判断右边；
运算结果：
  1. 无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

6、运算符优先级

image-20220329183818746.png

注意：

  1. 一元运算符里面的逻辑非优先级最高。

语句

程序三大流程控制语句：

image-20220401092552368.png

表达式和语句

介绍：

表达式： 是一组代码的集合，JS解释器会将其计算出一个结果。

语句： JS整句或命令，JS语句是以分号结束（可以省略），比如：if语句；for循环语句。

两者区别：

语句是可以单独执行的、能够产生实际效果的代码；而表达式则是包含在语句中，根据某种条件计算出一个值或得出某种结果，然后由语句去判断和处理的代码。

例如：a=1,这就是一个语句，目的是把1赋值给变量a，执行这条语句后，a的值就变为1，而不管它原来是什么值； if a == 1 then … 这里的a=1则是一个表达式，它本身并不会产生任何动作，而只是把变量a的值和1进行比较，然后把比较结果交给if语句去处理。

-----其实某些情况，也可以把表达式理解为语句，因为它是在计算结果，也是做事 。

分支语句

含义： 有的时候要根据条件选择执行代码，这种就叫分支结构。

if分支语句

单分支if语句
含义：

处理单一判断，当满足条件，执行if里面的内容，如果不满足，则跳过if语句。

语法：
if(条件){
            满足条件要执行的代码;
        }

小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型。

问：假如我有满足if条件执行一种代码，不满足if条件执行另一种代码的需求，我能利用单if语句来实现吗？

答：不能，因为单if语句虽然满足条件会有一种代码，但是，它还是会继续向下执行另一种代码，那就达不到要求，但是双分支if语句可以做到。

图解：

image-20220329220746049.png

双分支if else语句
含义：

它比单if语句多了else语句，表示意思为，当不满足if的条件，则执行else里的内容。通俗的讲，如果不执行if语句，就执行else语句；执行if语句，就不执行else语句。

作用：

解决了两种条件，两种代码的需要。

语法：
 if(条件){
            满足条件要执行的代码;
        }
 else{
            不满足条件执行的代码;
        }
缺点：

不能满足多个条件，多种代码的需要。

多分支if语句

作用：

解决了多种条件，多种代码的需要。

语法：

 if(条件1){
            代码1;
        }else if(条件2){
            代码2;
        }else if(条件3){
            代码3;
        }else{
            代码n;
        }

image-20220329222003921.png

例子：

12点以前， 输出上午好； 18点以前， 输出下午好； 20点以前， 输出晚上好。

image-20220329222356266.png

三元运算符

介绍：

其实是比 if 双分支 更简单的写法，有时候也叫做三元表达式。

语法：

image-20220329222702495.png

作用：

一般用来取值。

循环语句

断点调试

含义：

在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来。

image-20220329223057574.png

作用：

学习时可以帮助更好的理解代码运行，工作时可以更快找到bug。

使用步骤：

浏览器打开调试界面

  1. 按F12打开开发者工具；
  2. 点到sources一栏；
  3. 选择代码文件；
  4. 选择断点；
  5. 运行代码；
  6. 查看结果。

while循环

含义：

满足条件，重复执行代码。

释义：

跟if语句很像，都要满足小括号里的条件为true才会进入执行代码； 但while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出。

语法：
while (循环条件) {
            要重复执行的代码(循环体);
        }
while 循环注意事项:

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。所以，循环需要具备三要素：

image-20220329223821707.png

for循环

含义：

满足条件，重复执行代码。

语法：
for(声明记录循环次数的变量; 循环条件 ; 变化值){
            循环体;
        }
优点：

把声明起始值、循环条件、变化值写到一起，让人一目了然

for循环和while循环有什么区别呢：

当如果明确了循环的次数的时候推荐使用for循环； 当不明确循环的次数的时候推荐使用while循环

退出循环

continue
含义：

结束本次循环，继续下次循环。

break
含义：

跳出所在的循环。

循环嵌套

含义：

一个循环里再套一个循环，一般用在for循环里；

语法：

image-20220329224815622.png

总结

[思维导图](js基础知识 ProcessOn Mind)

avatar
文章
阅读
粉丝