javaScript代码飘红报错看不懂？读完这篇文章再试试-6ren

javaScript代码飘红报错看不懂？读完这篇文章再试试

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章javaScript代码飘红报错看不懂？读完这篇文章再试试由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、本文将会出现以下英语词汇。

assignment[əˈsaɪnmənt] 赋值;分配 assignment [əˈsaɪnmənt] 分配;任务 call [kɔːl] 调用 caught [kɔːt] 捕获;接住;截住;拦住; constructor [kənˈstrʌktə(r)] 构造器 cannot [ˈkænɒt] 不是 catch [kætʃ] 接住;抓住 constant[ˈkɒnstənt] 常量 defined [dɪˈfaɪnd] 定义 error [ˈerə(r)] 错误; 差错; 谬误; exceeded [ɪkˈsiːdɪd] 超过 function [ˈfʌŋkʃn] 函数 finally [ˈfaɪnəli] 最终;最后 invalid [ɪnˈvælɪd] 不承认的; 无效的 initializer [ɪˈnɪʃəˌlaɪzə] 初始值 left-hand [ˈleft hænd] 左边的 Maximum [ˈmæksɪməm] 最大 property [ˈprɒpəti] 属性;财产 stack [stæk] 堆栈 shorthand [ˈʃɔːthænd] syntax [ˈsɪntæks] 句法; 句法规则; 语构; side [saɪd] 一边;一侧; reference [ˈrefrəns] 谈及; 涉及; range [reɪndʒ] 范围;界限;区间; 类; 种; token [ˈtəʊkən] 令牌;标记 try [traɪ] 尝试 throw [θrəʊ] 投;掷;抛;扔;摔;丢;猛推;使劲撞 Uncaught 未捕获 unexpected [ˌʌnɪkˈspektɪd] 出乎意料的;始料不及的 undefined [ˌʌndɪˈfaɪnd] 未定义 variable[ˈveəriəbl] 变量。

2、带你领略JS常见的四种Error类型。

1、ReferenceError（引用错误）：使用了未定义的变量。错误之前的代码会执行，之后代码不会执行.

 
    ? 
   
         // 1、变量未定义便直接使用 
        
         console.log(my); 
        
         // 报错：Uncaught ReferenceError: my is not defined 
        
         // 翻译：my未定义 
        
         // 2、将变量赋值给一个无法被赋值的东东 
        
         Math.random()=1; 
        
         // 报错：Uncaught ReferenceError: Invalid left-hand side in assignment 
        
         // 翻译：左侧的赋值无效

2、TypeError（类型错误）：变量或参数不是预期类型，或调用对象不存在的属性方法。错误之前的代码会执行，之后代码不会执行.

 
    ? 
   
         // 1、变量不是预期类型，比如对字符串、布尔值、数值等原始类型的值使用new命令。 
        
         let userName =  
         new 
         "zhangpeiyue" 
         ; 
        
         // 报错：Uncaught TypeError: "zhangpeiyue" is not a constructor 
        
         // 翻译："zhangpeiyue" 不是一个构造函数。new 操作符后应该是一个构造函数 
        
         // 2、变量不是预期类型,比如变量被作为函数来使用 
        
         let userName =  
         "zhangpeiyue" 
         ; 
        
         console.log(userName()) 
        
         // 报错：Uncaught TypeError: userName is not a function 
        
         // 翻译：userName 不是一个函数 
        
         // 3、对象的属性或方法不存在 
        
         const obj = undefined; 
         // 为null也会报错 
        
         console.log(obj.userName); 
        
         // 报错：Uncaught TypeError: Cannot read property 'userName' of undefined 
        
         // 翻译：undefined的环境下无法读取属性“userName”

3、RangeError（范围错误）：数据值不在JS所允许的范围内。错误之前的代码会执行，之后代码不会执行.

 
    ? 
   
         // 1、递归函数未设置跳出的条件 
        
         function 
         run(){ 
        
         run(); 
        
         } 
        
         run(); 
        
         // 报错：Uncaught RangeError: Maximum call stack size exceeded 
        
         // 翻译：超出最大调用堆栈大小。原因函数一直调用，直到达到调用堆栈限制。 
        
         // 2、无效的数组长度，应该是个正整数 
        
         const arr = 
         new 
         Array(-1); 
        
         // 报错：Uncaught RangeError: Invalid array length 
        
         // 翻译：无效的数组长度

