2分享一些方法

1 防抖

<script>
  function input(event) {
    const value = event.target.value
    request(value)
  }
  // 调用返回一个包装后的函数，返回后input就是一个函数
  input = debounce(input, 300)
  function request(data) {
    console.log("请求发送的值", data)
  }
  function debounce(fn, delay = 200) {
    let timeout = null
    return function (...args) {
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      } else {
        // 对第一次输入立即执行
        fn.apply(this, args)
      }
      timeout = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }
  document.querySelector(".input").oninput = input
</script>

2 节流

  function thorttle(fn, time) {
    let pre = 0
    let timeout = null
    return function (...args) {
      const now = Date.now()
      // 如果时间超过了时间间隔就执行目标函数fn，pro是上一次时间
      // 当前时间减去上一次时间如果大于我们延迟的时间，那我们就执行if里面
      // 的代码，并把当前时间重行赋值给pro。就是每固定时间执行一次代码
      if (now - pre > time) {
        pre = now
        fn.apply(this, args)
      } else {
        // 频繁触发定时器就把后续事件关掉
        // 如果在事件间隔内则后续的事件会直接清除掉
        if (timeout) {
          if (timeout) {
            clearTimeout(timeout)
            timeout = null
          }
          // 最后一次事件会触发
          timeout = setTimeout(() => {
            pre = now
            fn.apply(this, args)
          })
        }
      }
    }
  }
  let conunt = 1

  function scrollFn() {
    console.log("监听页面的滚动", conunt++)
  }
  // 节流函数就是基于原来函数返回一个新的函数
  const newFn = thorttle(scrollFn, 300)
  document.onscroll = newFn

3数组对象去重

  const arr = [
    { name: "小明" },
    { name: "小红" },
    { name: "小红" },
    { name: "小红" },
  ]
  const obj = {}
  const newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i].name]) {
      //这边判断属性值是true，就不向数组中添加对象了，代表是重复的
      newArr.push(arr[i])
      obj[arr[i].name] = true
      console.log(obj) //{小明:true,小红：true}
    }
  }
  console.log(newArr)

4深拷贝

 // 实现深拷贝的函数
  const cloneData = (data) => {
    // 根据传入的数据类型，创建新的数据是简单对象还是数组
    const newData = Array.isArray(data) ? [] : {}
    // 遍历传入的数据
    for (let key in data) {
      // 属性存在，且为对象，那么直接递归一下
      if (data[key] && typeof data[key] === "object") {
        newData[key] = cloneData(data[key]) // 递归
      } else {
        console.log("key", key)
        newData[key] = data[key]
      }
    }
    return newData
  }