7种你应该知道的JavaScript常见的错误
<blockquote><p>转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。</p>
<p>原文出处：https://blog.bitsrc.io/types-of-native-errors-in-javascript-you-must-know-b8238d40e492</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/139239/202003/139239-20200313134608368-379897187.jpg" alt="" width="600"></p>
<p> </p>
<p class="hr">从浏览器的控制台到运行Node.js的计算机终端，我们到处都会看到各类错误。</p>
<p class="hr">这篇文章的重点是概述我们在JS开发过程中可能遇到的错误类型。</p>
<p class="hr"> </p>
<h1>1. RangeError</h1>
<p class="hr">当数字超出允许的值范围时，将抛出此错误。</p>
<p class="hr">例如，</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const l = console.log
const arr =
arr.length=90**99
</pre>
</div>
<p> </p>
<p>我们有一个带有两个元素的arr。接下来，我们尝试使数组包含<code>90**99 == 2.9512665430652753e+193</code>元素。</p>
<p align="left">这个数字超出了大小数组可以增长的范围。所以运行时它会抛出RangeError：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">$ node errors
errors.js:4
arr.length=90**99
^
RangeError: Invalid array length
</pre>
</div>
<p class="hr">因为我们要增加arr数组的数量超出了JS指定的范围。</p>
<p> </p>
<h1>2. ReferenceError</h1>
<p>当对变量/项的引用被破坏或不存在时，将引发此错误。也就是说，变量/项不存在。</p>
<p align="left">例如，</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const l=console.log
const cat = "cat"
cat
dog
</pre>
</div>
<p class="hr"> </p>
<p class="hr">我们有一个变量<span lang="EN-US">cat初始化为<span lang="EN-US">“ cat”。接下来，我们引用<span lang="EN-US">cat变量和<span lang="EN-US">dog变量。<span lang="EN-US">cat变量存在，而<span lang="EN-US">dog变量不存在。</span></span></span></span></span></span></p>
<p class="hr"><span lang="EN-US">cat将返回<span lang="EN-US">“ cat”，而<span lang="EN-US">dog会引发<span lang="EN-US">ReferenceError，因为在环境记录中找不到名为<span lang="EN-US">dog的变量。</span></span></span></span></span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">$ node errors
errors.js:3
dog
^
ReferenceError: dog is not defined
</pre>
</div>
<p>每当我们创建或定义变量时，变量名称都会写入环境记录中。此环境记录就像键值存储表一样，如下图：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+
</pre>
</div>
<p class="hr">每当我们引用变量时，它都会存储程序中定义的变量。当在记录中找到环境值并提取并返回值时，将以该变量的名称作为关键字搜索环境记录。调用尚未定义的函数。</p>
<p class="hr">现在，当我们创建或定义一个没有赋值的变量时。变量将键作为变量名写入环境记录，但该值将保持未定义状态。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">var cat
env record
+-----------------+
| Key | Value |
-------------------
| cat | undefined |
+-----------------+
</pre>
</div>
<p align="left">稍后为变量分配值时，将在env记录中搜索该变量，当发现该初始未定义值时，该赋值将被覆盖。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">var cat
cat = "cat"
env record
+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+
</pre>
</div>
<p align="left">因此，当在env记录中找不到变量名时，JS引擎会抛出RefernceError。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">+-------------+
| Key | Value |
---------------
| cat | "cat" |
+-------------+
cat // "cat", yes, :) it's there
dog // :( what's this? can't find it
</pre>
</div>
<p>注意：未定义的变量不会抛出ReferenceError，因为它存在于环境记录中只是它的值尚未设置。</p>
<h1>3. SyntaxError</h1>
<p class="hr">这是我们遇到的最常见的错误。当我们键入JS引擎难以理解的代码时，会出现此错误。解析期间，JS引擎捕获了此错误。</p>
<p class="hr">在JS引擎中，我们的代码经历了不同的阶段，然后才能在终端上看到运行结果。</p>
<ul>
<li>标记化</li>
<li>解析</li>
<li>执行</li>
</ul>
<p class="hr">标记化将源代码分解为各个单元。在这个阶段，将对数字，关键字，文字，运算符进行分类并分别进行标记。接下来，生成的token流将传递到解析阶段，由解析器处理。这是从token生成AST的地方。AST是我们代码结构的抽象数据结构。</p>
<p align="left">在标记化和解析这两个阶段，如果我们代码的语法不符合JS的语法规则，则会使执行阶段失败并引发SyntaxError。例如，</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const l = console.log
let cat h =“ cat”
</pre>
</div>
<p>这里的“h”明显是多余的，所以由于多了这个字符，会导致引擎抛出SyntaxError</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">$ node errors
errors.js:3
let cat h = "cat"
^
SyntaxError: Unexpected identifier
</pre>
</div>
<p>很显然，Node.js引擎发现了错误，由于这个不和谐字符的出现，导致cat变量的声明失败了。</p>
<p> </p>
<h1>4. TypeError</h1>
<p align="left">TypeError 是指对象用来表示值的类型非预期类型时发生的错误。例如，我们期望它是布尔值，但结果发现它是string类型。</p>
<p align="left">再例如：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const num = 123
num.toUpperCase()
</pre>
</div>
<p align="left">这会引发TypeError</p>
<div class="cnblogs_Highlighter">
<pre class="gw gx gy gz ha jq jr bz"><span id="c7f1" class="js ja dr ar jt b fl ju jv r jw" data-selectable-paragraph="">$ node errors<br>errors.js:4<br>num.toUpperCase()<br> ^<br><br><span id="77d1" class="js ja dr ar jt b fl jx jy jz ka kb jv r jw" data-selectable-paragraph="">TypeError: num.toUpperCase is not a function</span></span></pre>
</div>
<p align="left">因为toUpperCase函数需要字符串数据类型。toUpperCase函数是有意通用的；它不需要其this值是String对象。因此，可以将其转移到其他种类的对象中用作方法。</p>
<p align="left">如果我们在Objects，Boolean，Symbol，null，undefined数据类型上调用toUpperCase函数，则只有字符串会转换为大写或小写形式，我们将得到TypeError，因为它操作的数据类型错误。</p>
<h1>5. URIError</h1>
<p align="left">这说明了使用一种全局URI处理功能与其定义不兼容。</p>
<p align="left">JS中的URI（统一资源指示符）具有以下功能：decodeURI，decodeURIComponent等。</p>
<p align="left">如果我们用错误的参数调用其中任何一个，我们将得到一个URIError。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">decodeURI("%")
^
URIError: URI malformed
</pre>
</div>
<p align="left">encodeURI，获取URI的未编码版本。“％”不是正确的URI，因此引发了URIError。</p>
<p align="left">编码或解码URI时出现问题时，将引发URIError。</p>
<p> </p>
<h1>6. EvalError</h1>
<p align="left">如果非法调用 eval()，则抛出 EvalError 异常。</p>
<p align="left">根据EcmaSpec 2018版：</p>
<p>此异常不再会被JavaScript抛出，但是EvalError对象仍然保持兼容性。</p>
<h1>7. InternalError</h1>
<p align="left">该错误在JS引擎内部发生，特别是当它有太多数据要处理并且堆栈增长超过其关键限制时。</p>
<p align="left">当JS引擎被太多的递归，太多的切换情况等淹没时，就会发生这种情况</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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
}
</pre>
</div>
<p align="left">太多的递归，一个简单的例子是这样的：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">function foo() {
foo()
}
foo()
</pre>
</div>
<h1>结论</h1>
<p class="hr">正如我们所说，没有人能不犯错误。就我们输入的代码而言，发生错误是难以避免的。不过为了避免更多的错误出现，我们需要知道抛出的错误的类型是什么，我们该如何解决。</p>
<p class="hr">所以我们在这篇文章中列出了它们，并提供了一些示例来简要的来介绍了它们是如何发生的。</p>
<p class="hr">最后，希望本文的一些浅见能为你写出更好的代码提供一些帮助，谢谢！</p>
<p> </p>
<p> </p>
<p> </p>
<p class="hr"> </p>
<p class="hr"> </p>
<p class="hr"> </p>
<p class="hr"> </p>
<p class="hr"> </p>
<p class="hr"> </p>
<p class="hr"> </p>
</div>
<div id="MySignature" role="contentinfo">
<hr>
<br>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网</p>
<!--p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解企业级低代码开发平台，请前往活字格
</p><p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解可嵌入您系统的在线 Excel，请前往SpreadJS纯前端表格控件</p>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解嵌入式的商业智能和报表软件，请前往Wyn Enterprise
</p-->
<br><br><br>
来源：https://www.cnblogs.com/powertoolsteam/p/12486065.html
頁:
[1]