JavaScript中的运算符LOGIN

JavaScript中的运算符

JS运算符

要进行各种各样的运算,就要使用不同的运算符号。


算术运算符:+、-、*、/、%、++、--

A = 10 + 20;

A = 10 – 20;

A = 10 * 20;

A = 10 / 20;

(1)“%”取余运算符,两个数相除,取余数。

A = 10 % 3;  // A = 1,如果余数不为0,则两个不能整除

A = 10 % 2;  // A = 0,如果余数为0,则两个数能除尽


(2)“++”加1运算符、自加1

“++”可以作前缀(++i),也可以作后缀(i++)。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
           var a = 1;
           var b = 1;
           document.write(++a);
           document.write("<hr>")
           document.write(b++);
        </script>
    </head>
    <body>
    </body>
</html>

观察上面例子的输出结果

  • 当++a时,无论如何,都会先执行a=a+1,然后执行输出其它操作,如在页面输出、运算之类的

  • 当b++时,会先执行其它操作,如输出、运算之类的,最后等这条语句结束时,执行a=a+1,然后这条语句结束

(3)“--”减1运算符,自减1

“--”可以作前缀(--i),也可以作后缀(i--)。

“--”的例了与“++”例子一样,请大家自己尝试进行测试。


赋值运算符:=、+=、-=、*=、/=

“+=”先加后等。如:a += 10  //展开后  a = a + 10

“-=”先减后等。如:a -= 10   //展开后  a = a - 10

“*=”先乘后等。如:a *= 10  //展开后  a = a * 10

“/=”先除后等。如:a /= 10   //展开后  a = a / 10


字符串运算符:+、+=

字符串只能进行“连接”运算,不能进行其它运算。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
           var name = "php.cn";
           var str = "欢迎来到"+name;
           document.write(str);
        </script>
    </head>
    <body>
    </body>
</html>

比较运算符:>、<、>=、<=、==、!=、===、!==

比较运算符的运算结果是布尔值(true或false)。

A = 10 > 20;       // 结果A=false

A = 20>=20;       // 结果A=true

A = 10%2 == 0;    // 结果A=true

A = 10%2 == “0”;  // 结果A=true

A = 10%3 != 0;    // 结果A=true

A = 10%2 === “0”;  //结果A=false

注:

“=”是赋值号。如:a = 10

“==”等于。只比较两个变量的值,而不管类型。只要值一样,就返回true,否则返回false。

“===”全等于。既比较变量,也判断类型。如果类型和值都一样,返回true,否则返回false。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        //比较字符串数值和数值
           var name1 = "520";
           var name2 = 520;
        document.write(name1==name2);
        document.write("<hr>");
        document.write(name1===name2)
        </script>
    </head>
    <body>
    </body>
</html>


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

逻辑运算符的运算结果有两个true或false。

“&&”逻辑与(并且关系)。如果左右两个操作数都为true,则结果为true,否则,结果为false。

逻辑与,就是两个条件同时满足时,则结果为true。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        //给一个成绩
        var score=61;
        //判断成绩所属级别
        if(score<60){
            document.write("对不起,您没有及格");
        }else if (score>=60&&score<70){
            document.write("您刚好及格");
        }
        </script>
    </head>
    <body>
    </body>
</html>

“||”逻辑或。左右两个条件,只要有一个满足,则返回true,否则,返回false。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        var age=79;
        if(age<10||age>60){
            document.write("您好,您符合我们店的优惠条件,今天买东西全场5折");
        }else if (age>=10&&age<=60){
            document.write("不好意思,您不符合我们店的优惠条件,今天买东西不享受折扣");
        }
        </script>
    </head>
    <body>
    </body>
</html>

“!”取反运算。!true = false  、   !false = true  、 !100 = false

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        var a=true;
        document.write(a);
        document.write("<br/>");
        document.write(!a);
        </script>
    </head>
    <body>
    </body>
</html>

三元运算符:?:

所谓“三元运算符”就是指三个操作数。

语法:条件表达式 ? 结果1 : 结果2

语法:操作数1 ? 操作数2 : 操作数3

含义:如果条件为true,则执行“结果1”的代码;如果条件为false,则执行“结果2”的代码。

其实:三元运算符,就是if else的变形形式。(if else我们下一章节学习)

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
        var a=10;
        var b=20;
        //判断a和b那个大,把大的那个赋值给max
        var max=a>b?a:b;
        document.write("最大值:"+max);
        </script>
    </head>
    <body>
    </body>
</html>


下一节
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script> var a = 1; var b = 1; document.write(++a); document.write("<hr>") document.write(b++); </script> </head> <body> </body> </html>
提交重置代码
章节课件