JS中常见的错误类型

最新推荐文章于 2023-09-10 21:56:24 发布

webchang

最新推荐文章于 2023-09-10 21:56:24 发布

阅读量479

点赞数 2

分类专栏： JS 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43974265/article/details/112492853

版权

JS 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1. 常见的错误类型

Error: 所有错误的父类型
ReferenceError: 引用的变量不存在
TypeError: 数据类型不正确的错误
RangeError: 数据值不在其所允许的范围内
SyntaxError: 语法错误

//1.ReferenceError
console.log(a);//ReferenceError: a is not defined

//2.TypeError
let b;
console.log(b.name);//TypeError: Cannot read property 'name' of undefined

//3.RangeError
function fn() {
  fn()//递归调用，但是我们并没有给它结束的条件
}
fn();//RangeError: Maximum call stack size exceeded（翻译：超出了最大调用堆栈大小）

//4.SyntaxError
//变量名不能以数字开头，会出现语法错误
let 111a;//SyntaxError: Invalid or unexpected token

2. 错误处理

捕获错误: try ... catch

try {
  let b;
  console.log(b.name);
} catch (error) {
  console.log(error);//TypeError: Cannot read property 'name' of undefined
}

主动抛出错误: throw error

function doSomething() {
  let arr = [2, 4, 5];
  arr.forEach(item => {
    if (item % 2 === 0) {
      console.log(item);
    } else {
      throw new Error('当前数字是奇数，无法处理');//抛出一个错误对象的主要目的是在外部对它进行处理
    }
  })
}

try {
  doSomething();
} catch (e) {
  console.log(e);//Error: 当前数字是奇数，无法处理
}

3. 错误对象error

error 其实是一个对象，当我们使用console.log(error) 打印 error 对象的时候，实际上打印出来的是它的 stack 属性

message属性: 错误相关信息
stack属性: 函数调用栈记录信息
name属性：错误类型的名称，如TypeError

那么怎么看到 error 对象的全貌呢？我们可以打一个断点，在浏览器控制台中查看。动图演示一下：

这是演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>error</title>
</head>
<body>

</body>
<script>
  try {
    let b;
    console.log(b.name);
  } catch (error) {
    console.log(error);
  }
</script>
</html>