10秒钟内说出js中有哪些内置错误类型

简介: 如果现在立刻让你回答,说下你了解的js中有哪些错误类型?能说出几个?日常开发中,我们会碰到各种各样的js报错信息。大部分情况,我们只要看到控制台有飘红,就知道代码执行有问题。但是这些错误都有哪些类型?可能没有太关注过,如果我们知道了这些错误类型出现的场景,那是不是对我们定位问题有所帮助,甚至能提高我们以后的代码质量。

如果现在立刻让你回答,说下你了解的js中有哪些错误类型?能说出几个?

日常开发中,我们会碰到各种各样的js报错信息。大部分情况,我们只要看到控制台有飘红,就知道代码执行有问题。但是这些错误都有哪些类型?可能没有太关注过,如果我们知道了这些错误类型出现的场景,那是不是对我们定位问题有所帮助,甚至能提高我们以后的代码质量。

基类 Error


Error是基类型,其他内置错误类型都是继承该类型,因此所有内置错误类型都是共享相同的属性(所有错误对象上的方法都是这个默认类型定义的方法)。

浏览器很少会抛出Error类型的错误,该类型主要用于抛出自定义错误。

构造函数

//创建一个错误
new Error([message[, fileName[,lineNumber]]]) //参数均为可选

实例上有哪些属性?

30ca7c175c597c2a708128227f6fcaef_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

内置错误类型1 :ReferenceError(引用错误)

常见指数:🌟🌟🌟🌟🌟   不夸张的说,线上80%错误都是这个

表示引用错误,使用了未声明的变量。

错误之前的代码会执行,之后代码不会执行。

使用未声明的变量

a0ebfd53c5d257f3b460b370519bf7f4_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

把变量赋值给一个无法赋值的xx

表示:左侧的赋值无效

aecad208dbdd30ae1ba6e1c5fa49acb1_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

捕获一个错误

try {
  var a = undefinedVariable;
} catch (e) {
  console.log(e instanceof ReferenceError); // true
  console.log(e.message);                   // "undefinedVariable is not defined"
  console.log(e.name);                      // "ReferenceError"
  console.log(e.fileName);                  // "Scratchpad/1"
  console.log(e.lineNumber);                // 2
  console.log(e.columnNumber);              // 6
  console.log(e.stack);                     // "@Scratchpad/2:2:7\n"
}

新建错误

try {
  throw new ReferenceError('Hello', 'aaa.js', 10);
} catch (e) {
  console.log(e instanceof ReferenceError); // true
  console.log(e.message);                   // "Hello"
  console.log(e.name);                      // "ReferenceError"
  console.log(e.fileName);                  // "aaa.js"
  console.log(e.lineNumber);                // 10
  console.log(e.columnNumber);              // 0
  console.log(e.stack);                     // "@Scratchpad/2:2:9\n"
}

内置错误类型2:RangeError

常见指数:⭐⭐⭐ 说实话,不太常见,但很容易构造

会在数值越界时抛出.例如,定义数组时如果设置了不支持的长度,如-1,又或者没有给递归设置停止条件时触发。

该类型在JavaScript发生不多。

98f511d46271f9ddee8c06319158cdc3_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

7bc54f89793fb128bbfc7e74af96a0c9_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

超过数组最大长度限制

06188ca95d165bf3b69e74a3eeea81e2_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

自定义RangeError错误

var check = function(num) {
  if (num < MIN || num > MAX) {
    throw new RangeError('Parameter must be between ' + MIN + ' and ' + MAX);
  }
};
try {
  check(500);
}
catch (e) {
  if (e instanceof RangeError) {
    // 处理越界错误
  }
}

内置错误类型3:TypeError

常见指数:⭐⭐⭐⭐ 使用ts之前可能会有,ts之后应该能干掉一大部分

TypeError在JavaScript中很常见,主要发生变量在运行时的访问不是预期类型,或者访问不存在的方法时,尤其是在使用类型特定的操作而变量类型不对时。

在给函数传参前没有验证的情况下,错误发生较多。

比如a变量是个基本类型,却被当做函数调用

54b8bb9c7f252d5ebd41aed289709484_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

比如访问不存在的方法

933619a5deb7abd6ec02574460df81f5_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

内置错误类型4:SyntaxError

常见指数:⭐⭐⭐⭐⭐ 太常见了,一般的在开发环境,调试的时候

这是最常见的错误。当我们输入 JS 引擎不能理解的代码时,就会发生这个错误。

JS 引擎在解析期间会捕获了这个错误,而不是运行时。

1a6182b4d58b99d6eb8149df9146864c_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

或者给eval()传入的字符串包含JavaScript语法错误时,也会抛出此异常

ec076686fc7540d222aa903cd4869879_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png


内置错误类型5:URIError

常见指数:⭐ 很少见

URIError只会在使用encodeURL()或decodeURL()时,传入了格式错误的URL时发生,但非常罕见,因为上面两个函数非常稳健.

比如对空格进行编码,然后把编码的结果改为非法的结果,对该结果再进行解码,就会抛出异常

5b6b92d37bf9c1ea7408955b8640bee9_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png


内置错误类型6:EvalError

常见指数:0 稀有

会在使用eval()函数发生异常时抛出。

EvalError 不在当前ECMAScript规范中使用,因此不会被运行时抛出. 但是对象本身仍然与规范的早期版本向后兼容.

以下来自mdn

d541f7bd162b20dc3bafaa5fadab2ed6_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

内置错误类型7:InternalError

常见指数:0 稀有

表示出现在JavaScript引擎内部的错误。

例如,递归过多导致了栈溢出.这类型并不是代码中通常要处理的错误,如果真的发生了这种错误,很可能代码哪里搞错了或者有危险.

但事实证明递归过多导致栈溢出报的是RangeError。

d663c7c13bfac2ca2df0119afd11ed4b_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

目录
相关文章
|
1月前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
2月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
63 0
|
4月前
|
前端开发 JavaScript 搜索推荐
Next.js 适合什么类型的项目开发?
【8月更文挑战第4天】Next.js 适合什么类型的项目开发?
256 3
|
25天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
1月前
|
存储 JavaScript 前端开发
js的基础类型和引用类型
【10月更文挑战第29天】理解 JavaScript 中的基础类型和引用类型的区别对于正确地编写代码和理解程序的行为非常重要。在实际开发中,需要根据具体的需求合理地选择和使用不同的数据类型,以避免出现一些意想不到的错误和问题。同时,在处理引用类型数据时,要特别注意对象的引用关系,避免因共享引用而导致的数据不一致等问题。
|
6月前
|
JavaScript 前端开发
JavaScript中的布尔类型与数字类型详解
JavaScript中的布尔类型与数字类型详解
|
2月前
|
JavaScript 前端开发
JavaScript返回判断类型有哪些?
JavaScript返回判断类型有哪些?
36 0
|
4月前
|
缓存 JavaScript 前端开发