再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿


Posted in Javascript onDecember 09, 2020

在开发中,有时,我们花了几个小时写的 JS 代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来。至此,本文主要记录 JS 常见的一些报错类型,以及常见的报错信息,分析其报错原因,并给予处理方法。并且将介绍几种捕获异常的方法。

常见的错误类型

RangeError:标记一个错误,当设置的数值超出相应的范围触发。比如,new Array(-20)。

ReferenceError:引用类型错误,当一个不存在的变量被引用时发生的错误。比如:console.log(a)。

SyntaxError:语法错误。比如 if(true) {。

TypeError:类型错误,表示值的类型非预期类型时发生的错误。

常见的错误

RangeError: Maximum call stack size exceeded

含义:超出了最大的堆栈大小

为什么报错?

在使用递归时消耗大量堆栈,导致游览器抛出错误,因为游览器给分配的内存不是无限的。

举个栗子

function pow(x, n) {
 return x * pow(x, n - 1);
}
pow(10,5);

处理办法

使用递归的时候,设定一个条件来终止递归,否则会无限循环,直到用尽调用堆栈空间为止。

function pow(x, n) {
  if (n == 1) return x;
  return x * pow(x, n - 1);
 }
pow(10,5);

ReferenceError: "x" is not defined

含义:“x”未定义

为什么报错?

当你引用一个没有定义的变量时,抛出一个ReferenceError; 当你使用变量的时候,这个变量必须要声明,或者你可以确保它在你当前的脚本或作用域 (scope) 中可用。

举个栗子

// 变量未声明
console.log(a);
fn();
// 错误的作用域  
function sum() {
 let number1 = 20,number2 = 30;
 return number1 + number2;
}
console.log(number1);

处理办法

1. 变量使用var|let|const声明

2. 提升变量的作用域

// 变量未声明
let a;
function fn() {};
console.log(a);
fn();

// 错误的作用域
let number1 = 20, number2 = 30;
function sum() {
  return number1 + number2;
}
console.log(number1);

SyntaxError: Identifier 'x' has already been declared

含义: 标识符已声明

为什么报错?

某个变量名称已经作为参数出现了,又在使用let再次声明。

举个栗子

// let 重复声明
let a = 0;
let a = 2;

// 在函数中参数已经出现,函数里使用let重新声明
function fn(arg) {
 let arg = [];
}

SyntaxError: Invalid or unexpected token

含义:捕获无效或意外的标记

为什么报错?

代码中有非法的字符或者缺少必要的标识符号,比如减号 ( - ) 与连接符 ( ? ) ,或者是英文双引号 ( " ) 与中文双引号 ( “ )。

举个栗子

// 遗漏的字符
let str = 'string;
let colors = ['#000', #333', '#666'];

// 使用特殊字符
let str1 = 'string";
let str2 = 5#5;

// 错配字符(使用中文引号字符)
let str3 = ‘string';

处理办法

检查是否有特殊字符或者是否遗漏一些字符。

SyntaxError: Unexpected end of input

含义:意外的终止输入

为什么报错?

代码中某些地方的括号或引号不匹配缺失,缺少()、[]、{}等。

举个栗子

// 缺少括号
if(true)
let obj = {id: 1
let arr = [1,2,3


// 缺少结束符号
(function () {
  console.log('hello world');
}()

处理办法

检查是否有特殊字符或者是否遗漏一些字符,括号需要配对出现。

TypeError: Cannot read property 'x' of undefined
TypeError: Cannot set property 'x' of undefined

含义:无法读取属性‘x', 无法设置属性 'x'

为什么报错?

访问或设置未定义(undefined)或null值的属性时会发生这种报错。

举个栗子

// undefined
let a = undefined;
a.id; // 读取
a.id = 1; // 设置
// null
let b = null;
b.id; // 读取
b.id = 2; // 设置
null.filter(item=>item)

处理办法

有一些方法可以避免这种错误。一种简单且适用于小型属性链的方法是使用逻辑运算符&&。

let obj = undefined;
console.log(obj&&obj.id);

TypeError: 'x' is not a constructor

含义:表示 ‘x'不是构造函数

为什么报错?

使用不是构造器的对象或者变量来作为构造器使用。比如:new 10;

举个栗子

var Car = 1;
new Car();
new Math();

处理办法

使用正确的构造函数。Generator functions 也不能作为构造器来使用。

function Car(make, model, year) {
 this.make = make;
 this.model = model;
 this.year = year;
}

SyntaxError: Invalid regular expression flags

含义:正则表达式标志无效

为什么报错?

在代码中出现了无效的正则表达式的标记。

举个栗子

let reg = /foo/bar;

处理办法

let reg = /foo/bar;

DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

含义:无效的Url

为什么报错?

在使用ajax 请求时url错误,导致请求失败

举个栗子

function createXHR(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('user=admin');
  xhr.onreadystatechange = function () {
  }
}
createXHR('http://192.168.10.8080'); // 错误url
createXHR('http:/192.168.10:8080/open'); // 缺少 /,注:有些游览器会自动补全

处理办法

检查url 请求是否正确,保证请求路径的完整。

createXHR('http://192.168.10:8080');

异常调试及捕获

try/catch

JS中处理异常的一种模式,try用于可能会发生错误的代码,catch对错误的处理

try{
 // 可能会导致错误的代码
}catch(error) {
 // 错误处理
}

举个栗子

try{
 console.log(a)
}catch(error) {
  // 打印错误信息
 console.log(error); // ReferenceError: a is not defined
}

throw

用来抛出一个用户自定义的异常,执行将被停止。

function getUserName(name) {
  if(!name) throw new Error('用户名无效');
  return name;
}
getUserName();

Promise 的异常处理

Promise执行中,本身自带try...catch的异常处理,出错时,将错误Rejact函数。

new Promise((resolve, reject) => {
 throw new Error('error!');
}).catch(alert);

console.log() 方法

在游览器中,使用console.log打印javaScript的值。

let value = '你最棒了,点个赞呗!'
console.log(value);

debugger 断点调试

用于停止执行 JavaScript,并调用调试函数。

let value = 15;
debugger
document.querySelector('body').innerHTML = '你最棒了,点个赞呗!'

总结

报错就是那么简单,根据这些代码敲一敲,熟悉一些常用的报错信息,便于在报错的时候快速地定位到报错原因。希望对可爱的你有用。

到此这篇关于再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿的文章就介绍到这了,更多相关javascript报错处理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
javascript RegExp 使用说明
May 21 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 #Javascript
ES6中的类(Class)示例详解
Dec 09 #Javascript
JavaScript实现表单验证功能
Dec 09 #Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 #Javascript
javascript全局自定义鼠标右键菜单
Dec 08 #Javascript
javascript局部自定义鼠标右键菜单
Dec 08 #Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 #Javascript
You might like
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python fabric使用笔记
2015/05/09 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
详解python中__name__的意义以及作用
2019/08/07 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
C++面试题目
2013/06/25 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
联村联户简报
2015/07/21 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书