【前端开发】三. 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. 运算符优先级

从高到低常见优先级：

()（分组）
!、++、--（一元操作符）
*、/、%
+、-
>、<、>=、<=
==、===、!=、!==
&&
||、??
? :（三元）
=、+=（赋值）

提示：使用 () 明确优先级以避免歧义。

示例代码

javascript 复制代码

// 算术 + 赋值
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（不报错）