JavaScript 新手最常见的 10 个错误
前言
JavaScript 是 Web 开发的核心语言，但它的灵活性也带来了很多陷阱。本文总结了初学者最容易犯的 10 个错误，帮你避免踩坑。
1. 混淆 == 和 ===
// 错误
if (0 == '') { // true，因为会类型转换
console.log("相等");
}
// 正确
if (0 === '') { // false，严格比较
console.log("相等");
}
**建议**：始终使用 `===` 进行比较。
2. 忘记 var、let、const 的区别
// 错误：使用 var 会导致变量提升和作用域问题
var x = 10;
// 正确：使用 let 或 const
let y = 10; // 可重新赋值
const z = 10; // 不可重新赋值
3. this 指向问题
const obj = {
name: "小明",
greet: function() {
console.log(this.name); // 正确
},
greetArrow: () => {
console.log(this.name); // 错误！箭头函数没有自己的 this
}
};
4. 异步回调地狱
// 错误：嵌套回调
getData(function(a) {
getMoreData(a, function(b) {
getEvenMoreData(b, function(c) {
console.log(c);
});
});
});
// 正确：使用 async/await
async function fetchData() {
const a = await getData();
const b = await getMoreData(a);
const c = await getEvenMoreData(b);
console.log(c);
}
5. 数组方法误用
const arr = [1, 2, 3, 4, 5];
// 错误：forEach 没有返回值
const doubled = arr.forEach(x => x * 2); // undefined
// 正确：使用 map
const doubled = arr.map(x => x * 2); // [2, 4, 6, 8, 10]
6. 对象解构错误
const user = { name: "小明", age: 15 };
// 错误
const { userName } = user; // undefined
// 正确
const { name: userName } = user; // "小明"
7. 忘记处理 Promise 错误
// 错误
fetch('/api/data')
.then(res => res.json())
.then(data => console.log(data));
// 如果请求失败，错误会被静默忽略
// 正确
fetch('/api/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
8. 闭包陷阱
// 错误：循环中的闭包
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// 输出：3, 3, 3
// 正确：使用 let
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// 输出：0, 1, 2
9. 忽略 null 和 undefined
const user = null;
// 错误：直接访问属性会报错
console.log(user.name); // TypeError
// 正确：使用可选链
console.log(user?.name); // undefined
10. 事件监听器内存泄漏
// 错误：重复添加监听器
button.addEventListener('click', handleClick);
button.addEventListener('click', handleClick);
// 正确：添加前先移除
button.removeEventListener('click', handleClick);
button.addEventListener('click', handleClick);
总结
避免这些常见错误，你的 JavaScript 代码会更健壮、更易维护。多练习、多调试，你会越来越熟练！
---
**壁虎在线编程** 的 JavaScript 基础课程包含 18 个关卡，每个关卡都有即时反馈和详细的错误提示。现在开始学习！