JS常见错误和解决方法集锦

webfunny

更懂前端的监控埋点：www.webfunny.com

hello大家好，很多同学使用webfunny前端监控系统也有一段时间了，发现在js错误统计功能中遇到了一些问题，不知道该如何下手解决。前端监控平台只是一个辅助工具（并非神器），正常情况下它们只能搜集问题，并以更好的方式展示给我们看，并不能够直接解决问题，所以还是需要我们根据错误信息来处理错误。今天我将为大家总结一下前端开发中常见的问题，以及解决方案。

第一类、运行时代码错误

运行时错误，会有很多种类型，分别为：

1. SyntaxError：语法错误；

这个一般是新手开发者容易犯得的错误，比如变量名的命名不规范，给关键字进行赋值，花括号没有成对儿出现等等。这些错误很容易在开发的时候就被发现，

常见的错误信息如: SyntaxError: Invalid or unexpected token；Uncaught SyntaxError: Unexpected token =；Uncaught SyntaxError: Unexpected number；

常见代码如下：

// 以数字开头的变量名
var 1a       // Uncaught SyntaxError: Invalid or unexpected token
// 给关键字赋值
function = 5     // Uncaught SyntaxError: Unexpected token =
// 没有写完的花括号
if (true) {
 console.log(1)
else {
 console.error(1)

2. Uncaught ReferenceError：引用错误

引用一个不存在的变量时发生的错误。将一个值分配给无法分配的对象，比如对函数的运行结果或者函数赋值。

常见错误信息如：Uncaught ReferenceError: xxx is not defined；Uncaught ReferenceError: Invalid left-hand side in assignment；

//引用了不存在的变量
a()                // Uncaught ReferenceError: a is not defined
console.log(b)     // Uncaught ReferenceError: b is not defined
//给一个无法被赋值的对象赋值
console.log("abc") = 1   // Uncaught ReferenceError: Invalid left-hand side in assignment

3. RangeError：范围错误

RangeError是当一个值超出有效范围时发生的错误。主要的有几种情况，第一是数组长度为负数，第二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。还有一种情况是当你调用一个不会终止的递归函数时。

常见错误信息如：Uncaught RangeError: Maximum Call Stack；Uncaught RangeError: Invalid array length；

// 数组长度为负数
[].length = -5      // Uncaught RangeError: Invalid array length
// Number对象的方法参数超出范围
var num = new Number(12.34)
console.log(num.toFixed(-1))   // Uncaught RangeError: toFixed() digits argument must be between 0 and 20 at Number.toFixed
// 说明: toFixed方法的作用是将数字四舍五入为指定小数位数的数字,参数是小数点后的位数,范围为0-20.

4. TypeError类型错误

变量或参数不是预期类型时发生的错误。比如使用new字符串、布尔值等原始类型和调用对象不存在的方法就会抛出这种错误，因为new命令的参数应该是一个构造函数。

常见错误类型如：Uncaught TypeError: Cannot Read Property；TypeError: ‘undefined’ Is Not an Object (evaluating...)；TypeError: Null Is Not an Object (evaluating...)；TypeError: ‘undefined’ Is Not a Function；TypeError: Cannot Read Property ‘length’；Uncaught TypeError: Cannot Set Property；

// 调用不存在的方法
123()        // Uncaught TypeError: 123 is not a function