教程 > Javascript 教程 > Javascript 基础 阅读：42

Javascript 运算符

什么是运算符？

让我们用一个简单的表达式4 + 5 = 9 为例来简单说明一下。这里 4 和 5 被称为操作数，'+' 被称为操作符。JavaScript 支持以下类型的运算符。

  • 算术运算符
  • 比较运算符
  • 逻辑（或关系）运算符
  • 赋值运算符
  • 条件（或三元）运算符

让我们一一查看所有运算符。

算术运算符

JavaScript 支持以下算术运算符

假设变量 A 为 10，变量 B 为 20

序号 操作符 描述
1 + (加法) 添加两个操作数 例如： A + B 得 30
2 - (减法) 从第一个操作数中减去第二个操作数 例如： A - B 得 -10
3 * (乘) 将两个操作数相乘 例如： A * B 得 200
4 / (除) 分子除以分母 例如： B / A 得 2
5 % (模除) 输出整数除法的余数 例如： B % A 得 0
6 ++ (自增) 将整数值加一 例如： A++ 得到 11
7 -- (自减) 将整数值减一 例如： A-- 得到 9

注意- 加法运算符 (+) 适用于数字和字符串。例如“a”+ 10 将给出“a10”。

示例

以下代码展示了如何在 JavaScript 中使用算术运算符。

<html>
   <body>
   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var c = "Test";
            var linebreak = "<br />";
         
            document.write("a + b = ");
            result = a + b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a - b = ");
            result = a - b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a / b = ");
            result = a / b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a % b = ");
            result = a % b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a + b + c = ");
            result = a + b + c;
            document.write(result);
            document.write(linebreak);
         
            a = ++a;
            document.write("++a = ");
            result = ++a;
            document.write(result);
            document.write(linebreak);
         
            b = --b;
            document.write("--b = ");
            result = --b;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>
      
      将变量设置为不同的值，然后尝试运行
   </body>
</html>

尝试一下

上述代码执行之后，在界面上显示如下结果

输出
a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
将变量设置为不同的值，然后尝试运行

比较运算符

JavaScript 支持以下比较运算符

假设变量 A 为 10，变量 B 为 20

序号 操作符 描述
1 == (相等) 检查两个操作数的值是否相等，如果相等，则条件成立。 例如： (A == B) 不是真的。
2 != (不相等) 检查两个操作数的值是否相等，如果值不相等，则条件成立。 例如： (A != B) 是真的。
3 > (大于) 检查左操作数的值是否大于右操作数的值，如果是，则条件成立。 例如： (A > B) 不是真的。
4 < (小于) 检查左操作数的值是否小于右操作数的值，如果是，则条件成立。 例如： (A < B) 是真的。
5 >= (大于或等于) 检查左操作数的值是否大于或等于右操作数的值，如果是，则条件成立。 例如： (A >= B) 不是真的。
6 <= (小于或等于) 检查左操作数的值是否小于或等于右操作数的值，如果是，则条件成立。 例如： (A <= B) 是真的。

示例

以下代码展示了如何在 JavaScript 中使用比较运算符

<html>
   <body>  
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
      
            document.write("(a == b) => ");
            result = (a == b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a < b) => ");
            result = (a < b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a > b) => ");
            result = (a > b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a != b) => ");
            result = (a != b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a >= b) => ");
            result = (a >= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a <= b) => ");
            result = (a <= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      给变量设置不同的值，并且使用不同的运算符尝试一下
   </body>
</html>

尝试一下

上述代码执行会在界面上显示如下结果

(a == b) => false 
(a < b) => true 
(a > b) => false 
(a != b) => true 
(a >= b) => false 
a <= b) => true
给变量设置不同的值，并且使用不同的运算符尝试一下

逻辑运算符

JavaScript 支持以下逻辑运算符

假设变量 A 为 10，变量 B 为 20

序号 运算符 描述
1 && (逻辑与) 如果两个操作数都不为零，则条件为真。例如： (A && B) 为真。
2 || (逻辑或) 如果两个操作数中的任何一个不为零，则条件为真。 例如： (A || B) 是真的。
3 ! (逻辑非) 反转其操作数的逻辑状态。如果条件为真，则逻辑非运算符将使其为假。例如：!(A && B) 是假的。

示例

尝试以下代码以了解如何在 JavaScript 中实现逻辑运算符。

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = true;
            var b = false;
            var linebreak = "<br />";
      
            document.write("(a && b) => ");
            result = (a && b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a || b) => ");
            result = (a || b);
            document.write(result);
            document.write(linebreak);
         
            document.write("!(a && b) => ");
            result = (!(a && b));
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>给变量设置不同的值，并且使用不同的运算符尝试一下</p>
   </body>
</html>

尝试一下

上述代码执行在界面上显示如下结果:

(a && b) => false 
(a || b) => true 
!(a && b) => true
给变量设置不同的值，并且使用不同的运算符尝试一下

按位运算符

JavaScript 支持以下按位运算符

假设变量 A 为 2，变量 B 为 3

