前端开发最强代码武器库：50个必备工具类函数 助你一臂之力

前言

作为一名前端开发人员，我们每天都在与代码打交道。为了提高开发效率和代码质量，使用一些现成的工具函数可以帮我们事半功倍。这些工具函数可以帮助我们处理各种常见的任务，例如字符串处理、数组操作、DOM 元素操作、日期操作等。

本文收集了 50 个精选的前端工具函数，涵盖了从字符串处理到日期操作等各种常用功能。每个函数都经过精心测试，可以开箱即用。希望这些工具函数能够帮助你提高开发效率，构建更健壮的代码。

工具函数

1. 字符串处理

1.1 首字母大写

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

1.2 字符串反转

function reverseString(string) {
  return string.split("").reverse().join("");
}

1.3 字符串长度截取

function truncateString(string, length) {
  if (string.length > length) {
    return string.substring(0, length) + "...";
  }
  return string;
}

2. 数组操作

2.1 数组去重

function uniqueArray(array) {
  return [...new Set(array)];
}

2.2 数组随机排序

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

2.3 数组扁平化

function flattenArray(array) {
  return array.reduce((acc, curr) => acc.concat(Array.isArray(curr) ? flattenArray(curr) : curr), []);
}

3. DOM 元素操作

3.1 获取元素位置

function getElementPosition(element) {
  const rect = element.getBoundingClientRect();
  return {
    top: rect.top + window.scrollY,
    left: rect.left + window.scrollX,
  };
}

3.2 添加/删除类名

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

3.3 设置元素属性

function setAttribute(element, attribute, value) {
  element.setAttribute(attribute, value);
}

4. 日期操作

4.1 格式化日期

function formatDate(date, format) {
  const map = {
    yyyy: date.getFullYear(),
    MM: ("0" + (date.getMonth() + 1)).slice(-2),
    dd: ("0" + date.getDate()).slice(-2),
    HH: ("0" + date.getHours()).slice(-2),
    mm: ("0" + date.getMinutes()).slice(-2),
    ss: ("0" + date.getSeconds()).slice(-2),
  };

  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (match) => map[match]);
}

4.2 计算日期差

function dateDiffInDays(date1, date2) {
  const diffInMs = Math.abs(date2 - date1);
  return Math.ceil(diffInMs / (1000 * 60 * 60 * 24));
}

5. 其他实用函数

5.1 深拷贝对象

function deepCopy(object) {
  return JSON.parse(JSON.stringify(object));
}

5.2 函数防抖

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

5.3 函数节流

function throttle(func, delay) {
  let lastCallTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCallTime > delay) {
      lastCallTime = now;
      func.apply(this, args);
    }
  };
}

结语

以上列举的只是 50 个精选的前端工具函数中的沧海一粟。在实际开发中，我们还可以根据自己的需要创建更多的工具函数。这些工具函数可以帮助我们提高开发效率，构建更健壮的代码。

希望这篇文章能够帮助你扩展你的前端工具包，并为你带来更多的开发乐趣。