JavaScript中的运算符（第3节）


‌JavaScript中的运算符与Python中的运算符在某些方面有很多相似之处。在JavaScript中，常见的运算符包括：算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符（三元运算符）等。

1、算术运算符

算术运算符是用来完成基本的算术运算的，‌JavaScript中标准的算术运算符包括：加法（+）、减法（-）、乘法（*）和除法（/）。除了这些标准的算术运算符，JavaScript还提供了更复杂的算术运算符包括：取模（%）、幂运算（**）、递增（++）、递减（--）。常见的算术运算符如下表所示：

运算符 描述 用法举例 结果
+ 加：对两个对象进行相加运算 2 + 3 5
- 减：一个数减去另一个数 5 - 2 3
/ 除：一个数除以另外一个数 8 / 4 2
* 乘：两个数相乘 2 * 3 6
% 取模除：返回两个数相除的余数 12 % 5 2
** 幂运算：计算底数的指数次方 3 ** 2 9
++ 递增（前置）：将操作数的值加一，返回加一后的值 a = 2; b = ++a; a = 3; b = 3;
++ 递增（后置）：将操作数的值加一，返回操作数原值，然后再将操作数加一 a = 2; b = a++; a = 3; b = 2;
-- 递减（前置）：将操作数的值减一，返回减一后的值 a = 2; b = --a; a = 1; b = 1;
-- 递减（后置）：将操作数的值减一，返回操作数原值，然后再将操作数减一 a = 2; b = a--; a = 1; b = 2;

以下是一些算术运算符的示例代码：

动手练一练：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>算术运算符示例</title>
</head>
<body>
    <body>
        <script>
            let a = 10;
            let b = 2;
            let sum = a + b; // 加法
            let difference = a - b; // 减法
            let product = a * b; // 乘法
            let quotient = a / b; // 除法
            let remainder = a % b; // 取模
            let power = a ** b; // 幂运算
            console.log(sum); // 输出 12
            console.log(difference); // 输出 8
            console.log(product); // 输出 20
            console.log(quotient); // 输出 5
            console.log(remainder); // 输出 0
            console.log(power); // 输出 100
            let a1 = 2
            let b1 = ++a1;
            console.log("a1="+a1, "b1="+b1); // 输出 a1=3 b1=3
            let a2 = 2
            let b2 = a2++;
            console.log("a2="+a2, "b2="+b2); // 输出 a2=3 b2=2
            let a3 = 2
            let b3 = --a3;
            console.log("a3="+a3, "b3="+b3); // 输出 a3=1 b3=1
            let a4 = 2
            let b4 = a4--;
            console.log("a4="+a4, "b4="+b4); // 输出 a4=1 b4=2
        </script>
    </body>
</html>

通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：

12
8
20
5
0
100
a1=3 b1=3
a2=3 b2=2
a3=1 b3=1
a4=1 b4=2

2、赋值运算符

赋值运算符用于将运算符右边的值赋给左边的变量。比如a = b，就是将b的值赋给a。JavaScript中还有一些复合赋值操作符，如下表所示：

运算符 名字 简写的运算符 含义 示例 结果
= 赋值 x = y x = y a=3,b=2; a=3;b=2;
+= 加并赋值 x += y x = x + y a=3,b=2;a+=b; a=5;b=2;
+= 字符串拼接并赋值 x += y x = x + y a= 'abc';a+= 'def'; a= 'abcdef';
-= 减并赋值 x -= y x = x - y a=3,b=2;a-= b; a=1;b=2;
*= 乘并赋值 x *= y x = x * y a=3,b=2;a*= b; a=6;b=2;
/= 除并赋值 x /= y x = x / y a=3,b=2;a/= b; a= 1.5:b=2;
%= 取模并赋值 x %= y x = x % y a=3,b=2;a%= b; a=1;b=2;
**= 幂运算并赋值 x **= y x = x ** y a=3;a**=2; a=9

以下是一些赋值运算符的示例代码：

动手练一练：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>赋值运算符示例</title>
</head>
<body>
    <body>
        <script>
            let a = 5; // 赋值
            console.log(a += 5); // 加法赋值，相当于 a = a + 5; 输出 10
            let b = 5; // 赋值
            console.log(b -= 3); // 减法赋值，相当于 b = b - 3; 输出 2
            let c = 5; // 赋值
            console.log(c *= 2); // 乘法赋值，相当于 c = c * 2; 输出 10
            let d = 5; // 赋值
            console.log(d /= 2); // 除法赋值，相当于 d = d / 2; 输出 2.5
            let e = 5; // 赋值
            console.log(e %= 3); // 取模赋值，相当于 e = e % 3; 输出 2
            let f = 5; // 赋值
            console.log(f **= 2); // 幂赋值，相当于 f = f ** 2; 输出 25
        </script>
    </body>
</html>

通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：

10
2
10
2.5
2
25

3、比较运算符

比较运算符用于对两个数据进行比较，返回一个比较结果的布尔值“true”或者“false”。常见的比较运算符如下表所示：

