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

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

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]  变量

二、带你领略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
// 翻译:对象属性初始值无效。原因:对象中属性与其对应的值之间使用“=”

// 语法错误有很多,在此就不一一列举了

三、通过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{
 //无论是否出错,肯定都要执行的代码
}

最后,代码出现错误并不可怕,真正可怕的是你的业务及代码逻辑出现问题才是真正灾难的开始!

到此这篇关于javaScript代码飘红报错看不懂?读完这篇文章再试试的文章就介绍到这了,更多相关javaScript 代码报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript代码在ie8里报错 document.getElementById(...) 为空或不是对象的解决方法 原创

    ie8中对于声明文档类型更加严格如下面的代码. 运行环境: function osdo(str){ document.getElementById("os").value=str; } 清空 Windows平台 S60v2 S60v3 CHM PDF PPT WORD EXCEL asp asp+access asp+sqlserver asp+sql/access php源码 php php+mysqljsp asp.net源码 asp.net asp.net+access asp.

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

    一.本文将会出现以下英语词汇 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ə(

  • 还不懂递归?读完这篇文章保证你会懂

    前言 这篇文章一个多月前以英文发表在我的个人博客,现在抽空翻译成中文,并补充一些没来得及写的内容. 昨天我发表的<如何在 JS 代码中消灭 for 循环>引起很多争议.为了避免没营养的讨论,我先声明一下.递归性能差是没争议的事实,如果你觉得 for 循环更好,没必要学递归,那看到这里你可以不用看了.这篇文章要展示的大部分代码,仅仅是学习目的,我不推荐在生产环境中用.但是如果你对函数式编程感兴趣,想深入理解一些核心概念,你应该读下去. 今年年初我开始学 Haskell 的时候,我被函数式代码的优

  • JavaScript利用append添加元素报错的解决方法

    1.错误描述 在IE浏览器上: Uncaught HierarchyRequestError:Failed to excute 'appendChild' on 'Node':The new child element contains the parent. 在谷歌浏览器上: SCRIPT5022:DOM Exception:HIERARCHY_REQUEST_ERR(3) error 2.错误原因 在append()中包含append() 如: append(append("String&q

  • 使用MyBatisPlus自动生成代码后tomcat运行报错的问题及解决方法

    自动生成的代码 报错 解决办法:把自动xml文件中自动生成的二级缓存注释掉 总结 到此这篇关于使用MyBatisPlus自动生成代码后tomcat运行报错的问题及解决方法的文章就介绍到这了,更多相关MyBatisPlus自动生成代码tomcat运行报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • 解决IDEA2020.2插件lombok报错问题(亲测有效)

    先看看问题是否和我一样 由于我的修复好了,所以我的没错误了,我指出我以前的错误看是否匹配 当你只写一个注解的时候是好的,有时候写第一个注解的时候就崩了,第二个注解就更不用说了 是不是下面这个红框框的标志都不见了?并且你的右下角也报错了 如果是可以直接下载这个非官方补丁: 链接:https://pan.baidu.com/s/1QvDWMN3aihHHus9f1pVPFQ 提取码:we6s 下载下来后是直接是这个样子的 因为我安装的是解压后的,所以我发的是解压后的,如果安装有问题可以在评论区告诉我

  • SpringBoot返回Json对象报错(返回对象为空{})

    目录 1 需求描述 2 代码展示 3 原因分析 4 解决方案 5 效果展示 6 结束语 1 需求描述 我们现在要干一个什么事情呢,我们要在浏览器输入一个请求地址,然后我们的后端就给我返回一个User对象即可,并且我希望以Json的格式返回.这个需求很明确,我们先直观的展示一下效果.发送请求: 接受结果: 2 代码展示 行了,明确了需求我们开始整活儿.首先我们老规矩还是先展示一下目录结构(其中标红的文件使我们今天要用到的): 接下来是具体的文件内容首先呢我们展示一下User.java文件 pack

  • IDEA 单元测试报错:Class not found:xxxx springboot的解决

    目录 IDEA单元测试报错:Class not found:xxxx springboot 报错 解决 让人抓狂的ClassNotFoundException 启动项目时,始终出现如下错误提示 在项目的pom文件,添加了以下代码 IDEA单元测试报错:Class not found:xxxx springboot 报错 引入了新依赖,想着在测试模块进行测试. 结果报错说 Class not found:xxxx 说找不到这个类. 解决 把安装了新依赖的父工程 重新 install一下 再进行测试

  • Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • 如何监听Vue项目报错的4种方式 

    目录 背景 onerror element.onerror errorHandler errorCaptured error传播规则(划重点) 如何监听异步错误 总结 背景 在开发Vue项目时,使用浏览器调试可以比较清晰的看到报的什么错.在哪报错,或者使用console.log()打印出报错信息,以便快速定位到报错源头并解决,但是如果项目上线了又怎么查看呢.对于上线项目来说,一般都是会有代码混淆以及禁用console.log(),这个时候再使用浏览器调试就有点不太方便了.另一种场景,如果要做一个

  • Pycharm最全报错的原因与解决方法总结(推荐!)

    目录 前言 (一)Pycharm报错:No R interpreter defined (二)找不到指定的模板:ImportError:DDL load failed while importing ft2font: (三)pycharm中无法识别导入自己写的模块 (四)pycharm光标变粗,无法编辑代码 (五)使用Pycharm给Python程序传递参数 总结 前言 最近在使用Pycharm,在运行或者安装的过程中出现了各种各样的报错,前面已经介绍过安装pygame出现报错的解决方法.文章总

随机推荐