序号 运算符 描述
1 & (按位与) 它对其整数参数的每一位执行布尔与运算。 例如： (A & B) 是 2。
2 (按位或)
3 ^ (异或) 它对其整数参数的每一位执行布尔异或运算。异或意味着操作数一为真或操作数二为真，但不能同时为真。例如： (A ^ B) 是 1。
4 ~ (非) 它是一个一元运算符，通过反转操作数中的所有位来进行操作。 例如： (~B) 是 -4。
5 << (左移) 它将第一个操作数中的所有位向左移动第二个操作数中指定的位数。新位用零填充。将一个值左移一位相当于乘以 2，将值移两个位置相当于乘以 4，以此类推。 例如： (A << 1) 是 4。
6 >> (右移) 二元右移运算符。左操作数的值向右移动右操作数指定的位数。例如： (A >> 1) 是 1。
7 >>> (右移零) 这个操作符就像 >> 操作符一样，除了左移的位总是零。例如： (A >>> 1) 是 1。

示例

尝试使用以下代码在 JavaScript 中实现按位运算符。

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 2; // Bit presentation 10
            var b = 3; // Bit presentation 11
            var linebreak = "<br />";
         
            document.write("(a & b) => ");
            result = (a & b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a | b) => ");
            result = (a | b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a ^ b) => ");
            result = (a ^ b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(~b) => ");
            result = (~b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a << b) => ");
            result = (a << b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a >> b) => ");
            result = (a >> b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>给变量设置不同的值，并且使用不同的运算符尝试一下</p>
   </body>
</html>

尝试一下

执行上面代码会在界面上显示如下结果:

(a & b) => 2 
(a | b) => 3 
(a ^ b) => 1 
(~b) => -4 
(a << b) => 16 
(a >> b) => 0
给变量设置不同的值，并且使用不同的运算符尝试一下

赋值运算符

JavaScript 支持以下赋值运算符

序号 运算符 描述
1 = (简单赋值) 将右侧操作数的值分配给左侧操作数 例如： C = A + B 将 A + B 的值赋给 C
2 += (加法并赋值) 它将右操作数添加到左操作数并将结果分配给左操作数。例如： C += A 等价于 C = C + A
3 \−= (减法并赋值) 它从左操作数中减去右操作数，并将结果分配给左操作数。 例如： C -= A 等价于 C = C - A
4 *= (乘法并赋值) 它将右操作数与左操作数相乘，并将结果分配给左操作数。例如： C *= A 等价于 C = C * A
5 /= (除法并赋值) 它将左操作数与右操作数相除，并将结果分配给左操作数。例如： C /= A 等价于 C = C / A
6 %= (取模并赋值) 它使用两个操作数取模并将结果分配给左操作数。例如： C %= A 等价于 C = C % A

注意- 相同的逻辑适用于按位运算符，因此它们将变得像 <<=、>>=、>>=、&=、|= 和 ^=。

示例

尝试使用以下代码在 JavaScript 中实现赋值运算符。

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var linebreak = "<br />";
         
            document.write("Value of a => (a = b) => ");
            result = (a = b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a += b) => ");
            result = (a += b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a -= b) => ");
            result = (a -= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a *= b) => ");
            result = (a *= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a /= b) => ");
            result = (a /= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a %= b) => ");
            result = (a %= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>给变量设置不同的值，并且使用不同的运算符尝试一下</p>
   </body>
</html>

尝试一下

执行上面代码会在界面显示如下内容：

Value of a => (a = b) => 10
Value of a => (a += b) => 20 
Value of a => (a -= b) => 10 
Value of a => (a *= b) => 100 
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
给变量设置不同的值，并且使用不同的运算符尝试一下

其他运算符

我们将在这里讨论两个在 JavaScript 中非常有用的运算符：条件运算符(?:) 和typeof 运算符。

条件运算符 (? :)

条件运算符又称三元运算符，首先判断表达式是真还是假，然后根据表达式的结果执行两个给定语句之一

尝试以下代码以了解条件运算符在 JavaScript 中的工作原理

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
         
            document.write ("((a > b) ? 100 : 200) => ");
            result = (a > b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         
            document.write ("((a < b) ? 100 : 200) => ");
            result = (a < b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>给变量设置不同的值，并且使用不同的运算符尝试一下</p>
   </body>
</html>

尝试一下

执行结果如下

((a > b) ? 100 : 200) => 200 
((a < b) ? 100 : 200) => 100
给变量设置不同的值，并且使用不同的运算符尝试一下

运算符类型

typeof运算操作是一元运算符，放置在单个操作数之前。它的值是一个字符串，指示操作数的数据类型。

typeof 运算返回的是字符串，通过该字符串可以和 "number"、"string" 和"boolean" 等进行比较，判断操作数是否是你预期的数据类型。

下面是typeof运算符的返回值列表。

类型 返回的字符串
Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"

示例

以下代码显示了如何实现typeof运算符。

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = "String";
            var linebreak = "<br />";
         
            result = (typeof b == "string" ? "B is String" : "B is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         
            result = (typeof a == "string" ? "A is String" : "A is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>给变量设置不同的值，并且使用不同的运算符尝试一下</p>
   </body>
</html>

尝试一下

执行结果如下：

Result => B is String 
Result => A is Numeric
给变量设置不同的值，并且使用不同的运算符尝试一下

查看笔记

扫码一下
查看教程更方便