4、SyntaxError（语法错误）：即写的代码不符合js编码规则。我们可以根据后面的信息提示去修改错误，当然，语法错误，浏览器会直接报错，整个代码都不会执行.

 
    ? 
   
         // 1、程序错误，比如写错，或者缺少 ， ） ； } 这些符号。 
        
         const obj = {; 
        
         // 报错：Uncaught SyntaxError: Unexpected token ';' 
        
         // 翻译：";"该标记有些出乎意料。 
        
         // 2、变量定义不合法 
        
         let 8userName =  
         "zhangpeiyue" 
         ; 
        
         // 报错：Uncaught SyntaxError: Invalid or unexpected token 
        
         // 翻译：定义的变量标记无效 
        
         // 3、对象属性赋值语法错误 
        
         const obj = { 
        
         userName =  
         "zhangpeiyue" 
        
         } 
        
         // 报错：Uncaught SyntaxError: Invalid shorthand property initializer 
        
         // 翻译：对象属性初始值无效。原因：对象中属性与其对应的值之间使用“=” 
        
         // 语法错误有很多，在此就不一一列举了

3、通过try…catch处理Error 。

1、被try包裹的代码块一旦出现Error,会将Error传递给catch并运行catch代码块。不会影响后续代码运行.

 
    ? 
   
         try 
         { 
        
         console.log(userName); 
        
         } 
         catch 
         (err) { 
        
         // ReferenceError: userName is not defined 
        
         console.log(err); 
        
         } 
        
         console.log( 
         "我还会继续运行哦！！" 
         )

2、出现SyntaxError（语法错误），不会被抛出.

 
    ? 
   
         try 
         { 
        
         // Uncaught SyntaxError: Invalid or unexpected token 
        
         const 8userName =  
         "zhangpeiyue" 
         ; 
        
         } 
         catch 
         (err) { 
        
         console.log(err); 
        
         } 
        
         console.log( 
         "我不会继续运行了！！" 
         )

3、通过 throw new Error 抛出错误。

 
    ? 
   
         try 
         { 
        
         throw 
         new 
         Error( 
         "出现异常了" 
         ); 
        
         } 
         catch 
         (err) { 
        
         // 错误相关信息 
        
         console.log(err.message); 
         // 出现异常了 
        
         // 函数调用栈记录信息 
        
         console.log(err.stack); 
         // Error: 出现异常了 
        
         } 
        
         console.log( 
         "我还会继续运行哦！！" 
         )

4、不管有没有异常，finally中的代码都会在try和catch之后执行。

 
    ? 
   
         try 
         { 
        
         throw 
         new 
         Error( 
         "出现异常了" 
         ); 
        
         } 
         catch 
         (err) { 
        
         // 错误相关信息 
        
         console.log(err.message); 
         // 出现异常了 
        
         // 函数调用栈记录信息 
        
         console.log(err.stack); 
         // Error: 出现异常了 
        
         }finally { 
        
         // 不管有没有异常，我都会执行。哪怕你有return,我也会执行！ 
        
         console.log( 
         "不管有没有异常，我都会执行。哪怕你有return,我也会执行！" 
         ) 
        
         } 
        
         console.log( 
         "我还会继续运行哦！！" 
         )

5、总结。

只要不发生语法错误，程序即可不中断执行。
使用try包裹的代码，即使不出错，效率也比不用try包裹的代码低。
在try中，尽量少的包含可能出错的代码。
无法提前预知错误类型的错误，必须用try catch捕获。
finally可以省略。

 
    ? 
   
         try 
         { 
        
         //可能发生错误的代码 
        
         } 
         catch 
         (err){ 
        
         //只有发生错误时才执行的代码 
        
         }finally{ 
        
         //无论是否出错，肯定都要执行的代码 
        
         }