菜鸟教程 – 学的不仅是技术，更是梦想！

JavaScript 运算符

关键要点

  • JavaScript 运算符包括算术、赋值、字符串、比较、逻辑、位和条件等多种类型。
  • 它们用于执行数学运算、比较值、连接字符串和逻辑判断。
  • 运算符优先级影响表达式的执行顺序，建议使用括号明确顺序。

算术运算符

算术运算符用于基本的数学运算，例如加、减、乘、除和取模。
例如：5 + 3 结果为 8，5 % 3 结果为 2。

赋值和字符串运算符

赋值运算符如 = 用于给变量赋值，+= 可同时加法和赋值。
字符串运算符 + 用于连接字符串，例如 "Hello" + " World" 结果为 "Hello World"。

比较和逻辑运算符

比较运算符如 == 和 === 用于比较值，== 会类型转换，=== 不转换。
逻辑运算符如 &&（与）和 ||（或）用于条件判断，例如 true && false 结果为 false。

其他运算符

位运算符如 &（位与）用于二进制操作，三元运算符 ?: 用于条件表达式，例如 age >= 18 ? "成年" : "未成年"。

详细报告

JavaScript 运算符是编程语言中的核心组成部分，用于执行各种操作，如数学计算、值比较、字符串连接和逻辑判断。以下是对 JavaScript 运算符的全面讲解，涵盖其类型、用法和注意事项，适合初学者和中级开发者参考。

1. 算术运算符

算术运算符用于执行基本的数学运算，包括加、减、乘、除、取模、自增和自减。以下是详细列表：

运算符描述示例结果
+加法5 + 38
-减法5 - 32
*乘法5 * 315
/除法5 / 31.6666666666666667
%取模（余数）5 % 32
++自增（前置或后置）let x = 5; ++x6（前置）；let x = 5; x++ 结果为 5，但 x 变为 6
--自减（前置或后置）let x = 5; --x4（前置）；let x = 5; x-- 结果为 5，但 x 变为 4

注意：自增和自减运算符的优先级高于大多数算术运算符，因此在复杂表达式中需要注意顺序。例如，x = 5; y = x++ + 1; 中，x++ 先返回 5，然后 x 变为 6，y 结果为 6。

2. 赋值运算符

赋值运算符用于将右操作数的值赋给左操作数，最基本的是 =。还有复合赋值运算符，如 +=、-= 等，简化了常见的操作。

运算符描述示例结果
=赋值x = 5x 变为 5
+=加法赋值x = 5; x += 3x 变为 8（等同于 x = x + 3）
-=减法赋值x = 5; x -= 3x 变为 2（等同于 x = x - 3）
*=乘法赋值x = 5; x *= 3x 变为 15（等同于 x = x * 3）
/=除法赋值x = 5; x /= 3x 变为 1.6666666666666667（等同于 x = x / 3）
%=取模赋值x = 5; x %= 3x 变为 2（等同于 x = x % 3）

示例：

let x = 10;
x += 5; // x 现在是 15
console.log(x); // 输出 15

赋值运算符的优先级较低（优先级 2），支持链式赋值，例如 a = b = c = 2 + 2。

3. 字符串运算符

JavaScript 使用 + 运算符进行字符串连接，+= 用于字符串追加。

运算符描述示例结果
+字符串连接"Hello" + " World""Hello World"
+=字符串连接并赋值let str = "Hello"; str += " World";str 变为 "Hello World"

注意：当 + 运算符的一个操作数是字符串时，另一个操作数会自动转换为字符串。例如：

  • "5" + 5 结果为 "55"（字符串连接）
  • 5 + "5" 结果为 "55"（同上）
  • 5 + 5 结果为 10（数字加法）

这种行为可能导致意外结果，需注意类型转换。例如，"Hello" + 5 结果为 "Hello5"。

4. 比较运算符

比较运算符用于比较两个值，并返回布尔值 true 或 false。它们包括相等、不相等、大于、小于等。

运算符描述示例结果
==相等（类型转换）5 == "5"true
===严格相等（不转换类型）5 === "5"false
!=不相等（类型转换）5 != "5"false
!==严格不相等（不转换类型）5 !== "5"true
>大于5 > 3true
<小于5 < 3false
>=大于或等于5 >= 3true
<=小于或等于5 <= 3false