运算符 描述 示例 结果
> 大于：左边的操作数大于右边的操作数返回true 6>3 true
< 小于：左边的操作数小于右边的操作数返回true 6<3 false
>= 大于或等于：左边的操作数大于或等于右边的操作数返回true 6>=3 true
<= 小于或等于：左边的操作数小于或等于右边的操作数返回true 6<=3 false
== 等于：如果两边操作数相等时返回true 6==3 false
=== 全等：两边操作数相等且类型相同时返回true 6===6 true
!= 不等于：如果两边操作数不相等时返回true 6!=3 true
!== 不全等：两边操作数不相等或类型不同时返回true 6!==6 false

以下是一些比较运算符的示例代码：

动手练一练：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>比较运算符示例</title>
</head>
<body>
    <body>
        <script>
            let x = 6;
            let y = 3;
            console.log(x == y); // 等于; 输出 false
            console.log(x === y); // 严格等于; 输出 false
            console.log(x != y); // 不等于; 输出 true
            console.log(x !== y); // 严格不等于; 输出 true
            console.log(x > y); // 大于; 输出 true
            console.log(x < y); // 小于; 输出 false
            console.log(x >= y); // 大于或等于; 输出 true
            console.log(x <= y); // 小于或等于; 输出 false
        </script>
    </body>
</html>

通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：

false
false
true
true
true
false
true
false

4、逻辑运算符

逻辑运算符用于条件判断，JavaScript中常见的逻辑运算符如下表所示：

运算符 描述 示例 结果
&& 与 a&&b 当a和b都为true时，返回true；否则返回false
|| 或 a||b 当a和b任何一个数为true时，则返回true；如果a和b都是false则返回false
! 非 !a 当a为true时，则!a结果为false；相反，当a为false时，则!a结果为true

以下是一些逻辑运算符的示例代码：

动手练一练：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符示例</title>
</head>
<body>
    <body>
        <script>
            // 逻辑“与” 
            console.log(true && true); // 输出：true
            console.log(false && true); // 输出：false 
            console.log(2 > 1 && 3 > 1); // 输出：true
            console.log(2 > 3 && 3 > 1); // 输出：false
            // 逻辑“或” 
            console.log(false || true); // 输出：true
            console.log(false || false); // 输出：false
            console.log(6 > 3 || 3 < 2); // 输出：true
            console.log(6 < 3 || 3 < 2); // 输出：false
            // 逻辑“非” 
            console.log(!(2 > 1)); // 输出：false
            console.log(!(2 < 1)); // 输出：true
        </script>
    </body>
</html>

通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：

true
false
true
false
true
false
true
false
false
true

5、条件运算符（三元运算符）：

条件运算符（三元运算符）也称为三元表达式，使用问号“?”和冒号“:”两个符号来连接。条件运算符运算的结果根据“?”前面给定的条件，来决定“?”后面的两个表达式哪个被执行。其语法格式如下所示：

条件表达式 ? 表达式1 : 表达式2

如果条件表达式的值为true，则返回“表达式1”的执行结果。如果条件表达式的值为false，则返回“表达式2”的执行结果。例如：

动手练一练：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>条件运算符示例</title>
</head>
<body>
    <body>
        <script>
            let age = 20; 
            let status = age >= 18 ? '已成年' : '未成年'; 
            console.log(status); // 输出 已成年
            let score = 50;
            let grade = score >= 60 ? '及格' : '不及格';
            console.log(grade); // 输出 不及格
        </script>
    </body>
</html>

通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：

已成年
不及格

上面的例子中，首先声明变量age并赋值，再通过条件表达式判断变量age的值是否大于等于18，如果大于等于18，则输出“已成年”，否则输出“未成年”。

6、JavaScript中运算符的优先级

JavaScript的运算符是有优先级的 , 运算符优先级决定一个表达式中多个运算符的执行顺序。如果一个表达式中，有多个运算符，运算符优先级决定了哪个运算符首先与操作数结合。如果运算符优先级不同，则优先级较高的运算符比优先级较低的运算符先与操作数结合。如果运算符优先级相同，则根据运算符的结合性判定哪个先与操作数结合。

JavaScript中，小括号“()”优先级最高 , 可以直接改变运算符的结合性。所有算术运算符的优先级仅次于小括号。例如：

动手练一练：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>运算符的优先级</title>
</head>
<body>
    <body>
        <script>
            let a = 2;
            let b = 3;
            let c = 4;
            console.log(a + b * c); // 乘法和除法的优先级较高，先执行乘法，输出：14
            console.log((a + b) * c); // 使用括号改变运算顺序，输出：20
            console.log("a加b的结果不是："+ a + b); // 输出 a加b的结果不是：23
            console.log("a加b的结果是："+ (a + b)); // 输出 a加b的结果是：5
        </script>
    </body>
</html>

通过浏览器执行以上代码，我们按F12键打开浏览器的控制台，可以看到输出结果为：

14
20
a加b的结果不是：23
 a加b的结果是：5

上面的例子中，小括号“()”的优先级高于其它算术运算符。注意，如果想在console.log()输出过程中想要优先使用表达式计算，就必须使用小括号。