JavaScript 运算符详解
个人主页：康师傅前端面馆
在 JavaScript 编程中，运算符是实现各种计算和逻辑判断的基础工具。本文件详细介绍了 JavaScript 中各类运算符，从基础的算术、赋值、比较和逻辑运算符，到高级的位运算符、ES6+ 新运算符以及三元条件运算符等。同时，还阐述了使用运算符时常见的问题与陷阱，如浮点数精度问题、类型转换陷阱等，并提供了相应的解决方案。希望通过本文档，能帮助开发者全面了解和正确使用 JavaScript 运算符，提升代码的质量和效率。
一、基础运算符
1. 赋值运算符
let x = 10;
x += 5; // x = x + 5 → 15
x -= 3; // x = x - 3 → 12
x *= 2; // x = x * 2 → 24
x /= 4; // x = x / 4 → 6
x %= 4; // x = x % 4 → 2
2. 算术运算符
let a = 12, b = 5;
// 基本算术运算
a + b // 17 (加法)
a - b // 7 (减法)
a * b // 60 (乘法)
a / b // 2.4 (除法)
a % b // 2 (取模-求余数)
a ** b // 248832 (指数运算 ES7)
3. 比较运算符
5 == '5'; // true (值相等)
5 === '5'; // false (严格相等)
10 != '10'; // false
10 !== '10'; // true
3 > 2; // true
4 < 3; // false
4. 逻辑运算符
true && false; // false (AND)
true || false; // true (OR)
!true; // false (NOT)
// 短路求值
const value = null;
const result = value || 'default'; // 'default'
二、高级运算符
1. 位运算符
5 & 1; // 1 (AND)
5 | 1; // 5 (OR)
~5; // -6 (NOT)
5 ^ 1; // 4 (XOR)
5 << 1; // 10 (左移)
5 >> 1; // 2 (右移)
2. ES6+ 新运算符
// 展开运算符 (...)
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
// 可选链 (?.)
const user = { address: { city: 'Beijing' } };
const city = user?.address?.city; // 'Beijing'
// 空值合并 (??)
const count = null;
const displayCount = count ?? 0; // 0
// 指数运算符 (**)
2 ** 3; // 8 (等同于 Math.pow(2, 3))
3. 三元条件运算符
const age = 18;
const status = age >= 18 ? 'Adult' : 'Minor'; // 'Adult'
三、常见问题与陷阱
1. 浮点数精度问题
0.1 + 0.2 === 0.3; // false (实际为 0.30000000000000004)
// 解决方案：使用精度处理
const sum = (0.1 * 10 + 0.2 * 10) / 10; // 0.3
2. 类型转换陷阱
'5' + 3; // "53" (字符串拼接)
'5' - 3; // 2 (数字减法)
[] + {}; // "[object Object]"
{} + []; // 0 (解析为代码块 + 数组)
3. 短路求值误用
// 错误用法：0 会被当作 falsy
const count = 0;
const result = count || 10; // 10 (预期是0)
// 正确：使用空值合并
const correct = count ?? 10; // 0
4. 等值比较问题
NaN === NaN; // false (唯一不等于自身的值)
Object.is(NaN, NaN); // true (使用Object.is)
0 == false; // true
'' == false; // true
最佳实践建议
- 严格相等检查：始终使用
===和!==避免类型转换问题 - 处理浮点数：使用
toFixed()显示或使用数学库处理精度 - 可选链与空值合并：优先使用
?.和??替代&&短路 - 位运算优化：仅在性能关键场景使用位运算，添加明确注释
- 复杂运算：科学计算优先使用专用库而非原生运算符
