极客教程JavaScript – 操作符
什么是操作符？
让我们看一个简单的表达式 4 + 5 等于 9 。在这里，4和5被称为 操作数 ，‘+’被称为 操作符 。JavaScript支持以下类型的操作符。
- 算术运算符
- 比较运算符
- 逻辑（或关系）运算符
- 赋值运算符
- 条件（或三元）运算符
让我们逐个查看所有运算符。
算术运算符
JavaScript支持以下算术运算符−
假设变量A包含10，变量B包含20，则−
| 序号 | 操作符及其描述 |
|---|---|
| 1 | +（加） 将两个操作数相加 例如： A + B 将给出30 |
| 2 | -（减） 将第二个操作数从第一个操作数中减去 例如： A - B 将给出-10 |
| 3 | *（乘） 将两个操作数相乘 例如： AB将得到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>
将变量设置为不同的值，然后尝试...
</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) 为 false。 |
| 2 | != (不等于) 检查两个操作数的值是否相等，如果值不相等，则条件为真。 例如： (A != B) 为 true。 |
| 3 | > (大于) 检查左操作数的值是否大于右操作数的值，如果是，则条件为真。 例如： (A > B) 为 false。 |
| 4 | < (小于) 检查左操作数的值是否小于右操作数的值，如果是，则条件为真。 例如： (A < B) 为 true。 |
| 5 | >= (大于或等于) 检查左操作数的值是否大于或等于右操作数的值，如果是，则条件为真。 例如： (A >= B) 为 false。 |
| 6 | <= (小于或等于) 检查左操作数的值是否小于或等于右操作数的值，如果是，则条件为真。 例如： (A <= B) 为 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>
将变量设置为不同的值和不同的运算符，然后尝试...
</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 | & (位运算AND) 对于整数参数的每个位执行布尔AND运算。 例子: (A & B) 等于 2。 |
| 2 | | (位运算OR) 对于整数参数的每个位执行布尔OR运算。 例子: (A | B) 等于 3。 |
| 3 | ^ (位运算XOR) 对于整数参数的每个位执行布尔异或运算。异或意味着操作数1为真或操作数2为真，但不是两者都是真的。 例子: (A ^ B) 等于 1。 |
| 4 | ~ (位运算NOT) 这是一元运算符，通过反转操作数中的所有位来操作。 例子: (~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; // 二进制10
var b = 3; // 二进制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>
设置不同的变量和不同的运算符，然后尝试...
</body>
</html>
(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0
设置不同的变量和不同的运算符，然后尝试...
赋值运算符
JavaScript支持以下赋值运算符 –
| Sr.No. | 运算符 & 描述 |
|---|---|
| 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运算符。
条件运算符（? 🙂
条件运算符首先对一个表达式进行真假值的评估，然后根据评估结果执行两个给定的语句中的一个。
| 序号 | 运算符及描述 |
|---|---|
| 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>设置不同的变量值和运算符再尝试…</p>
</body>
</html>
输出
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
设置不同的变量值和运算符再尝试…
typeof运算符
typeof运算符是一个一元运算符，它位于单个操作数之前，可以是任何类型。它的值是一个字符串，表示操作数的数据类型。
如果操作数是数字、字符串或布尔值，typeof运算符计算结果为”number”、”string”或”boolean”，并根据计算结果返回true或false。
以下是typeof运算符的返回值列表。
| 类型 | 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
设置不同的变量值和不同的运算符，然后尝试…