JavaScript 运算符

JavaScript 运算符是用于对值和变量执行操作的符号或关键字。它们是构建表达式的基础，能够以多种方式操作数据。掌握各类运算符的用法，是编写高效、清晰代码的关键。

学习目标

熟悉 JavaScript 中 12 类常用运算符及其用途
理解赋值、比较、逻辑等核心运算符的行为差异
掌握现代运算符（如可选链 ?.、BigInt 运算）的使用场景
避免因运算符优先级或类型转换导致的常见错误

算术运算符

用于执行基本数学运算。

运算符	说明	示例
`+`	加法	`5 + 3 → 8`
`-`	减法	`10 - 2 → 8`
`*`	乘法	`4 * 2 → 8`
`/`	除法	`8 / 2 → 4`
`%`	取模（余数）	`9 % 4 → 1`
`**`	幂运算（ES2016）	`2 ** 3 → 8`

const sum = 5 + 3;     // 8
const diff = 10 - 2;   // 8
const p = 4 * 2;       // 8
const q = 8 / 2;       // 4
console.log(sum, diff, p, q); // 输出：8 8 8 4

注意：+ 也可用于字符串拼接。

赋值运算符

将值赋给变量，支持复合操作。

运算符	等价形式	说明
`=`	`x = y`	基本赋值
`+=`	`x = x + y`	加后赋值
`-=`	`x = x - y`	减后赋值
`*=`	`x = x * y`	乘后赋值
`/=`	`x = x / y`	除后赋值
`%=`	`x = x % y`	取模后赋值

let n = 10;
n += 5; // n = 15
n *= 2; // n = 30
console.log(n); // 输出：30

比较运算符

比较两个值，返回布尔结果（true / false），常用于条件判断。

运算符	说明	示例
`==`	相等（宽松，会类型转换）	`10 == "10" → true`
`===`	严格相等（值和类型都相同）	`10 === "10" → false`
`!=`	不相等（宽松）	`5 != "5" → false`
`!==`	严格不相等	`5 !== "5" → true`
`>` / `<`	大于 / 小于	`10 > 5 → true`
`>=` / `<=`	大于等于 / 小于等于	`5 <= 5 → true`

console.log(10 > 5);        // true
console.log(10 === "10");   // false（类型不同）

最佳实践：始终优先使用 === 和 !==，避免隐式类型转换带来的 bug。

逻辑运算符

用于组合多个布尔表达式。

const a = true, b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a);     // false

短路求值：
a && b：若 a 为假，则不计算 b
a || b：若 a 为真，则不计算 b
常用于默认值设置：name = input || "匿名用户";

位运算符

对数字的二进制表示进行操作（较少使用，多见于底层优化或加密场景）。

运算符	说明	示例
`&`	按位与	`5 & 1 → 1`（二进制 `101 & 001 = 001`）
`^`	按位异或	`5 ^ 1 → 4`
`~`	按位非	`~5 → -6`（补码取反）
`<<`	左移	`2 << 1 → 4`
`>>`	右移（带符号）	`-8 >> 1 → -4`
`>>>`	无符号右移	`8 >>> 1 → 4`

const res = 5 & 1; // 1
console.log(res);

三元运算符

条件表达式的简写形式，是 if-else 的紧凑替代。

condition ? exprIfTrue : exprIfFalse

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

适用于简单条件赋值，避免嵌套过深。

逗号运算符

依次执行多个表达式，并返回最后一个表达式的值。

let n1, n2;
const res = (n1 = 1, n2 = 2, n1 + n2);
console.log(res); // 输出：3

使用场景有限，常见于 for 循环初始化：
for (let i = 0, j = 10; i < j; i++, j--) { ... }

一元运算符

仅作用于一个操作数。

运算符	说明	示例
`++`	自增	`x++`（后置）或 `++x`（前置）
`--`	自减	`x--` 或 `--x`
`typeof`	返回数据类型	`typeof "hello" → "string"`
`void`	执行表达式并返回 `undefined`	`void(0)`
`+` / `-`	正 / 负号（也可用于类型转换）	`+"42" → 42`

let x = 5;
console.log(++x); // 6（先加 1，再输出）
console.log(x--); // 6（先输出，再减 1）
// 此时 x = 5

前置 vs 后置区别：
++x：先自增，再返回新值
x++：先返回原值，再自增

关系运算符

用于检查对象属性或实例关系。

运算符	说明	示例
`in`	检查对象是否包含某属性	`"name" in obj → true`
`instanceof`	检查对象是否为某构造函数的实例	`[] instanceof Array → true`

const obj = { length: 10 };
console.log("length" in obj);      // true
console.log([] instanceof Array);  // true

注意：instanceof 对跨 iframe 或不同全局环境的对象可能失效。

BigInt 运算符

用于处理超出 Number.MAX_SAFE_INTEGER 的大整数。

字面量以 n 结尾：123n
支持 +, -, *, /, %, ** 等算术运算
不能与普通 Number 混合运算

const big1 = 123456789012345678901234567890n;
const big2 = 987654321098765432109876543210n;
console.log(big1 + big2); 
// 输出：1111111110111111111011111111100n

字符串运算符

主要用于字符串拼接。

运算符	说明	示例
`+`	字符串连接	`"Hello" + " World"`
`+=`	追加字符串	`str += "!"`

const s = "Hello" + " " + "World";
console.log(s); // 输出：Hello World

注意：+ 在数字和字符串混合时会转为字符串拼接：
console.log(5 + "3"); // "53"

可选链运算符

Optional Chaining, ?.

安全访问嵌套对象属性，避免因中间属性为 null/undefined 而报错。

const obj = { name: "李明", address: { city: "北京" } };

console.log(obj.address?.city);    // "北京"
console.log(obj.contact?.phone);   // undefined（不会报错）

等价于传统写法：
obj.contact && obj.contact.phone
但更简洁、安全。

支持多种用法：

obj?.prop（属性访问）
obj?.[expr]（动态属性）
func?.()（函数调用）
arr?.[index]（数组元素）

运算符优先级

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

优先级（高→低）	运算符示例
1	`.` `?.` `[]` `()`
2	`++` `--` `+`（一元） `-`（一元） `!` `typeof`
3	`**`
4	`*` `/` `%`
5	`+` `-`（二元）
6	`<` `<=` `>` `>=` `in` `instanceof`
7	`==` `!=` `===` `!==`
8	`&&`
9	`?:`（三元）
10	`=` `+=` `-=` 等

重点总结

类别	关键点
算术	`+` 可拼接字符串，注意类型
赋值	复合赋值（如 `+=`）提升代码简洁性
比较	用 `===` 而非 `==`，避免隐式转换
逻辑	利用短路特性设置默认值
三元	适合简单条件，避免复杂嵌套
可选链	安全访问深层属性，现代开发必备
BigInt	大整数需加 `n`，不能与 `Number` 混用
一元	`++x` 与 `x++` 行为不同

思考题

以下代码输出什么？为什么？
```
console.log([] == ![]);
```
如何使用可选链安全地获取 user.profile.settings.theme，即使 user 或中间属性可能不存在？
为什么 typeof null 返回 "object"？这会影响哪些运算符的使用？