jilingxf

爱前端公开课学习笔记——JS03 运算符

运算符的概述和加减运算课程丢失

乘法*  除法/

直接在控制台中演示

主要是不要省略乘号

image

  • 字符串不能进行乘除法运算

image

  • 布尔型可以进行乘除法运算 false: 0 true: 1

image

  • 乘除法的优先级相同,比加减法优先级高(加减法优先级相同)

image

  • 如果要提升优先级,使用小括号,(略)

注意  非0/0= NaN , 0/0 = Infinity

image



乘方  Math.pow

Math.pow(2,3);    //2*2*2

image

Math是JS的内置对象,里面蕴含很多的数学运算。

开方

Math.sqrt

image


案例1 数学算式转换为JS的写法:

image

注意口号不要写岔了

image

另外主要math的首字母大写,否则报错

image


取余运算 %

优先级与乘除相同


自增运算符 ++ --

a ++ 与a =  a + 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a =3;
        a++;
        console.log(a);
    </script>
</body>
</html>

得到4

image

但是直接console.log(a++) 却不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a =3;
        //a++;
        //console.log(a);
        console.log(a++);
    </script>
</body>
</html>

此时 输出

image

这是由于a++,执行console.log(a) 再做a++

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a =3;
        //a++;
        //console.log(a);
        console.log(a++);
        console.log(a);
    </script>
</body>
</html>

第15行a = 15

image

注意下列代码的输出:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = 3;
        var b = a++;
        //a++;
        //console.log(a);
        //console.log(a++);
        console.log(a);
        console.log(b);
    </script>
</body>
</html>


此时a= 4,b= 3,b = a++时,先b = a 在a++

为了解决这个不方便,可以把++前置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = 3;
        var b = ++a;
        console.log(a);
        console.log(b);
    </script>
</body>
</html>


image

l


逻辑运算符

!非

&& 与 都真才真

|| 或 有真才真

注意:

非0为真

字符串不为空就是真

image                 image  


短路运算

5 && 13   //13

都真才真,5已经真了,所以后边的13是结果,13真才真 13是表达式的结果


0 || 13   //0

0已经是假了,0 是结果


5 || 13   //5

5已经是真了,不用看13


0 || 13   //13

0 是假,要看13 13是结果

posted on 2022-05-09 13:38  jilingxf  阅读(27)  评论(0编辑  收藏  举报

导航