一、语法错误SyntaxError

1.1、变量名命名不规范

  1.         // JS的错误信息类型
  2.         // 1、SyntaxError语法错误
  3.         // 1.1 变量名命名不规范
  4.         var 1 = 1; // Uncaught SyntaxError: Unexpected number
  5.         var 1ab = 1; // Uncaught SyntaxError: Invalid or unexpected token

1.2、不能给关键字赋值

  1.         // 1.2 不能给关键字赋值
  2.         new = 5; // Uncaught SyntaxError: Unexpected token '='
  3.         function = 1; // Uncaught SyntaxError: Unexpected token '='

1.3、基本的语法错误

  1.         var a = 5: // Uncaught SyntaxError: Unexpected token ':'
  2.         function 1test(){} // Uncaught SyntaxError: Invalid or unexpected token

二、ReferenceError引用错误

2.1、变量未被声明就使用

  1.         // 2、ReferenceError引用错误
  2.         // 2.1、变量未被声明就使用
  3.         test(); // Uncaught ReferenceError: test is not defined
  4.         console.log(a); // Uncaught ReferenceError: a is not defined

三、给无法赋值的对象赋值

  1.         // 2.2、给无法赋值的对象赋值
  2.         var a = 1 = 2; // Uncaught SyntaxError: Invalid left-hand side in assignment
  4.         var b = 1;
  5.         console.log(b) = 1; // Uncaught ReferenceError: Invalid left-hand side in assignment

四、RangeError范围错误

  1.         var arr = [1, 2, 3, 4];
  2.         arr.length = 5; //  [1, 2, 3, 4, empty]
  3.         arr.length = -1; // Uncaught RangeError: Invalid array length
  4.         console.log(arr);
  1.         var num = new Number(66.66);
  2.         console.log(num.toFixed(-1)); // Uncaught RangeError: toFixed() digits argument must be between 0 and 100  at Number.toFixed

五、TypeError类型错误

5.1、调用不存在的方法

  1.         // 5、TypeError类型错误
  2.         // 5.1、调用不存在的方法 
  3.         123(); // Uncaught TypeError: 123 is not a function
  5.         var obj = {};
  6.         obj.say(); // Uncaught TypeError: obj.say is not a function
  8.         var a = new 'string'; // Uncaught TypeError: "string" is not a constructor
  9.         var b = new 123; // Uncaught TypeError: 123 is not a constructor

