前端常见报错信息

前端常见报错信息汇总

JavaScript中的报错

分类

错误	含义	分析
SyntaxError	语法错误	解析代码时发生的语法错误
ReferenceError	引用错误	无效引用
RangeError	范围错误	数值超出有效范围
TypeError	类型错误	不属于有效类型
URIError	URL错误	解析URI编码出错
EvalError	eval错误	调用eval函数错误

详解

1.SyntaxError

• Uncaught SyntaxError: missing ) after argument list
  参数列表后未捕获到的SyntaxError：缺少）
  出现SyntaxError: missing这种错误大部分时候是因为特殊字符造成的（如字符为全角的），有可能也是缺逗号，}之类造成的

x=10;y=20;document.write(x＋y)

原因是把+号写成了中文的加号

• Uncaught SyntaxError:Unexpected token …
  未捕获语法错误：意外标记 (两种情况)

 var a=1
        function func()
            var b=2
        }
           func()
        console.log(b) 

一种可能是特殊字符错误例如{}符号未正确闭合，还有可能是css引入错误：

   <!-- <link type='text/css' rel='stylesheet' href="baocuo.css"> -->
    <script src="baocuo.css"></script>

• Uncaught SyntaxError: Invalid or unexpected token
  未捕获的语法错误：无效或意外标记
  这个错误通常指变量名错误或者变量名不符合规范

 var 1a //Uncaught SyntaxError: Invalid or unexpected token 
    console.log(1a)
var 1 // Uncaught SyntaxError: Unexpected number

• Uncaught SyntaxError: Unexpected identifier
  意外的识别码，出现这个的原因一般是因为粗心，把；写成，或者少写了，或者；等等

2.ReferenceError

• Uncaught ReferenceError: … is not defined
  引用一个不存在的变量时发生的错误
  

console.log(a)

• Uncaught ReferenceError: $ is not defined
  这个错误一般是jquery文件引入错误
  

• Uncaught ReferenceError: Invalid left-hand side in assignment
  将一个值分配给无法分配的对象(分配中的左侧无效)
  

this=1

3.RangeError
是当一个只超出有效范围时发生的错误。主要的有几种情况，第一是数组长度为负数，第二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。

• Uncaught RangeError: Invalid array length
  无效的数组长度
  
• Uncaught RangeError: Maximum call stack size exceeded
  超出最大调用堆栈大小 一般是代码中出现了死循环或者递归中出现了死循环
  

 function a(){
        a()
    }
    a()

• Uncaught RangeError: toFixed() digits argument must be between 0 and 100
  tofixed（）方法的数字参数必须在0到100之间

toFixed方法的作用是将数字四舍五入为指定小数位数的数字,参数是小数点后的位数,范围为0-20.

    var num = new Number(13.37);
document.write (num.toFixed(5))

结果为13.37000

 var num = new Number(13.37);
document.write (num.toFixed(101))

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

• Uncaught TypeError:… is not a function

var obj={}
obj.tofixed()

• Uncaught TypeError: …is not a constructor

var obj={}
var c=new obj()

5.URIError
uri错误，一般是相关函数参数错误
encodeURI、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape(）

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码

• Uncaught URIError: URI malformed
  URI格式错误

var test1="http://www.w3school.com.cn/My first/%"
// document.write(encodeURI(test1)+ "<br />")
document.write(decodeURI(test1))

6.EvalError
eval()函数没有被正确执行时，会抛出EvalError错误。该错误类型已经在ES5中不使用了，只是为了保证与以前代码兼容，才继续保留。

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

eval("x=10;y=20;document.write(x*y)")

输出结果为200
eval函数现在并不常用，报错也很少遇到，所以我没有找到eval的报错信息应该也是情有可原的吧(^-_-)

Vue中的报错

1.组件注册错误

• Unknown custom element: - did you register the component correctly?
  是否正确注册了组件

  components:{
        // outer,  一般是在父组件中的components里面漏写了某个子组件
        list,
        numbtn
        }

2.属性值占用
[Vue warn]: “…” is a reserved attribute and cannot be used as component prop.
你写的属性是保留的属性，不能用做组件的属性，一般是style或者key等规定好了的属性。换个名字就ok了
3.属性值或方法没有在实例化期间定义

• Property or method “…” is not defined on the instance but referenced during render.
• 未在实例期间被定义，但在渲染期间使用

var inp={
        data(){
            return{
                //newtype:''
            }
        },
        props:[
            'name',
            'size',
            'id'
        ],
        }

4.data返回值错误
[Vue warn]: data functions should return an object:
data方法返回的应该是一个对象

  data(){
            return
                msg:''
            
        },

#后记：后面学习过程中会有更新补充#