运算符

优质

小牛编辑

137浏览

2023-12-01

什么是运算符？

让我们采用一个简单的表达式4 + 5 is equal to 9 。这里4和5被称为operands ，'+'被称为operator 。 JavaScript支持以下类型的运算符。

算术运算符
比较运算符
逻辑（或关系）运算符
分配运算符
条件（或三元）运算符

让我们逐一了解所有运算符。

算术运算符 (Arithmetic Operators)

JavaScript支持以下算术运算符 -

假设变量A保持10，变量B保持20，则 -

Sr.No	运算符和描述
1	+ (Addition) 添加两个操作数 Ex: A + B将给出30
2	- (Subtraction) 从第一个中减去第二个操作数 Ex: A - B将给-10
3	* (Multiplication) 将两个操作数相乘 Ex: A * B将给出200
4	/ (Division) 用分母除以分子 Ex: B/A会给2
5	% (Modulus) 输出整数除法的余数 Ex: B％A将给出0
6	++ (Increment) 将整数值增加1 Ex: A ++将给出11
7	-- (Decrement) 将整数值减1 Ex: A--将给出9

Note - 加法运算符（+）适用于Numeric和Strings。例如“a”+ 10将给出“a10”。

例子 (Example)

以下代码显示了如何在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>
      Set the variables to different values and then try...
   </body>
</html>

输出 (Output)

a + b = 43
a - b = 23
a/b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...

比较运算符 (Comparison Operators)

JavaScript支持以下比较运算符 -

假设变量A保持10，变量B保持20，则 -

Sr.No	运算符和描述
1	= = (Equal) 检查两个操作数的值是否相等，如果是，则条件成立。 Ex: （A == B）不是真的。
2	!= (Not Equal) 检查两个操作数的值是否相等，如果值不相等，则条件变为true。 Ex: （A！= B）是真的。
3	》 (Greater than) 检查左操作数的值是否大于右操作数的值，如果是，则条件变为真。 Ex: （A“B）不是真的。
4	《 (Less than) 检查左操作数的值是否小于右操作数的值，如果是，则条件变为真。 Ex: （A“B）是真的。
5	》= (Greater than or Equal to) 检查左操作数的值是否大于或等于右操作数的值，如果是，则条件变为真。 Ex: （A“= B）不是真的。
6	《= (Less than or Equal to) 检查左操作数的值是否小于或等于右操作数的值，如果是，则条件变为真。 Ex: （A“= B）是真的。

例子 (Example)

以下代码显示了如何在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>
      Set the variables to different values and different operators and then try...
   </body>
</html>

输出 (Output)

(a == b) => false 
(a < b) => true 
(a > b) => false 
(a != b) => true 
(a >= b) => false 
a <= b) => true
Set the variables to different values and different operators and then try...

逻辑运算符 (Logical Operators)

JavaScript支持以下逻辑运算符 -

假设变量A保持10，变量B保持20，则 -

Sr.No	运算符和描述
1	&& (Logical AND) 如果两个操作数都不为零，则条件成立。 Ex: （A && B）是真的。
2	\|\| (Logical OR) 如果两个操作数中的任何一个非零，则条件变为真。 Ex: （A \|\| B）是真的。
3	! (Logical NOT) 反转其操作数的逻辑状态。如果条件为真，则Logical NOT运算符将使其为false。 Ex: ！（A && B）是假的。

Sr.No

运算符和描述

&& (Logical AND)

如果两个操作数都不为零，则条件成立。

Ex: （A && B）是真的。

|| (Logical OR)

如果两个操作数中的任何一个非零，则条件变为真。

Ex: （A || B）是真的。

! (Logical NOT)

反转其操作数的逻辑状态。如果条件为真，则Logical NOT运算符将使其为false。

Ex: ！（A && B）是假的。

例子 (Example)

请尝试以下代码以了解如何在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>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

输出 (Output)

