（十七）错误处理与调试

1. try-catch-finally

try {
   // 可能会导致错误的代码
} catch (error) {
  // 错误发生时如何处理
} finally {
  // 无论 成功还是失败都会执行的处理
}

例子：try 返回0 finally 返回2  最终返回2 

<script>
    function test () {
      try {
        return 0
      } catch (error) {
        return 1
      } finally {
        return 2
      }
    }
    console.log(test()) // 2
  </script>

注意：只要代码中包含 finally 子句，try 和 catch 中 return 语句都将会被忽略

 2. 处理类型错误

function test () {
      try {
        // do something 
      } catch (error) {
        if (error instanceof TypeError ) {
          // 处理类型错误
        } else if (error instanceof ReferenceError) {
          // 处理引用类型错误
        } else {
          // 处理其他错误
        }
      }
    }

3. error 监控

（1）要写在最前面 不然不起作用

（2）如果已使用try - catch 捕获异常，就不会触发 onerror

window.onerror = function (message) {
 console.log('message', message)
}

window.onerror = function (message) {
      console.log('message', message)
    }
    function test () {
      try {
        throw new Error('error')
      } catch (error) {
        console.log(error)
      }
    }
    test()

4. 类型校验

看下面例子，使用 if(value){ }  判断 value 是否存在，如果存在便执行括号内的操作是我经常这样写代码的

<script>
  function montage (str1, str2, str3) {
    var result = str1 * str2
    // 如果第三个参数有值
    if (str3) {
      result *= str3
    }
    return result
  }
  const result1 = montage(3, 5) // 15
  const result2 = montage(3,5,0) // 希望是0 但是实际是15 因为if(0) 是false
  </script>

这样写书中阐述是错误的，正确的写法是使用类型进行判断

<script>
  function montage (str1, str2, str3) {
    var result = str1 * str2
    // 如果第三个值类型为 number 
    if (typeof str3 === 'number') {
      result *= str3
    }
    return result
  }
  const result1 = montage(3, 5) // 15
  const result2 = montage(3,5,0) // 0
  </script>

如果第三个参数不传 类型为 undefined ， 通过类型判断是解决的好办法。再来一个数组相关的例子~

<script>
    function montage (arr) {
      // 需判断入参是否为数组
      if (arr instanceof Array) {
        throw new Error('入参类型必须为数组！')
        return
      }
      const resultArr = arr.sort(() => {
        return Math.random() - 0.5
      })
      return resultArr
    }
    var arr1 = [2,4,5,6]
    var str='erer'
    const result1 = montage(arr1)
    const result2 = montage(str)
  </script>

5. 在地址栏中追加参数 encodeURIComponent

在需求中有时候遇到 对某一个链接后面追加参数，主要考虑一下两点：

（1）追加时是使用 '?' 还是 '&'

  (2) 对字符串进行 enCode 编码

代码实现如下：

<script>
    // 把URI字符串采用URF-8编码格式转化成escape格式的字符串
    function addQueryParams (url, key, value) {
      // 存在?后面加&，不存在后面加?
      if (url.indexOf('?') > -1) {
        url += '&'
      } else {
        url += '?'
      }
      url += encodeURIComponent(key) + '=' + encodeURIComponent(value)
      return url
    }
    const result = addQueryParams('https://www.csdn.net', 'name', '周舟舟') // https://www.csdn.net?name=%E5%91%A8%E8%88%9F%E8%88%9F
    const result2 = addQueryParams(result, 'age', '23') // https://www.csdn.net?name=%E5%91%A8%E8%88%9F%E8%88%9F&age=23
    console.log(decodeURIComponent(result2)) // https://www.csdn.net?name=周舟舟&age=23
  </script>

decodeURIComponent 解码，主要是针对汉字~

不过这种直接追加的方法没有考虑到 重复参数的 问题，只是机械的拼接添加，如果本来地址栏上有 a=12, 现在又要添加一个 a=12, 用这个函数也能拼接成功，后续会对这个问题进行处理