9 - 方法封装与容错处理

一、方法封装及容错处理

/**
 * @desc （方法功能描述）类数组转数组
 * @param arrLike (方法的参数) 参数的意义：类数组对象 类型：对象
 * @returns {any[]} 返回值意义：返回值是什么，类型是什么
 */
// 写了这些注释是好习惯，但是如果功能变更了，要维护这些注释；
function arrLikeToAry(arrLike) {
  // return [...arrLike]
  return Array.from(arrLike);
}
// 但是这么写有一个问题，Array.from 是 ES6 的新特性，只能在高版本的浏览器使用。如果在老旧浏览器中使用，就会报错；所以这个时候需要做容错（异常）处理；
// try-catch 语句用于 js 的异常处理；因为 js 是单线程的一旦程序出现异常，后面的代码就不会执行了。所以我们使用 try-catch 语句捕获异常；
try {
  // 可能会引发异常的代码
  var divList = document.getElementsByClassName('box');
  var arr = Array.from(divList);
} catch (e) {
  // 上面的 try 中的代码报错后会执行这个代码块中的代码；如果 try 中的代码不报错，这里代码不会执行。e 是错误信息，这个错误信息里面包含了上面 try 的时候引发的异常；你拿到这个错误后可以选择在浏览器中抛出异常；（有一些做报错或者性能监控的时候需要回传给服务器）
  // console.log(e);
  // var arr = Array.from(divList); 如果在 catch 语句中报错，并且也没有其他容错处理，就会报错，并且后面的代码也不会再执行了
}
// console.log('1234');
// 利用 try-catch 语句改造类数组转数组的方法，使这个方法兼容所有的浏览器
// try-catch 语句增强代码的健壮性，但是开发效率就会相应降低；
function arrLikeToAry(aryLike) {
  // 先尝试ES6语法
  try {
    return Array.from(aryLike)
  } catch (e) {
    // 如果代码执行到 catch 语句了，说明 try 中的 Array.from 报错；所以需要兼容处理
    var newArr = [];
    for (var i = 0; i < aryLike.length; i++) {
      newArr.push(aryLike[i])
    }
    return newArr;
  }
}
var divs = document.getElementsByTagName('div');
// console.log(divs);
var ary = arrLikeToAry(divs);
console.log(ary);

二、throw手动抛出错误

// 1. throw 关键字：用来手动抛出异常(错误)，抛出异常后，后面的代码就不会执行（同步的操作）；throw 后面无论写什么，都会当成错误抛出；
// throw 'hello world';
// alert('1111');
// throw 123;
// throw {name: '123'};
// 2. 常见的内置错误类型：
// 2.1 ReferenceError 引用错误，一般由于引用未声明的变量导致
// throw new ReferenceError('引用错误');
// 2.2 TypeError 类型错误，一般由于搞错类型（不是函数的变量或者值后面跟一个小括号）
// throw new TypeError('你搞错类型了');
// 2.3 SyntaxError 语法错误，一般因为语法写的不对；
// throw new SyntaxError('你的语法真差啊');
// 2.4 Error 普通错误
// throw Error('这是普通错误'); // 可以不用 new
// 结合try-catch根据不同的报错类型，采取不同的措施
try {
  throw new SyntaxError('类型错误');
} catch (e) {
  // 根据报错类型不同，采取不同的措施
  if (e instanceof TypeError) {
    console.log(1);
  } else if (e instanceof SyntaxError) {
    console.log(2);
  }
}