前端工具函数 ❤️‍🔥第一弹❤️‍🔥

2024-02-18 13:17:21

在前端开发中，我们经常需要处理各种各样的数据和逻辑。为了提高代码的可重用性和可维护性，我们可以将一些常用的功能封装成工具函数。工具函数就像瑞士军刀一样，能够帮助我们快速解决各种问题，提升开发效率。本文将介绍一些实用的前端工具函数，并通过代码示例演示它们的用法。

判断数据类型

在 JavaScript 中，typeof 运算符可以用来判断基本数据类型，但它对 null 和数组的判断结果并不准确。我们可以编写一个更精确的 getType 函数来判断数据类型：

function getType(value) {
  if (value === null) {
    return 'Null';
  }

  if (Array.isArray(value)) {
    return 'Array';
  }

  if (value instanceof Date) {
    return 'Date';
  }

  if (value instanceof RegExp) {
    return 'RegExp';
  }

  return typeof value;
}

这个函数首先判断 value 是否为 null，如果是则返回 'Null'。接着判断 value 是否为数组、日期或正则表达式，并返回相应的类型。最后，如果以上条件都不满足，则使用 typeof 运算符返回基本数据类型。

函数柯里化

函数柯里化是一种将多参数函数转换为一系列单参数函数的技术。它可以提高代码的灵活性，方便我们进行函数组合和复用。

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

这个 curry 函数接收一个多参数函数 fn，并返回一个柯里化后的函数 curried。curried 函数接收一部分参数 args，如果 args 的长度大于等于 fn 的参数个数，则直接调用 fn 并返回结果。否则，返回一个新的函数，继续接收剩余的参数。

深拷贝

深拷贝是指创建一个对象的副本，该副本与原始对象完全独立，修改副本不会影响原始对象。在 JavaScript 中，可以使用递归的方式实现深拷贝：

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const clonedObj = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }

  return clonedObj;
}

这个 deepClone 函数首先判断 obj 是否为对象或 null，如果不是则直接返回 obj。接着，创建一个新的空数组或空对象 clonedObj，遍历 obj 的所有属性，并将每个属性的值递归调用 deepClone 函数进行拷贝，最后返回 clonedObj。

节流函数

节流函数可以限制一个函数在一段时间内最多执行一次。它可以用来优化一些高频触发的事件，例如 resize、scroll 等。

function throttle(fn, delay) {
  let timer = null;

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

这个 throttle 函数接收一个函数 fn 和一个延迟时间 delay，并返回一个节流后的函数。节流后的函数会在第一次调用时立即执行 fn，并在接下来的 delay 时间内忽略后续调用。当 delay 时间过后，再次调用节流后的函数才会再次执行 fn。

防抖函数

防抖函数可以将多次高频操作合并成一次执行。它可以用来优化一些需要等待用户输入完成的操作，例如搜索框的输入提示。

function debounce(fn, delay) {
  let timer = null;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

这个 debounce 函数接收一个函数 fn 和一个延迟时间 delay，并返回一个防抖后的函数。防抖后的函数会在每次调用时清除之前的定时器，并创建一个新的定时器。如果在 delay 时间内没有再次调用防抖后的函数，则定时器会触发，执行 fn。