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


Posted in Javascript onAugust 19, 2020

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

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 代码报错内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
javascript头像上传代码实例
Sep 28 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
jQuery实现简单评论功能
Aug 19 #jQuery
原生JS实现多条件筛选
Aug 19 #Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 #Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 #Javascript
JS实现炫酷雪花飘落效果
Aug 19 #Javascript
javascript实现雪花飘落效果
Aug 19 #Javascript
js实现直播点击飘心效果
Aug 19 #Javascript
You might like
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP之短标签开启设置
2013/06/17 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python中用Spark模块的使用教程
2015/04/13 Python
python传递参数方式小结
2015/04/17 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python守护进程实现过程详解
2020/02/10 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
简单了解Python write writelines区别
2020/02/27 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
高级电工工作职责
2013/11/21 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
七年级地理教学计划
2015/01/22 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python