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函数、方法、对象代码
Oct 29 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
QT与javascript交互数据的实现
May 26 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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单件模式结合命令链模式使用说明
2008/09/07 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP实现的贪婪算法实例
2017/10/17 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
js获取url中"?"后面的字串方法
2014/05/15 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Vue中props的使用详解
2018/06/15 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
vue实现评价星星功能
2020/06/30 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python ubplot使用方法解析
2020/01/10 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
领导调研接待方案
2014/02/27 职场文书
给客户的感谢信
2015/01/21 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
图解上海144收音机
2021/04/22 无线电
Hive HQL支持2种查询语句风格
2022/06/25 数据库