你应该知道的必问面试题

1、深拷贝和浅拷贝

• 概念
  • 深拷贝：拷贝对象的多层属性，若对象里面还有对象，则会继续拷贝，适合用于复杂类型的拷贝
  • 浅拷贝：拷贝对象的一层属性，若对象里面还有对象，只会拷贝地址，两者之间修改会产生影响，适用于对象里面属性的值为简单数据类型的对象；

• 实现方式

// 深拷贝
 // 通过递归实现以下对象的深拷贝
    const person = {
      name: '查怀瑾',
      age: 32,
      hobby: ['旅游', '唱歌', '跑步'],
      function() {
        console.log('learning')
      }
    }
    //封装递归
    function cloneDeep(target, source) {
      for (let k in source){
        if(source[k].constructor === Object) {
          target[k] = {}
          cloneDeep(target[k], source[k])
        }else if (source[k].constructor === Array) {
          target[k] = []
          cloneDeep(target[k], source[k])
        }else {
          target[k] = source[k]
        }
      }
    }
    
    const target = {}
    cloneDeep(target, source)
    person.hobby[3] = '喝酒'
    console.log(target)
    console.log(source)
    
 // JSON序列化实现深拷贝
    // JSON.stringify()方法将一个JavaScript对象或值转换为 JSON 字符串
    // JSON.parse()用来解析JSON字符串
    // JSON序列化方式的不足：只适用于一般数据的拷贝（对象、数组）
   const newObj = JSON.parse(JSON.stringify(obj))
   console.log(newObj)
   
 // lodash插件实现
  const person = {
    name: "西精",
    age: 10000,
    hobby: ["爱折腾", "目无法纪", "狂妄自大"],
    family: {
      daughter: "席明",
      wife: "评论员",
    },
  };
  const baozi = _.cloneDeep(person)
  baozi.hobby.push('123')
  console.log(baozi)
  

// 浅拷贝
    // 拷贝对象
        1、Object.assign()
        2、展开运算符{...obj}
    // 拷贝数组
        1、Array.prototype.concat()
        2、展开运算符 [...arr]

防抖和节流

• 防抖
  • 定义：防抖就是触发一个事件n秒后执行一个函数，若n秒内又触发了该事件，则执行时间会在此基础上再往后顺延n秒
  • 应用：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染
  • 实现代码

const div = document.querySelector("div");
  let i = 1;
  function mouseMove() {
    div.innerHTML = i++;
  }

  function debounce(fn, time) {
    let timer;
    return function () {
      if (timer) clearTimeout(timer);
      timer = setTimeout(function () {
        fn();
      }, time);
    };
  }

  div.addEventListener("mousemove", debounce(mouseMove, 500));

• 节流
  • 定义：事件触发后，规定时间内，执行最后一次触发事件。
  • 应用：滚动加载更多、搜索框搜索功能、高频点击、表单重复提交
  • 实现代码：

    const div = document.querySelector("div");
      let i = 1;
      function mouseMove() {
        div.innerHTML = i++;
      }

      function throttle(fn, time) {
        let timer;
        return function () {
          if (!timer) {
            timer = setTimeout(function () {
              fn();
              timer = null;
            }, time);
          }
        };
      }

      div.addEventListener("mousemove", throttle(mouseMove, 500));