7个你应该知道的JS原生错误类型


Posted in Javascript onApril 29, 2021

概述

从浏览器控制台到运行 Node.js的终端,我们到处都会看到错误。本文的重点是概述我们在js开发过程中可能遇到的错误类型。

提示:良好的错误提示会导致快速而无痛的发展经历与缓慢而痛苦的发展经历之间的区别。在编写可重用的代码时,请确保自己在编写清晰易懂的错误处理代码。

1. RangeError

当数字超出允许的值范围时,将会抛出此错误。

例如

const l = console.logconst arr = [90,88]
arr.length=90**99

我们有一个数组,带有两个元素的 arr。接下来,尝试将数组扩展为包含90**99 == 2.9512665430652753e+193个元素。

这个数字超出了数组大小可以增长的范围。运行它会抛出 RangeError:

$ node errors

errors.js:4

arr.length=90**99

 ^RangeError: Invalid array length

因为我们要增加 arr 数组的大小超出了 JS 指定的范围。

2. ReferenceError

当对变量或项目的引用被破坏时,将会引发此错误。那是变量或项目不存在。

例如

const l=console.logconst cat = "cat"
cat
dog

有一个变量cat被初始化为 “cat”。接下来引用了cat变量和dog变量。cat变量存在,而dog变量不存在。

cat将返回 “cat”,而dog将引发引用错误,因为在环境记录中找不到名称dog。

$ node errors

errors.js:3

dog

^ReferenceError: dog is not defined

每当我们创建或定义变量时,变量名称都会写入环境记录中。环境记录就像键值存储一样,

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+

每当我们引用变量时,它都会存储程序中定义的变量。当在记录中找到环境值并提取并返回值时,将以该变量的名称作为关键字在环境记录进行搜索。调用尚未定义的函数。

现在,当我们创建或定义一个没有赋值的变量时。变量将其键作为变量名写入环境记录,但其值将会保持未定义的状态。

var catenv record

+-----------------+

| Key | Value |

-------------------

| cat | undefined |

+-----------------+

稍后为变量分配值时,将在环境记录中搜索该变量,当发现它未定义值时,该赋值将被覆盖。

var cat

cat = "cat"env record

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+

所以当在环境记录中找不到变量名时,JS 引擎将引发 RefernceError。

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+cat // "cat", yes, :) it's there

dog // :( what's this? can't find it

注意:未定义的变量不会抛出 ReferenceError,因为它在于环境记录中的值尚未设置。

3. SyntaxError

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

JS 引擎在解析期间捕获了这个错误。在 JS 引擎中,我们的代码经历了不同的阶段,然后才能在终端上看到结果。

  • 标记化
  • 解析
  • 解释

标记化将代码的源分解为各个单元。在此阶段,将对数字、关键字、文字、运算符进行分类并分别标记。

接下来,生成的标记流将会传递到解析阶段,由解析器处理。这是从标记流生成 AST 的地方。 AST 是代码结构的抽象表示。

在标记化和解析这两个阶段,如果我们代码的语法不符合 JS 的语法规则,则会使该阶段失败并引发 SyntaxError。例如:

const l = console.loglet cat h = "cat"

代码中的 “h” 代表什么?这个 “h” 破坏了代码。

$ node errors

errors.js:3

let cat h = "cat"

 ^SyntaxError: Unexpected identifier

看,Node.js 指出了问题的所在。它说 “h” 是意外的,它破坏了cat 变量的声明。

因此,可以说语法错误在解析或编译期间发生。

4. TypeError

当其他 NativeError 对象中没有适当的失败原因的指示时,TypeError 用于指示操作失败。

对错误的数据类型执行操作时会发生 TypeError,例如:

如果我们尝试将数字转换为大写,如下所示:

const num = 123
num.toUpperCase()

这将引发TypeError

$ node errors

errors.js:4

num.toUpperCase()

 ^TypeError: num.toUpperCase is not a function

因为toUpperCase函数需要字符串数据类型。toUpperCase函数是有意通用的;它不需要其this值是String对象。因此,可以将其转移到其他种类的对象中用作方法。

只有字符串才会转换为大写或小写形式,如果我们在 Objects、Boolean、Symbol、null、undefined 数据类型上调用toUpperCase函数,则将会得到 TypeError,因为它操作的数据类型错误。

5. URIError

这表明使用了一种与其定义不兼容的全局 URI 处理函数。

JS 中的 URI(统一资源指示符)具有以下功能:decodeURI、decodeURIComponent 等。

如果我们用错误的参数去调用其中任何一个,将得会到一个 URIError。

decodeURI("%")
^URIError: URI malformed

encodeURI用于获取 URI 的未编码版本。 “%” 不是正确的 URI,因此引发了URIError。

当 URI 编码或解码出现问题时,会引发 URIError。

6. EvalError

当使用全局eval()函数时,这用于识别错误。

根据 EcmaSpec 2018 版:

此规范当前未使用此异常。保留它目的是为了与本规范的先前版本兼容。

7. InternalError

该错误在 JS 引擎内部发生,特别是当它有太多数据要处理并且栈增长超过其关键限制的时侯。

当 JS 引擎被过多的递归和切换情况等淹没时,就会发生这种问题

switch(num) {
 case 1:
 ...
 break
 case 2:
 ...
 break
 case 3:
 ...
 break
 case 4:
 ...
 break
 case 5:
 ...
 break
 case 6:
 ...
 break
 case 7:
 ...
 break
 ... up to 1000 cases
 }

以下是一个简单的过多递归的例子:

function foo() {
    foo()
}
foo()

总结

正如我们所说,谁都会犯错误。就我们敲代码这件事而言,这是一个稳定的事件。为了克服它,我们需要知道可以抛出的原生错误的类型。本文中列出了它们,并提供了一些示例来说明它们是如何引发的。

所以无论什么时候在终端或浏览器中引发错误,你都可以轻松发现错误产生的位置和方式,并能够编写更好、更不易出错的代码。

以上就是7个你应该知道的JS原生错误类型的详细内容,更多关于JS原生错误类型的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
吃通javascript正则表达式
Apr 21 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
如何使用JavaScript策略模式校验表单
Apr 29 #Javascript
react中props 的使用及进行限制的方法
Apr 28 #Javascript
React Hook用法示例详解(6个常见hook)
vue使用v-model进行跨组件绑定的基本实现方法
为什么node.js不适合大型项目
JavaScript控制台的更多功能
Apr 28 #Javascript
You might like
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php中session与cookie的比较
2015/01/27 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
Javascript 作用域使用说明
2009/08/13 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python中文编码知识点
2019/02/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
优秀员工评语
2014/02/10 职场文书
人事专员的岗位职责
2014/03/01 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
质量保证书格式模板
2015/02/27 职场文书
新郎结婚感言
2015/07/31 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
python实现商品进销存管理系统
2022/05/30 Python
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript