极客教程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 | ++ (增加) 将整数值增加1 例如: A++ 将得到11 |
| 7 | -- (减少) 将整数值减少1 例如: 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>
Set the variables to different values and then try...
</body>
</html>
输出
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，则有以下情况 −
| 序号 | 运算符和描述 |
|---|---|
| 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>
Set the variables to different values and different operators and then try...
</body>
</html>
输出
(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，那么 –
| 序号 | 运算符和描述 |
|---|---|
| 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>Set the variables to different values and different operators and then try...</p>
</body>
</html>
输出
(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，则 –
| 序号 | 运算符与描述 |
|---|---|
| 1 | & (按位与) 对其整数参数的每个位执行布尔与操作。 示例： (A & B) 等于2。 |
| 2 | | (按位或) 对其整数参数的每个位执行布尔或操作。 示例： (A | B) 等于3。 |
| 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>
Set the variables to different values and different operators and then try...
</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支持以下赋值运算符 –
| 序号 | 运算符和描述 |
|---|---|
| 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>Set the variables to different values and different operators and then try...</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
Set the variables to different values and different operators and then try...
其他运算符
在JavaScript中，有两个非常有用的运算符：条件运算符（? :)和typeof运算符。
条件运算符（? :）
条件运算符首先对一个表达式进行求值，得到一个真或假的值，然后根据求值结果执行其中的一个语句。
| 序号 | 操作符与描述 |
|---|---|
| 1 | ?: (条件运算符) 如果条件为真? 那么取值X : 否则取值Y |
示例
尝试以下代码以了解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>
输出
((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运算符的返回值列表。
| Type | 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>
输出
Result => B is String
Result => A is Numeric
Set the variables to different values and different operators and then try...