JavaScript 运算符
下一篇: JavaScript if…else 语句
运算符是什么？
让我们看一个简单的表达式 4 + 5 等于 9。4 和 5 在这里称为操作数和 '+' 称为运算符。JavaScript 支持以下类型的运算符。
算术运算符
比较运算符
逻辑 （或关系） 运算符
赋值运算符
条件 （或三元） 运算符
我们一个个的来看下这些运算符。
算术运算符
JavaScript 支持下列算术运算符
假设变量 A 的值为10 和 变量B 的值为20，那么：
| Sr.No | Operator and Description |
|---|---|
| 1 |
+ (Addition) 将两个操作数相加 Ex: A + B will give 30 |
| 2 |
- (Subtraction) 将第一个数减去第二个数 Ex: A – B will give -10 |
| 3 |
* (Multiplication) 对两个操作数相乘 Ex: A * B will give 200 |
| 4 |
/ (Division) 将一个操作数除以另一个操作数 Ex: B / A will give 2 |
| 5 |
% (Modulus) 输出一个数对另一个数相除后的余数 Ex: B % A will give 0 |
| 6 |
++ (Increment) 对一个整数加1 Ex: A++ will give 11 |
| 7 |
– (Decrement) 对一个整数减1 Ex: A– will give 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>
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...
比较运算符
JavaScript 支持下列比较运算符：
假设变量 A 的值为 10 和 变量 B 的值为 20，那么：
| Sr.No | Operator and Description |
|---|---|
| 1 |
= = (Equal) 检查两个操作数的值是否相等，如果是，那么条件表达式为 true 。 Ex: (A == B) is not true. |
| 2 |
!= (Not Equal) 检查两个操作数的值是否不相等，如果是，那么条件表达式为 true 。 Ex: (A != B) is true. |
| 3 |
> (Greater than) 检查是否左边的操作数的值大于右操作数的值，如果是的话，那么条件表达式为 true。 Ex: (A > B) is not true. |
| 4 |
< (Less than) 检查左边操作数的值是否小于右边操作数的值，如果是，条件表达式为 true。 Ex: (A < B) is true. |
| 5 |
>= (Greater than or Equal to) 检查左边操作数的值是否大于或等于右操作数的值，如果是，那么条件表达式为 true。 Ex: (A >= B) is not true. |
| 6 |
<= (Less than or Equal to) 检查左边操作数的值是否小于或等于右边操作数的值，如果是条件表达式变为 true。 Ex: (A <= B) is true. |
示例
下面的代码演示如何在 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...
逻辑运算符
JavaScript 支持以下逻辑运算符：
假设变量 A 的值为 10 和 变量 B 的值为 20，那么：
| Sr.No | Operator and Description |
|---|---|
| 1 |
&& (Logical AND) 如果两个操作数都为非0，那么该表达式返回 true Ex: (A && B) is true. |
| 2 |
|| (Logical OR) 如果两个操作数中任意一个为非0，那么该表达式返回 true Ex: (A || B) is true. |
| 3 |
! (Logical NOT) 反转操作数的逻辑状态，如果条件为 true，然后逻辑 ! 运算符后将变为false Ex: ! (A && B) is false. |
示例
请尝试以下代码，以了解如何在 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...
按位运算符
JavaScript 支持以下的按位运算符
假设变量 A 值为 2 和 变量 B 的值为 3，那么：
| Sr.No | Operator and Description |
|---|---|
| 1 |
& (Bitwise AND) 对整数的每一个二进制位进行与操作 Ex: (A & B) is 2. |
| 2 |
| (BitWise OR) 对整数的每一个二进制位进行或操作 Ex: (A | B) is 3. |
| 3 |
^ (Bitwise XOR) 对整数的每一个二进制位进行异或操作。进行异或运算的两个二进位的值不相同，则异或结果为真。反之，为假。 Ex: (A ^ B) is 1. |
| 4 |
~ (Bitwise Not) 它是一个一元运算符，作用是对所有操作数中的二进制位进行反转。 Ex: (~B) is -4. |
| 5 |
<< (Left Shift) 按二进制形式把所有的数字向左移动对应的位数，高位移出(舍弃)，低位的空位补零。 Ex: (A << 1) is 4. |
| 6 |
>> (Right Shift) 右移运算是将一个二进制位的操作数按指定移动的位数向右移动，移出位被丢弃，左边移出的空位或者一律补0，或者补符号位。 Ex: (A >> 1) is 1. |
| 7 |
>>> (Right shift with Zero) 此运算符是和 >> 运算符类似，只是左边移中的位将始终为零。 Ex: (A >>> 1) is 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>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...
赋值运算符
JavaScript 支持下面的赋值运算符
| Sr.No | Operator and Description |
|---|---|
| 1 |
= (Simple Assignment ) 将右侧操作数的值分配给左侧操作数。 Ex: C = A + B will assign the value of A + B into C |
| 2 |
+= (Add and Assignment) 它将右操作数和左操作数进行相加，并将结果赋给左操作数。 Ex: C += A is equivalent to C = C + A |
| 3 |
−= (Subtract and Assignment) 它将左操作数减去右操作数，并将结果赋给左操作数。 Ex: C -= A is equivalent to C = C – A |
| 4 |
*= (Multiply and Assignment) 它将右操作数与左操作数相乘，并将结果赋给左操作数。 Ex: C *= A is equivalent to C = C * A |
| 5 |
/= (Divide and Assignment) 它将左边操作数除以右操作数，并将结果赋给左操作数。 Ex: C /= A is equivalent to C = C / A |
| 6 |
%= (Modules and Assignment) 它对两个操作数进行取模运算，并将结果赋给左操作数。 Ex: C %= A is equivalent to 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>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 中很有用的运算符︰ 条件运算符 (?:) 和 typeof 运算符。
条件运算符 (?:)
条件运算符首先计算表达式为 true 或 false 的值，然后在根据结果选择执行两个给定语句中的一个。
| Sr.No | Operator and Description |
|---|---|
| 1 |
? : (Conditional ) If Condition is true? Then value X : Otherwise value Y 表达式 ? X : Y ，如果表达式的值为 true ，那么返回 X，否则返回 Y 。如： 5 > 3 ? 2 : 3, 因为5 大于 3为 true，所以整个表达式最后的结果为2 。 |
示例
请尝试以下代码，以了解如何在 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 运算符是放置在某个操作数之前，可以是任何类型的一元运算符。其值返回的是一个字符串，用于指示操作数的数据类型。
如果该运算符的操作数是数字、 字符串或布尔值并返回 true 或 false ，那么 typeof 运算符可以计算出这些操作数类型是否为"数字"、"字符串"或"布尔值"。
以下是 typeof 运算符返回值的列表。
| Type | String Returned by 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>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...
下一篇: JavaScript if…else 语句