JavaScript深拷贝实现、异常捕获、防抖和节流

本文链接：https://blog.youkuaiyun.com/yy8623977/article/details/135201901

1. 深拷贝

深拷贝：拷贝的是对象，不是地址

1.1 通过递归实现深拷贝

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <script>
    const originObj = {
      uname: 'lily',
      hobby: ['电影', '逛街'],
      family: {
        baby: '小宝'
      }
    }
    const targetObj = {}

    function deepCopy(targetObj, originObj) {
      for (let k in originObj) {
        if (originObj[k] instanceof Array) {
          targetObj[k] = []
          deepCopy(targetObj[k], originObj[k])
        } else if (originObj[k] instanceof Object) {
          targetObj[k] = {}
          deepCopy(targetObj[k], originObj[k])
        } else {
          targetObj[k] = originObj[k]
        }
      }
    }

    deepCopy(targetObj, originObj)
    originObj.hobby[0] = '学习'
    originObj.family.baby = '二宝'
    console.log(targetObj)    // {uname: 'lily', hobby: ['电影', '逛街'], family: {baby: '小宝'}}

  </script>
</body>
</html>

1.2 lodash.cloneDeep

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <!-- 从lodash英文官网下载lodash.min.js -->
  <script src="js/lodash.min.js"></script>
  <script>
    const originObj = {
      uname: 'lily',
      hobby: ['电影', '逛街'],
      family: {
        baby: '小宝'
      }
    }
    const targetObj = _.cloneDeep(originObj)  // 调用lodash的cloneDeep

    originObj.hobby[0] = '学习'
    originObj.family.baby = '二宝'
    console.log(targetObj)    // {uname: 'lily', hobby: ['电影', '逛街'], family: {baby: '小宝'}}

  </script>
</body>
</html>

1.3 通过JSON.stringify()实现

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <script>
    const originObj = {
      uname: 'lily',
      hobby: ['电影', '逛街'],
      family: {
        baby: '小宝'
      }
    }
    const targetObj = JSON.parse(JSON.stringify(originObj))

    originObj.hobby[0] = '学习'
    originObj.family.baby = '二宝'
    console.log(targetObj)    // {uname: 'lily', hobby: ['电影', '逛街'], family: {baby: '小宝'}}

  </script>
</body>
</html>

2. 异常捕获

throw 抛出异常信息，程序也会终止执行

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
  <script>
    function fn() {
      try {
        const div = document.querySelector('div')
        div.innerHTML = 'div'
      } catch (err) {
        console.log(err.message)
        // throw '你看看，选择器错误了吧'
        throw new Error('没有div标签')

        return
      } finally {
        console.log('fn函数执行完毕')
      }
    }

    fn()
  </script>
</body>
</html>

控制台输出如下：
异常捕获效果

3. 防抖和节流

节流
- 定义：两次操作之间有冷却时间，第一次操作后需等冷却事件结束后，才能触发第二次操作
- 使用场景：轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动
防抖
- 定义：多次快速连续操作，只有等最后一次操作一段时间后，才触发事件
- 使用场景: 文本框输入文本

使用lodash来实现节流和防抖示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 500px;
      height: 500px;
      background-color: pink;
    }
  </style>

</head>
<body>
  <div></div>

  <!-- 从lodash英文官网下载lodash.min.js -->
  <script src="js/lodash.min.js"></script>
  <script>
    const div = document.querySelector('div')
    let i = 1
    function mouseMove() {
      div.innerHTML = ++i
    }

    // div.addEventListener('mousemove', _.throttle(mouseMove, 1000))
    div.addEventListener('mousemove', _.debounce(mouseMove, 1000))
  </script>
</body>
</html>

节流效果：鼠标在盒子上快速移动，盒子里面的文字每隔一秒依次变成2，3，4，…
防抖效果: 鼠标在盒子上快速移动，等鼠标停下来移动，盒子里面的文字才显示2