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 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
详解Vue中watch的高级用法
May 02 Javascript
vue路由插件之vue-route
Jun 13 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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/10/03 PHP
php生成随机密码的几种方法
2011/01/17 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python logging模块用法示例
2018/08/28 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
虚拟机下载python是否需要联网
2020/07/27 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
表扬信格式
2014/01/12 职场文书
高中英语教学反思
2014/02/04 职场文书
化工专业求职信
2014/07/01 职场文书
行政上诉状范文
2015/05/23 职场文书
思品教学工作总结
2015/08/10 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL