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 与或运算符 || && 妙用
Dec 09 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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使用异或实现的加密解密实例
2013/09/04 PHP
php使用curl访问https示例分享
2014/01/17 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
异步动态加载js与css文件的js代码
2013/09/15 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python机器学习实战之K均值聚类
2017/12/20 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
使用Python 统计高频字数的方法
2019/01/31 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
python实现图片素描效果
2020/09/26 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
天游软件面试
2013/11/23 面试题
学校十一活动方案
2014/02/01 职场文书
爱祖国演讲稿
2014/05/04 职场文书
应届生找工作求职信
2014/06/24 职场文书
关于保护环境的建议书
2019/06/24 职场文书