1. TypeError: Cannot read property 'xxx' of undefined
错误原因：尝试访问一个 undefined 或 null 对象的属性 / 方法。
示例代码：
const user = { name: "John" };
console.log(user.address.street); // user.address 为 undefined解决方案：
- 使用可选链操作符（
?.）：user.address?.street - 添加条件检查：
if (user.address) { ... } - 使用默认值：
const street = user.address?.street || "Unknown";
2. ReferenceError: xxx is not defined
错误原因：引用了一个未定义的变量、函数或模块。
示例代码：
console.log(myVariable); // 变量未声明解决方案：
- 检查变量名拼写是否正确
- 确认变量是否在当前作用域内（避免闭包陷阱）
- 确保依赖的模块已正确导入：
import { myFunction } from './module';
3. TypeError: xxx is not a function
错误原因：尝试调用一个非函数类型的变量。
示例代码：
const myObject = { name: "John" };
myObject.sayHello(); // myObject.sayHello 不是函数解决方案：
- 确认函数名拼写是否正确
- 检查函数是否被正确赋值：
const sayHello = () => { ... } - 避免覆盖内置函数：
console.log();
4. SyntaxError: Unexpected token
错误原因：代码中存在语法错误（如括号未闭合、缺少分号、引号不匹配）。
示例代码：
if (true { console.log("Hello"); } // 缺少右括号解决方案：
- 检查报错行及前后的代码
- 使用代码格式化工具（如 Prettier）自动修复
- 注意 JSX/TSX 中的尖括号与 HTML 标签的区别
5. RangeError: Maximum call stack size exceeded
错误原因：递归函数没有终止条件，导致无限循环调用。
示例代码：
function countdown(n) {
return countdown(n - 1); // 缺少终止条件
}
countdown(10);解决方案：
- 添加终止条件：
if (n <= 0) return; - 使用迭代（循环）替代递归
6. Promise rejection without a catch block
错误原因：Promise 被拒绝（rejected）但没有 .catch() 处理。
示例代码：
fetchData().then(data => { ... }); // 没有处理错误的情况解决方案：
- 添加
.catch()块：fetchData().then(...).catch(error => { ... }) - 使用
async/await和try/catch：
async function loadData() {
try {
const data = await fetchData();
} catch (error) {
console.error(error);
}
}7. NetworkError: Failed to fetch
错误原因：网络请求失败（如跨域问题、服务器未响应、URL 错误）。
示例代码：
fetch("https://api.example.com/data")
.then(response => response.json())
.catch(error => console.error("Fetch error:", error));解决方案：
- 检查 URL 是否正确
- 确认服务器是否正常运行
- 处理 CORS 问题
- 添加超时处理：
AbortController
8. Module not found: Error: Can't resolve 'xxx'
错误原因：在打包或编译时找不到指定的模块。
解决方案：
- 确认模块是否已安装：
npm install xxx - 检查导入路径是否正确：
import MyComponent from './components/MyComponent'; - 检查
package.json中的依赖配置
9. TypeError: this is undefined
错误原因：在类方法或回调函数中，this 指向意外对象。
示例代码：
class MyClass {
constructor() {
this.name = "MyClass";
}
greet() {
setTimeout(function() {
console.log(this.name); // this 指向 window 而非 MyClass 实例
}, 1000);
}
}解决方案：
- 使用箭头函数保留上下文：
setTimeout(() => { ... }, 1000) - 手动绑定
this：this.greet = this.greet.bind(this)
10. DOMException: Failed to execute 'appendChild' on 'Node'
错误原因：尝试将无效的节点添加到 DOM 中（如 null 或重复添加同一节点）。
解决方案：
- 确保节点已正确创建：
const element = document.createElement('div'); - 避免重复添加：
if (!parent.contains(child)) { parent.appendChild(child); }
总结建议
- 善用调试工具：Chrome DevTools 的断点调试、错误堆栈追踪。
- 阅读错误信息：错误提示中的行号、文件名和上下文很关键。
- 逐步排查：缩小问题范围，隔离出错代码。
