JS错误 - 前端常见问题

常见错误类型一览

错误类型	错误信息	原因
ReferenceError	`xxx is not defined`	使用了未定义的变量
TypeError	`Cannot read property 'xxx' of undefined`	访问 undefined/null 的属性
SyntaxError	`Unexpected token`	语法错误
RangeError	`Invalid array length`	数组长度无效
URIError	`URI malformed`	URI 编码/解码错误
EvalError	`EvalError`	eval() 使用错误

1. ReferenceError - 未定义变量

// 错误：使用了未声明的变量
console.log(myVar);  // ReferenceError: myVar is not defined

// 正确：先声明再使用
let myVar = 'hello';
console.log(myVar);  // 'hello'

// 错误：变量作用域问题
function test() {
  console.log(x);  // ReferenceError
  let x = 1;
}
test();

// 正确：先声明
function test() {
  let x = 1;
  console.log(x);  // 1
}

2. TypeError - 类型错误

// 错误：访问 null/undefined 的属性
const obj = null;
obj.name;  // TypeError: Cannot read property 'name' of null

const arr;
arr[0];  // TypeError: Cannot read property '0' of undefined

// 正确：使用可选链
const obj = null;
console.log(obj?.name);  // undefined，不会报错

// 正确：使用 && 短路运算
const name = obj && obj.name;

// 错误：调用非函数
const fn = 'hello';
fn();  // TypeError: fn is not a function

// 正确：检查类型
if (typeof fn === 'function') {
  fn();
}

3. 异步错误处理

// Promise 未捕获错误
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));  // 捕获错误

// async/await 错误处理
async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('请求失败:', err);
    throw err;
  }
}

// 全局未捕获 Promise 错误
window.addEventListener('unhandledrejection', function(event) {
  console.error('未捕获的 Promise 错误:', event.reason);
});

4. 常见逻辑错误

错误类型	错误示例	正确写法
== 与 ===	`if (a == null)`	`if (a === null \|\| a === undefined)`
数组比较	`[] === []`	`[].length === [].length`
对象比较	`{} === {}`	`JSON.stringify(a) === JSON.stringify(b)`
浮点数运算	`0.1 + 0.2 === 0.3`	`Math.abs(0.1+0.2-0.3) < 0.0001`
循环中的闭包	`for(var i=0;i<3;i++){setTimeout(()=>console.log(i))}`	`for(let i=0;i<3;i++){setTimeout(()=>console.log(i))}`

5. 调试技巧

技巧	用法
console.error()	输出错误信息
console.trace()	打印堆栈跟踪
debugger	设置断点
try-catch	捕获异常
Chrome DevTools	Sources 面板调试

// 使用 try-catch 捕获同步错误
try {
  const result = JSON.parse(invalidJson);
} catch (e) {
  console.error('JSON 解析错误:', e.message);
}

// 使用 console.trace 查看调用栈
function a() { b(); }
function b() { c(); }
function c() { 
  console.trace('调用栈'); 
}
a();

// 使用 debugger 断点
function calculate(a, b) {
  debugger;  // 执行到这里会自动暂停
  return a + b;
}

6. 错误边界与监控

// React 错误边界（类组件）
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('错误边界捕获:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return 出错了;
    }
    return this.props.children;
  }
}

// 使用错误边界

  

7. 最佳实践

实践	说明
使用严格模式	`'use strict';` 捕获更多错误
使用 TypeScript	编译时检查类型错误
启用 ESLint	静态代码分析，检测潜在问题
添加错误监控	Sentry、Bugsnag 等工具
合理使用 try-catch	只在需要时捕获，不要过度使用

JavaScript 常见错误与解决方案

常见错误类型一览

1. ReferenceError - 未定义变量

2. TypeError - 类型错误

3. 异步错误处理

4. 常见逻辑错误

5. 调试技巧

6. 错误边界与监控

出错了

7. 最佳实践