(a && b) => false 
(a || b) => true 
!(a && b) => true
Set the variables to different values and different operators and then try...

按位运算符 (Bitwise Operators)

JavaScript支持以下按位运算符 -

假设变量A保持2而变量B保持3，则 -

Sr.No	运算符和描述
1	& (Bitwise AND) 它对其整数参数的每个位执行布尔AND运算。 Ex: （A＆B）是2。
2	\| (BitWise OR) 它对其整数参数的每个位执行布尔OR运算。 Ex: （A \| B）是3。
3	^ (Bitwise XOR) 它对其整数参数的每个位执行布尔异或运算。异或表示操作数1为真或操作数2为真，但不是两者。 Ex: （A ^ B）是1。
4	~ (Bitwise Not) 它是一元运算符，通过反转操作数中的所有位来操作。 Ex: ~B）是-4。
5	《《 (Left Shift) 它将第一个操作数中的所有位向左移动第二个操作数中指定的位数。新位用零填充。将一个值左移一个位置相当于将其乘以2，移位两个位置相当于乘以4，依此类推。 Ex: （A“”1）是4。
6	》》 (Right Shift) 二进制右移运算符。左操作数的值向右移动右操作数指定的位数。 Ex: “”1“为1。
7	》》》 (Right shift with Zero) 这个运算符就像>>运算符一样，只不过在左边移入的位总是为零。 Ex: “”“”1）是1。

例子 (Example)

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

<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>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

(a & b) => 2 
(a | b) => 3 
(a ^ b) => 1 
(~b) => -4 
(a << b) => 16 
(a >> b) => 0
Set the variables to different values and different operators and then try...

赋值操作符 (Assignment Operators)

JavaScript支持以下赋值运算符 -

Sr.No	运算符和描述
1	= (Simple Assignment ) 将值从右侧操作数分配给左侧操作数 Ex: C = A + B将A + B的值分配给C
2	+= (Add and Assignment) 它将右操作数添加到左操作数并将结果赋给左操作数。 Ex: C + = A等于C = C + A.
3	−= (Subtract and Assignment) 它从左操作数中减去右操作数，并将结果赋给左操作数。 Ex: C - = A相当于C = C - A.
4	= (Multiply and Assignment) 它将右操作数与左操作数相乘，并将结果赋给左操作数。 Ex:* C * = A等于C = C * A.
5	/= (Divide and Assignment) 它将左操作数与右操作数分开，并将结果赋给左操作数。 Ex: C/= A等于C = C/A.
6	%= (Modules and Assignment) 它使用两个操作数来获取模数，并将结果赋给左操作数。 Ex: C％= A等于C = C％A

Note - 相同的逻辑适用于按位运算符，因此它们将变为“”=，“”=，“”=，＆=，| =和^ =。

例子 (Example)

尝试使用以下代码在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>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

输出 (Output)

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
Set the variables to different values and different operators and then try...

其它运算符

我们将在这里讨论两个在JavaScript中非常有用的conditional operator : conditional operator （？:)和typeof operator 。

Conditional Operator (? :)

条件运算符首先计算表达式的true或false值，然后根据评估结果执行两个给定语句中的一个。

Sr.No	运算符和描述
1	? : (Conditional ) 如果条件为真？然后是值X:否则为Y值

例子 (Example)

请尝试以下代码以了解条件运算符在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>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

输出 (Output)

((a > b) ? 100 : 200) => 200 
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...

typeof运算符

typeof运算符是一元运算符，位于其单个操作数之前，可以是任何类型。它的值是一个字符串，表示操作数的数据类型。

如果操作数是数字，字符串或布尔值，则typeof运算符求值为“number”，“string”或“boolean”，并根据求值返回true或false。

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

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

例子 (Example)

以下代码显示了如何实现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>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

输出 (Output)

Result => B is String 
Result => A is Numeric
Set the variables to different values and different operators and then try...