注意：== 和 != 会进行类型转换，可能导致意外结果。例如，0 == false 结果为 true，但 0 === false 结果为 false。建议在严格比较时使用 === 和 !==。

5. 逻辑运算符

逻辑运算符用于连接多个条件，返回布尔值，并具有短路求值特性。

运算符描述示例结果
&&逻辑与（AND）true && falsefalse（如果第一个操作数为 false，不评估第二个）
||逻辑或（OR）true || falsetrue（如果第一个操作数为 true，不评估第二个）
!逻辑非（NOT）!truefalse

示例：

let age = 20;
if (age > 18 && age < 60) {
    console.log("成年人"); // 输出 "成年人"
}

逻辑运算符的优先级为：!（最高），&&，||（最低）。

6. 位运算符

位运算符对操作数的二进制表示进行操作，JavaScript 将操作数视为 32 位的二进制数。

运算符描述示例结果（二进制）十进制结果
&位与（AND）5 & 1（101 & 001）0011
|位或（OR）5 | 1（101 | 001）1015
^位异或（XOR）5 ^ 1（101 ^ 001）1004
~位非（NOT）~5（~101）...1010（32 位补码）-6
<<左移5 << 1（101 << 1）101010
>>右移（带符号）5 >> 1（101 >> 1）0102
>>>无符号右移5 >>> 1（101 >>> 1）0102

注意：位运算符通常用于低级操作，如优化或加密算法，在 Web 开发中使用较少。

7. 三元运算符

三元运算符是 JavaScript 中唯一的条件运算符，用于根据条件返回不同的值。

运算符描述示例结果
?:条件运算符age >= 18 ? "成年" : "未成年"如果 age 为 20，结果为 "成年"

示例：

let status = age >= 18 ? "成年" : "未成年";
console.log(status); // 输出 "成年" 或 "未成年"

8. 其他运算符

还有一些特殊运算符，适用于特定场景：

  • 逗号运算符（,）：从左到右评估多个表达式，返回最后一个表达式的值。
  • 示例：(1, 2, 3) 结果为 3。
  • typeof：返回变量的类型。
  • 示例：typeof "hello" 结果为 "string"。
  • delete：删除对象的属性。
  • 示例：delete obj.key。
  • in：检查对象是否有特定属性。
  • 示例：'key' in obj 结果为 true 或 false。
  • instanceof：检查对象是否是特定类型的实例。
  • 示例：obj instanceof Array 结果为 true 或 false。

9. 运算符优先级

运算符的优先级决定了表达式中运算的顺序。以下是部分运算符的优先级（从高到低）：

优先级运算符类型示例
15一元运算符!x, ++x, typeof x
14乘性运算符x * y, x / y, x % y
13加性运算符x + y, x - y
12位移运算符x << y, x >> y, x >>> y
11关系运算符x > y, x < y, x in y, x instanceof y
10相等运算符x == y, x != y, x === y, x !== y
9位运算符x & y, x ^ y, x | y
8逻辑与x && y
7逻辑或x || y
6条件运算符x ? y : z
2赋值运算符x = y, x += y, x -= y
1逗号运算符x, y, z

注意：优先级高的运算符先执行。如果不确定，可以使用括号 () 来明确顺序，例如 (a + b) * c。

10. 注意事项

  • 类型转换：JavaScript 是动态类型语言，运算符可能隐式转换类型。例如，+ 在数字上执行加法，在字符串上执行连接。
  • 短路求值：逻辑运算符 && 和 || 具有短路特性，如果第一个操作数已确定结果，则不评估第二个操作数。
  • 位运算符的局限：位运算符在 JavaScript 中操作 32 位整数，超出范围会截断。

总结

JavaScript 的运算符种类丰富，涵盖了从基本数学运算到高级逻辑判断的各种操作。理解它们的用法和优先级对编写正确高效的代码至关重要。初学者可通过 MDN Web Docs – JavaScript 表达式与运算符、w3school – JavaScript 运算符 和 菜鸟教程 – JavaScript 运算符 进一步学习。

关键引文

likuolei

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注