(3) 错误和调试

3. 错误和调试

1. 错误处理

任何成熟的编程都必须处理错误信息

try {
    // 可能导致错误的代码
} catch (e) {
    // 在错误发生时执行
} finally {
    // 最后执行
}

注意

1. finally可选
2. 无论**try/catch**执行哪块,此处finally都将执行,即使有return语句
3. 合理使用try-catch:**适合处理我们无法控制的错误**(引用第三方规范的库)

2. 错误类型

  1. Error

    1. 基本类型,其他错误类型都继承该类型
    2. Error错误很少见,如果有,一般都是浏览器抛出
  2. EvalError:使用eval()函数而发生异常时被抛出(少见,不推荐使用eval)

  3. RangeError:在数值超出相应范围时触发

    var arr = new Array(-20);
    var arr = new Array(Number.MAX_VALUE);
    
  4. ReferenceError

    1. 访问不存在的变量
    console.log(title)
    
    1. 找不到对象
    console.log(obj.title);
    
  5. SyntaxError:直接导致JavaScript代码立即停止执行。

  6. TypeError:执行特定于类型的操作时,变量的类型不符合要求

    1. 在变量中保存意外的类型
    2. 访问不存在方法
    var o = new 10;
    alert('name' in true);
    Function.call('name')
    
  7. URIError:使用encodeURI()/decodeURI()的时候,格式不正确,导致该错误,但概率很低

3. 抛出错误

关键字 throw 抛出错误,遇到throw操作符,代码会立即停止执行(除非遇到try-catch捕获,代码才可以执行)

  1. 抛出错误
throw 123456;
throw 'hello world';
throw true;
throw { name: 'hello world' };
  1. 抛出上面错误类型中的某种
throw new Error('something is wrong');
throw new TypeError('something is wrong');
throw new RangeError('something is wrong');
throw new ReferenceError('something is wrong');
...
  1. 自定义错误
function CustomError(message) {
    this.name = 'custom error';
    this.message = message;
}
CustomError.prototype = new Error();
throw new CustomError('something is wrong');

4. 错误事件

任何没有通过try-catch处理的错误都会触发window对象的error事件(DOM0标准)

5. 常见的错误类型

  1. 类型转换错误

    // 用 ===
    5 == '5' // true
    5 === '5'    // false
    
    // str3隐性转为布尔值,如果str3位'', 0, false等值,则结果不可预料
    function concat (str1, str2, str3) {
        var result = str1 + str2;
        
        if (str3) {
            result += str3;
        }
        return result;
    }
    
  2. 数据类型错误

    // 任何非字符串值都会导致错误
    function getQueryString (url) {
        var pos = url.indexOf('?');
        if (pos > -1) {
            return url.substring(pos + 1);
        }
        
        return  '';
    }
    
    // 更恰当
    function getQueryString (url) {
     // 增加对参数类型判断,增加容错能力
     if (typeof url === 'string') {
         var pos = url.indexOf('?');
         if (pos > -1) {
             return url.substring(pos + 1);
         }
        }
    
        return  '';
    }
    
    function reverseSort (values) {
        if (values) {    // 不要这样!!!
            values.sort();
            values.reverse();
        }
    }
    
    function reverseSort (values) {
        if (values != null) {    // 不要这样!!!
            values.sort();
            values.reverse();
        }
    }
    
    function reverseSort (values) {
        if (typeof value.sort == 'function') {   // 不要这样!!!
            values.sort();
            values.reverse();
        }
    }
    
    function reverseSort (values) {
        if (values instanceof Array) {   // 最合适
            values.sort();
            values.reverse();
        }
    }
    
  3. 通信错误:主要是Ajax错误和URL/发送数据有关(后期补充。。。)

6. 调试代码

  1. 在控制栏直接打印信息

    console.log(title);  // 打印普通变量
    
    console.dir(obj);    // 打印对象结构
    
    console.table(list); // 打印list类数组对象
    
    console.assert();    // 判断第一个参数是否为真,false的话抛出异常并且在控制台输出相应的信息
    
    console.clear(); // 清空控制台
    
    console.error(); // 打印错误信息
    console.warn();  // 打印警告信息
    
    
    // 你可以启动一个计时器(timer)来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字,页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时,浏览器将以毫秒为单位,输出对应计时器所经过的时间.
    console.time(timeName);
    // 需要停止的计时器名字。一旦停止,计时器所经过的时间会被自动输出到控制台。
    console.timeEnd(timeName);   
    
  2. debugger

    debugger 语句调用任何可用的调试功能,例如设置断点。 如果没有调试功能可用,则此语句不起作用

    debugger;
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容