六、URIError

  • URI：Uniform Resource Identifier 统一资源标识符
  • URL：Uniform Resource Location 统一资源定位符

  • URN：Uniform Resource Name 统一资源名称

    1.       // 六、URI错误
    2.       // URI：Uniform Resource Identifier 统一资源标识符
    3.       // URL：Uniform Resource Location 统一资源定位符
    4.       // URN：Uniform Resource Name 统一资源名称
    5.       url：http://www.baidu.com/newList
    6.       urn：www.baidu.com/ftp#developer 资源的唯一性ID

    七、encodeURI和decodeURI

  • encodeURI：把中文转为中文编码

  • decodeURI：把中文编码转为中文

    1.       // encodeURI：把中文转为中文编码
    2.       // decodeURI：把中文编码转为中文
    3.       var myUrl = 'http://www.baidu.com?name="良雨"';
    4.       var newUrl = encodeURI(myUrl);
    5.       console.log(newUrl); // http://www.baidu.com?name=%22%E8%89%AF%E9%9B%A8%22
    7.       var url = decodeURI(newUrl);
    8.       console.log(url); // http://www.baidu.com?name="良雨"
    10.       // 不能自己随意写编码，否则会报错
    11.       var str = decodeURI('%fauflhga');
    12.       console.log(str); // Uncaught URIError: URI malformed at decodeURI

    八、JSON对象

  • JSON对象属性名最好是使用双引号，因为后端传递过来的JSON基本上也是双引号

  • JSON对象里面是不可以有方法的

  • 疑惑：JSON里面有方法，竟然还能执行，竟然不报错

    1.       // JSON对象
    2.       // JSON对象属性名最好是使用双引号，因为后端传递过来的JSON基本上也是双引号
    3.       // JSON对象里面是不可以有方法的
    4.       var obj = {
    5.           "a": 1,
    6.           "b": 2,
    7.           "say": function(){
    8.               console.log(1);
    9.           }
    10.       }
    12.       obj.say();

    九、EvalError

    9.1、eval可以把JSON字符串变为对象

  • 有报错

    1.  var jsonData = '['
    2.           '{'+
    3.           '"name": "abc"'+ 
    4.           '},'+
    5.           '{'+
    6.           '"name": "dce"'+ 
    7.           '},'+
    8.           '{'+
    9.           '"name": "efg"'+ 
    10.           '}'+        
    11.       ']';
    13.       var data = eval('('+ jsonData +')'); // 报错
    14.       for(var i in data){
    15.           var item = data[i];
    16.           console.log(item);
    17.       }

    2、为什么不推荐用eval

  • 语法不规范，不加字符串也可以执行

  • eval不好调试，比如在断点调试的时候
  • 有些许的性能问题
  • 代码在压缩时，eval可能会报错
  • 有些许的安全问题，容易遭到xss攻击

  • 可读性不好

    十、try catch / finally / throw手动抛出错误

    10.1、try catch / finally

  • try里有没有错误，finally里面都会执行

  • try里有没有错误，都不影响外面的代码执行

    1.       // try catch / finally / throw 手动抛出错误
    2.       try{
    3.           console.log('正常执行1');
    4.           console.log(a); // 不会报错
    5.           console.log('正常执行2');
    6.       }catch(e){
    7.           console.log(e); // ReferenceError: a is not defined
    8.           console.log(e.name); // ReferenceError
    9.           console.log(e.message); // a is not defined
    10.       }finally{
    11.           console.log('正常执行3'); // try里有没有错误，finally里面都会执行
    12.       }
    13.       console.log('try里有没有错误，都不影响外面的代码执行'); // try里有没有错误，都不影响外面的代码执行

    10.2、throw手动抛出错误

    1.       // throw手动抛出错误
    2.       var jsonStr = '';
    3.       try{
    4.           if(jsonStr === ''){
    5.               throw 'JSON字符串不能为空哦'
    6.           }
    7.           console.log('我要执行了');
    8.           var json = JSON.parse(jsonStr);
    9.           console.log(json);
    10.       }catch(e){
    11.           console.log(e);
    12.           var errorTip = {
    13.               name: '数据传输失败',
    14.               errorCode: '10010'
    15.           }
    16.           console.log(errorTip);
    17.       }

    十一、ES5的严格模式

    11.1、ECMAScript的版本历程

  • 1997年 1.0

  • 1998年 2.0
  • 1999年 3.0 JS通行标准
  • 2007年 4.0 草案 争议比较大
  • 2008年 4.0 终止 把容易改善的部分划分为3.1 不容易改善的部分划分为Harmony ES5草案
  • 2009年 5.0 发布 Harmony一分为二，一半为JS.next； 一半为JS.next.next
  • 2011年 5.1 ISO国际标准
  • 2013年 ES6其实就是JS.next；JS.next.next划分为ES7

  • 2015年 ES6发布 ECMAScript2015

    11.2、严格模式的使用

    1.       'use strict'; // 不推荐这样使用
    3.       function(){
    4.           'use strict'
    5.       }
    7.       var test = (function(){
    8.           'use strict'; // 推荐这样使用
    9.       })();

    11.3、启用严格模式的一些状况

    11.3.1、启用严格模式后with将不能被使用

  • with可以改变作用域

    1.       // 启用严格模式后，with将不能被
    2.       // with可以改变作用域
    3.       'use strict'; // Uncaught SyntaxError: Strict mode code may not include a with statement
    4.       var a = 1;
    5.       var obj = {
    6.           a: 2
    7.       }
    9.       function test(){
    10.           var a = 3;
    11.           with(window){
    12.               console.log(a); // 1
    13.           }
    14.       }
    16.       test();

    11.3.2、启用严格模式后callee和caller将不能被使用

    1.       // 启用严格模式后callee和caller将不能被使用
    2.       // 启用严格模式后callee不能被使用
    3.       'use strict'; // Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    4.       function test1(){
    5.           console.log(arguments.callee);
    6.       }
    8.       test1();
    10.       // 启用严格模式后caller不能被使用
    11.       'use strict'; // Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    12.       function test1(){
    13.           test2();
    14.       }
    15.       test1();
    17.       function test2(){
    18.           console.log(test2.caller);
    19.       }

    11.3.3、严格模式下变量必须声明后才能使用

    1.       // 严格模式下，变量必须声明后才能使用
    2.       'use strict';
    3.       a = 1; // Uncaught ReferenceError: a is not defined

    11.3.4、严格模式下函数内部this指向的问题

    严格模式下，函数内部this必须赋值，否则this将指向undefined

  1.         // 严格模式下函数内部的this必须赋值，否则将指向undefined
  2.         'use strict';
  3.         function test(){
  4.             console.log(this); 
  5.         }
  7.         test();
  8.         test.call({});
  9.         var test1 = new test();

11.3.5、严格模式下函数的形参不能重复「会报错」

  1.         // 严格模式下，函数的形参不能重复「会报错」
  2.         'use strict';
  3.         function test(a, a, b){
  4.             console.log(a, b); // Uncaught SyntaxError: Duplicate parameter name not allowed in this context
  5.         }
  7.         test(1, 2, 3);

11.3.6、严格模式下对象的属性名不能重复「不会报错」

  1.         // 严格模式下，对象的属性名不能重复「不会报错」
  2.         'use strict';
  3.         var obj = {
  4.             a: 11,
  5.             a: 22
  6.         }
  8.         console.log(obj.a);

11.3.7、严格模式下eval是有自己的作用域的

  1.         // 严格模式下，eval是有自己的作用域的
  2.         'use strict';
  3.         eval("var a = 1; console.log(a)");
  4.         console.log(a); // Uncaught ReferenceError: a is not defined