【前端开发】三. JS运算符
JavaScript 运算符总结
运算符用于对变量和值执行操作。以下是 JavaScript 中常见运算符的分类和说明：
1. 算术运算符
运算符 | 名称 | 示例 | 说明 |
+ | 加法 | x + y | 数字相加或字符串拼接 |
- | 减法 | x - y | |
* | 乘法 | x * y | |
/ | 除法 | x / y | |
% | 取模 | x % y | 返回除法余数 |
** | 指数 | x ** y | x 的 y 次幂（ES2016） |
++ | 自增 | x++ / ++x | 增量操作（前后缀） ++在前 先自增再赋值 ++ 在后 先赋值再自增 -- 同理 |
-- | 自减 | x-- / --x | 减量操作（前后缀） |
2. 赋值运算符
运算符 | 示例 | 等价于 |
= | x = 5 | |
+= | x += 3 | x = x + 3 |
-= | x -= 2 | x = x - 2 |
*= | x *= 4 | x = x * 4 |
/= | x /= 2 | x = x / 2 |
%= | x %= 3 | x = x % 3 |
**= | x **= 2 | x = x ** 2 |
3. 比较运算符
运算符 | 名称 | 示例 | 说明 |
== | 等于 | x == y | 值相等（忽略类型） |
=== | 严格等于 | x === y | 值和类型均相等 |
!= | 不等于 | x != y | 值不相等（忽略类型） |
!== | 严格不等于 | x !== y | 值或类型不相等 |
> | 大于 | x > y | |
< | 小于 | x < y | |
>= | 大于等于 | x >= y | |
<= | 小于等于 | x <= y |
4. 逻辑运算符
运算符 | 名称 | 示例 | 说明 |
&& | 与 | x && y | 两者为真时返回 y（短路求值） |
|| | 或 | x || y | 任一为真时返回第一个真值（短路） |
! | 非 | !x | 取反（true → false） |
?? | 空值合并 | x ?? y | x 为 null/undefined 时返回 y（ES2020） |
5. 位运算符
运算符 | 名称 | 示例 |
& | 按位与 | x & y |
| | 按位或 | x | y |
^ | 按位异或 | x ^ y |
~ | 按位非 | ~x |
<< | 左移 | x << 2 |
>> | 右移 | x >> 2 |
>>> | 无符号右移 | x >>> 2 |
6. 三元运算符
运算符 | 示例 | 说明 |
? : | x ? y : z | 若 x 为真则 y，否则 z |
7. 其他运算符
运算符 | 名称 | 示例 | 说明 |
typeof | 类型检测 | typeof x | 返回变量类型（如 "string"） |
instanceof | 实例检测 | obj instanceof Array | 检查对象是否属于指定类 |
in | 属性检测 | "key" in obj | 检查对象是否包含属性 |
delete | 属性删除 | delete obj.key | 删除对象属性 |
... | 展开运算符 | [...arr] | 展开数组/对象（ES6+） |
?. | 可选链 | obj?.prop | 避免 null/undefined 错误（ES2020） |
8. 运算符优先级
从高到低常见优先级：
- ()（分组）
- !、++、--（一元操作符）
- *、/、%
- +、-
- >、<、>=、<=
- ==、===、!=、!==
- &&
- ||、??
- ? :（三元）
- =、+=（赋值）
提示：使用 () 明确优先级以避免歧义。
示例代码
// 算术 + 赋值
let a = 10;
a **= 2; // a = 100// 比较 + 逻辑
console.log(5 === "5"); // false（严格等于）
console.log(null ?? "default"); // "default"（空值合并）// 三元运算符
const age = 20;
const status = age >= 18 ? "Adult" : "Minor"; // "Adult"// 可选链
const user = { address: { city: "Paris" } };
console.log(user?.address?.city); // "Paris"
console.log(user?.contact?.phone); // undefined（不报错）