3个前端手写函数：让你从菜鸟到高手

2023-03-27 11:11:27

三个必备前端手写函数：提升你的开发技能

简介

前端开发中，掌握一些基本的手写函数可以显著提高你的代码质量和效率。本文将深入探讨三个必不可少的函数：节流、防抖和浅拷贝 ，帮助你从菜鸟前端快速进阶为高手。

一、节流函数

想象一下一个滚动页面时不断更新的元素。如果不加以限制，每次滚动都会触发对该元素的函数调用，导致页面卡顿。节流函数 通过限制函数在指定时间间隔内只执行一次，解决了这个问题。它通过以下方式工作：

function throttle(fn, delay) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

二、防抖函数

与节流函数不同，防抖函数 在输入停止一段时间后才会执行函数。这对于避免在输入框中输入每个字符时触发函数调用非常有用，从而防止程序卡顿。以下是其实现：

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

三、浅拷贝函数

浅拷贝函数 创建一个对象的副本，该副本与原始对象共享相同的内存地址。这意味着修改副本中属性也会影响原始对象。以下是它的实现：

function shallowCopy(obj) {
  if (typeof obj !== 'object') {
    return obj;
  }
  let newObj = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}