1. 误用==
导致的隐式类型转换
问题:
console.log(0 == '0'); // true(类型强制转换)
解决方案:始终使用===
进行严格比较,避免意外行为:
console.log(0 === '0'); // false
2. 变量提升引发的作用域问题
问题:
console.log(x); // undefined(不报错,非预期) var x = 10;
解决方案:使用let/const
的块级作用域:
console.log(x); // ReferenceError let x = 10;
3. 循环中的异步陷阱
问题:
for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i)); // 输出5次5 }
解决方案:使用let
或闭包:
for (let i = 0; i < 5; i++) { setTimeout(() => console.log(i)); // 0,1,2,3,4 }
4. 未处理的JSON解析异常
问题:
const data = JSON.parse(rawData); // 可能抛出SyntaxError
解决方案:添加错误边界:try/catch
function safeParse(json) { try { return { data: JSON.parse(json) }; } catch { return { error: 'Invalid JSON' }; } }
5. 内存泄漏:被遗忘的定时器
问题:
setInterval(() => { // 组件卸载后仍执行 }, 1000);
解决方案:使用清理函数:
// 适当的时机如beforeDestroy清掉定时器 clearInterval(timer);
6. 过度嵌套的条件判断
问题:
if (user) { if (user.profile) { // ... } }
解决方案:使用可选链:
console.log(user?.profile?.name);
7. 忽略Error对象的堆栈信息
问题:
throw '字符串错误'; // 丢失调用栈
解决方案:始终抛出Error实例:
throw new Error('详细描述', { cause: originalError });
8. 缺乏性能监控
若遇到无性能评估的复杂计算,可使用performance.mark
进行耗时统计,类似console.time
performance.mark('start'); // ...执行代码 performance.measure('耗时', 'start');