04 Chrome DevTools 中的常见错误

Chrome 开发者工具的 Console 相当好用，最常使用的不外乎是通过 console.log 展示出变量或运算的结果，如果符合预期则皆大欢喜。

但是一旦出现红字幸灾乐祸的告诉我们 " 你出错了！"，这对我们来说无疑是一种挫折，在不知如何着手解决错误的时，只能反覆地检查自己的代码，看看是不是有什么奇怪的地方，有时就算停在了错误地方也往往不知是什么意思，会因此花费大量的时间。

前端开发中 Js 常见错误分为两类：代码错误和逻辑错误。

代码错误：代码错误是指代码本身有语法错误，或者是代码中的变量名拼写错误等等，这些错误在浏览器中运行时会报错，这些错误是可以被发现并且被解决的。
逻辑错误：逻辑错误是指代码本身没有语法错误，但是代码的逻辑不符合预期，这些错误在浏览器中运行时不会报错，但是可以使用断点进行调试排错。

注意

JavaScript 是属于同步的编程语言，如果出现错误就会造成后面的代码无法运行，当红字没有解决时，都有可能造成接下来的代码行错误或是无法继续运行。

语法错误 SyntaxError

解析代码时发生的语法错误。

变量名不符合命名规范，如以数字开头、使用关键字等;
未闭合的字符串、正则表达式、注释、标签、模板字符串等;
const 声明的时候必须要赋值，进行初始化;
重复声明了一个变量：let 或者 const 不允许多次声明同一个变量;

var 1a;   // Uncaught SyntaxError: Invalid or unexpected token 变量名错误

console.log 'hello');  // Uncaught SyntaxError: Unexpected string 缺少括号

const age;
console.log(age);  // Uncaught SyntaxError: Missing initializer in const declaration 常量未赋值 (缺少初始化)

let age = 18;
let age = 21;
console.log(age); // Uncaught SyntaxError: Identifier 'age' has already been declared 重复声明同一个变量

引用错误 ReferenceError

变量调用前未定义;
变量没有声明和赋值（初始化）；
输出变量名和声明的变量不一致引起的（简单说写错变量名/变量名拼写错误）；
将变量赋值给一个无法被赋值的对象

console.log(age); // Uncaught ReferenceError: age is not defined 引用了一个不存在的变量

let gender = '男';
console.log(gendr); // Uncaught ReferenceError: gendr is not defined 变量名拼写错误

console.log()= 1;  //Uncaught ReferenceError: Invalid left-hand side in assignment 将变量赋值给一个无法被赋值的对象

范围错误 RangeError

调用一个不终止的递归函数时或者将值传递给超出范围的函数。

let a = new Array(-1); //Uncaught RangeError: Invalid array length 超出有效范围

类型错误 TypeError

变量或参数不是预期类型，比如，对字符串、布尔值、数值等原始类型的值使用 new 命令，就会抛出这种错误，因为 new 命令的参数应该是一个构造函数。
调用对象不存在的方法
传入的参数没有定义
常量被重新赋值了

let a = new 123(); //Uncaught TypeError: 123 is not a function

let a;
a.aa(); //Uncaught TypeError: Cannot read property 'aa' of undefined 调用对象不存在的方法

let testArray = ["Test"];
function testFunction(testArray) {
  for (var i = 0; i < testArray.length; i++) {
    //Uncaught TypeError: Cannot read property 'length' of undefined 传入的参数没有定义
    console.log(testArray[i]);
  }
}
testFunction();

const age = 18;
age = 21;
console.log(age); //Uncaught TypeError: Assignment to constant variable. 常量被重新赋值了

URL 错误 URLError

与 url 相关函数参数不正确，主要是 encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape() 和 unescape() 这六个函数。

decodeURI("%2"); //Uncaught URIError: URI malformed

eval 错误 EvalError

eval 函数没有被正确执行。

javascript

eval("var a = 1; var b = 2; var c = '3'; var d = '4';"); // Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".

new eval(); // Uncaught EvalError: Refused to construct a JavaScript URL because it violates the following Content Security Policy directive: "default-src 'self'".

04 Chrome DevTools 中的常见错误 ​

语法错误 SyntaxError ​

引用错误 ReferenceError ​

范围错误 RangeError ​

类型错误 TypeError ​

URL 错误 URLError ​

eval 错误 EvalError ​