在JavaScript中,要完成各种各样的运算,是离不开运算符的。运算符用于将一个或几个值进行运算,从而得出所需要的结果值。就像我们的数学,也需要加减乘除这些运算符才可以运算。不过对于JavaScript来说,我们需要遵循计算机语言运算的一套方法。

在JavaScript中,运算符指的是“变量”或“值”进行运算操作的符号。其中,常见的运算符有以下5种。

    一、算术运算符

    在JavaScript中,算术运算符一般用于实现“数学”运算,包括加、减、乘、除等,如下表所示。

    算术运算符
    运算符 说明 举例
    + 10+5 //返回15
    10-5 //返回5
    * 10*5 //返回50
    / 10/5 //返回2
    % 求余 10%4 //返回2
    ++ 自增 var i=10;i++; //返回11
    – – 自减 var i=10;i– –; //返回9

    在JavaScript中,乘号是星号(*),而不是×,除号是斜杠(/),而不是÷,所以小伙伴们不要搞混了。为什么要这样定义呢?这是因为JavaScript这门语言的开发者,是希望尽量使用键盘已有的符号来表示这些运算符。大家好好看看自己的键盘就明白了。

    对于算术运算符,我们需要重点掌握这3种:加法运算符、自增运算符、自减运算符。

    1.加法运算符

    在JavaScript中,加法运算符并非想象中那么简单,我们需要注意3点。

    数字 + 数字 = 数字 字符串 + 字符串 = 字符串 字符串 + 数字 = 字符串

    也就是说,当一个数字加上另外一个数字时,运算规则跟数学上的相加一样,例如:

    var num = 10 + 5; //num的值为15

    当一个字符串加上另外一个字符串时,运算规则是将两个字符串连接起来,例如:

    var str = "从0到1" + "系列图书"; //str的值为"从0到1系列图书"

    当一个字符串加上一个数字时,JavaScript会将数字变成字符串,然后再连接起来,例如:

    var str = "今年是" + 2018 //str的值为"今年是2018"(这是一个字符串)

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var a = 10 + 5; var b = "从0到1" + "系列图书"; var c = "今年是" + 2018; document.write(a + "<br/>" + b + "<br/>" + c); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    在这个例子中,可能有些小伙伴不太懂

    document.write(a + "\<br/\>" + b + "\<br/\>" +c);

    这一句代码是什么意思。实际上,这一句代码可以等价于:

    document.write("15\<br/\>从0到1系列图书\<br/\>今年是2018");

    小伙伴们好好根据上面加法运算符的3个规则,就会觉得很简单了。以后呢,如果你想往字符串里面塞点东西,就应该用加号连接,然后用英文引号断开来处理,这是经常使用的一个技巧,这个技巧也叫“字符串拼接”。

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var str = "2018" + 1000; document.write(str); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    "2018"是一个字符串,而不是数字,大家不要被表象给蒙蔽了双眼啦!

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var a = 10; var b = 4; var n1 = a + b; var n2 = a - b; var n3 = a * b; var n4 = a / b; var n5 = a % b; document.write("a+b=" + n1 + "<br/>"); document.write("a-b=" + n2 + "<br/>"); document.write("a*b=" + n3 + "<br/>"); document.write("a/b=" + n4 + "<br/>"); document.write("a%b=" + n5 ); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    注意,“a+b=”、“a-b=”、"a*b="等这些由于加上了英文双引号,所以都是字符串。

    2. 自增运算符

    双加号(++)是自增运算符,表示在“原来的值”的基础上再加上1。i++等价于i=i+1自增运算符有以下两种情况。

    (1)i++

    i++指的是在使用i之后,再让i的值加上1。

    例如:

    i=1; j=i++;

    上面这段代码等价于:

    i=1; j=i; i=i+1;

    因此,上面执行的结果是:i=2,j=1。

    (2)++i

    “++i”指的是在使用i之前,先让i的值加上1。例如:

    i=1; j=++i;

    上面这段代码等价于:

    i=1; i=i+1; //i=1+1,也就是i=2了 j=i; //由于此时i的值变为2了,所以j为2

    因此,上面执行的结果是:i=2,j=2。

    对于j=++i和j=i++,小伙伴们一定要分清楚。可以这样简单记忆:++在i的左边(前面),就是先使用i=i+1,而后使用j=i;++在i的右边(后面),就是后使用i=i+1,而先使用j=i。i=i+1的使用位置,是根据++的使用位置来决定的。

    3.自减运算符

    双减号(- -)是自减运算符,表示在“原来的值”的基础上再减去1。i- -等价于i=i-1。自减运算符同样也有以下两种情况。

    (1)i- -

    “i- -”指的是在使用i之后,再让i的值减去1。例如:

    i=1; j=i- -;

    上面这段代码等价于:

    i=1; j=i; i=i-1;

    因此,上面执行的结果是:i=0,j=1。

    (2)- -i

    “- -i”指的是在使用i之前,先让i的值减去1。

    例如:

    i=1; j=--i;

    上面这段代码等价于:

    i=1; i=i-1; //i=1-1,也就是i=0了 j=i; //由于此时i的值变为0了,所以j为0

    因此,上面执行的结果是:i=0,j=0。

    “- -”与“++”使用方法是一样的,大家可以对比理解一下。

    二、赋值运算符

    在JavaScript中,赋值运算符用于将右边表达式的值保存到左边的变量中去,如下表所示。

    赋值运算符
    运算符 举例
    = var str=“绿叶学习网”
    += var a+=b等价于var a=a+b
    -= var a-=b等价于var a=a-b
    *= var a*=b等价于var a=a*b
    /= var a/=b等价于var a=a/b

    上面我们只是列举了常用的赋值运算符,对于不常用的就不列出来了,以免增加小伙伴们的记忆负担。在这本书中,我们都是采用这种方式:不常用的不会啰嗦,重要的则会反复强调。

    var a+=b;其实就是var a=a+b;的简化形式,+=、-=、*=、/=这几个运算符其实就是为了简化代码而出现的,大多数有经验的开发人员都喜欢用这种简写形式。对于初学者来说,我们还是要熟悉一下这种写法,以免看不懂别人的代码。

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var a = 10; var b = 5; a += b; b += a; document.write("a的值是" + a + "<br/>b的值是" + b); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    首先我们初始化了变量a的值为10,变量b的值为5。当执行a+=b后,此时a的值为15(10+5),b的值没有变化,依旧是5。

    由于程序是从上而下地执行的,当执行b+=a;时,由于之前a的值已经变为15了,因此执行后,a的值为15,b的值为20(15+5)。

    这里小伙伴们要知道一点:a和b都是变量,它们的值是会随着程序的执行而变化的。

    三、比较运算符

    在JavaScript中,比较运算符用于将运算符两边的值或表达式进行比较,如果比较结果是对的,则返回true;如果比较结果是错的,则返回false。true和false是布尔值,前面我们已经介绍了。比较运算符如下表所示。

    比较运算符
    运算符 说明 举例
    > 大于 2>1   //返回true
    < 小于 2<1    //返回false
    >= 大于等于 2>=2   //返回true
    <= 小于等于 2<=2   //返回true
    == 等于 1==2   //返回false
    != 不等于 1!=2    //返回true

    等号(=)是赋值运算符,用于将右边的值赋值给左边的变量。双等号(==)是比较运算符,用于比较左右两边的值是否相等。如果想要比较两个值是否相等,写成a=b是错误的,正确写法应该是a==b。很多初学者都会犯这个低级错误,这个坑已经给大家指出来了,以后就不要再勇敢地往前踩了啊。

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var a = 10; var b = 5; var n1 = (a > b); var n2 = (a == b); var n3 = (a != b); document.write("10>5:" + n1 + "<br/>"); document.write("10==5:" + n2 + "<br/>"); document.write("10!=5:" + n3); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    对于一条语句,都是先运算右边,然后再将右边结果赋值给左边变量。

    四、逻辑运算符

    在JavaScript中,逻辑运算符用于执行“布尔值的运算”,它常常和比较运算符结合在一起使用。常见逻辑运算符有3种,如下表所示。

    逻辑运算符
    运算符 说明
    && “与”运算
    || “或”运算
    ! “非”运算

    1.“与”运算

    在JavaScript中,与运算用双与号(&&)表示。如果双与号(&&)两边的值都为true,则结果返回true;如果有一个为false或者两个都为false,则结果返回false。

    真&&真 → 真 真&&假 → 假 假&&真 → 假 假&&假 → 假

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var a = 10; var b = 5; var c = 5; var n = (a < b) && (b == c); document.write(n); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    var n = (a < b) && (b == c);等价于var n = (10 < 5) && (5 == 5);,由于(10 <5)返回结果为false而(5==5)返回结果为true,所以var n = (a < b) && (b == c);最终等价于var n = false&&true;。根据与运算的规则,n最终的值为false。

    2、“或”运算

    在JavaScript中,或运算用双竖杠(||)表示。如果双竖杠(||)两边的值都为false,则结果返回false;如果有一个为true或者两个都为true,则结果返回true。

    真||真 → 真 真||假 → 真 假||真 → 真 假||假 → 假

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var a = 10; var b = 5; var c = 5; var n = (a < b) || (b == c); document.write(n); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    var n = (a < b) ||(b == c);等价于var n = (10 < 5) || (5 == 5);,由于(10 < 5)返回结果为false而(5==5)返回结果为true,所以var n = (a < b) || (b == c);最终等价于var n = false||true;。根据或运算的规则,n最终的值为true。

    3、“非”运算

    在JavaScript中,非运算用英文叹号(!)表示。非运算跟与运算、或运算不太一样,非运算操作的对象只有一个。当英文叹号(!)右边的值为true时,最终结果为false;当英文叹号(!)右边的值为false时,最终结果为true。

    !真 → 假 !假 → 真

    这个其实就是很简单的啦,直接取反就行。这家伙就是专门跟你唱反调的。

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var a = 10; var b = 5; var c = 5; var n = !(a < b) && !(b == c); document.write(n); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    var n = !(a < b) && !(b == c);等价于var n =!(10 < 5) && !(5 == 5);,也就是var n = !false&&!true;。由于!false的值为true,!true的值为false。因此最终等价于var n = true&&false;,也就是false。

    当我们把var n = !(a < b) && !(b ==c);这句代码中的&&换成||后,返回结果为true,小伙伴们可以自行测试一下。此外,我们也不要被这些看起来复杂的运算吓到了。实际上,再复杂的运算,一步一步来,也是非常简单的。

    对于与运算、或运算和非运算,我们可以总结出以下5点。

    • (1)true的!为false,false的!为true。
    • (2)a&&b:a、b全为true时,结果为true,否则结果为false。
    • (3)a||b:a、b全为false时,结果为false,否则结果为true。
    • (4)a&&b:系统会先判断a,再判断b。如果a为false,则系统不会再去判断b。
    • (5)a||b:系统会先判断a,再判断b。如果a是true,则系统不会再去判断b。

    最后的两条是非常有用的技巧,在后续学习中我们经常会碰到,这里简单认识一下即可。

    五、条件运算符

    除了上面这些常用的运算符,JavaScript还为我们提供了一种特殊的运算符:条件运算符。条件运算符,也叫“三目运算符”。在JavaScript中,条件运算符用英文问号(?)表示。

    语法:

    var a = 条件 ? 表达式1 : 表达式2;

    说明:

    当条件为true时,我们选择的是“表达式1”,也就是“var a=表达式1”;当条件为false时,我们选择的是“表达式2”,也就是“var a=表达式2”。注意,a只是一个变量名,这个变量名可以换成你自己想要的名字。

    条件运算符其实是很简单的,也就是“二选一”。就好比有两个女生在你面前,也许你都喜欢,但是无奈最终只能选择其中一个做女朋友。

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var result = (2 > 1) ? "小芳" : "小美"; document.write(result); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    由于条件(2>1)返回true,所以最终选择的是“小芳”。