20 个 JS 工具函数：高效开发神器，不可错过

JavaScript 工具函数库：20 个必备工具，助你开发效率倍增

概述

在日常的 JavaScript 开发中，我们经常会遇到一些重复性的任务，使用通用且实用的工具函数可以大大提升我们的开发效率。本文将分享 20 个精选的 JavaScript 工具函数，它们涵盖各种常见需求，助你开发事半功倍。

核心工具函数

1. 深度克隆

用途： 创建对象的深度副本，避免对原始对象进行意外修改。

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

2. 判断类型

用途： 确定变量或对象的类型（例如字符串、数组、对象等）。

function getType(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1);
}

函数执行控制

3. 节流（Throttling）

用途： 限制函数的执行频率，防止因频繁触发而造成性能问题。

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

4. 防抖（Debouncing）

用途： 延迟函数的执行，直到触发事件停止后才真正执行，避免不必要的频繁操作。

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

数据处理

5. 洗牌数组（Shuffle Array）

用途： 随机打乱数组中的元素顺序。

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

6. 获取随机数（Random Number）

用途： 在给定的范围内生成随机数。

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

7. 数组去重（Array Deduplication）

用途： 移除数组中重复的元素，生成一个不重复的新数组。

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

8. 对象合并（Object Merge）

用途： 将多个对象合并为一个新对象。

function mergeObjects(...objects) {
  return Object.assign({}, ...objects);
}

9. 扁平化数组（Flatten Array）

用途： 将多维数组扁平化为一维数组。

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

Web 开发

10. 获取 URL 参数（Get URL Parameters）

用途： 从 URL 中提取查询参数。

function getUrlParameters() {
  let params = {};
  window.location.href.replace(/([^?&=]+)=([^&]+)/g, ($0, $1, $2) => { params[$1] = $2; });
  return params;
}

11. 验证电子邮件地址（Validate Email Address）

用途： 检查给定字符串是否为有效的电子邮件地址。

function validateEmail(email) {
  return /^[\w-.]+@[\w-.]+\.\w{2,4}$/.test(email);
}

12. 设置 Cookie

用途： 在浏览器中设置一个 Cookie。

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

13. 获取 Cookie

用途： 从浏览器中获取 Cookie 的值。

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

DOM 操作

14. HTML 转义（HTML Escape）

用途： 将 HTML 字符转义为实体，以防止跨站点脚本攻击（XSS）。

function escapeHtml(string) {
  return string
    .replace(/&/g, '&')
    .replace(/"/g, '"')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

15. 获取元素相对位置（Get Element Position）

用途： 获取给定元素相对于文档的相对位置。

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

其他实用工具

16. 延迟执行函数（Delay Function）

用途： 将函数的执行延迟指定的毫秒数。

function delay(func, delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try {
        resolve(func());
      } catch (error) {
        reject(error);
      }
    }, delay);
  });
}

17. 创建 DOM 元素（Create DOM Element）

用途： 根据给定的元素类型和文本内容创建 DOM 元素。

function createElement(element, item) {
  let newElement = document.createElement(element);
  newElement.textContent = item;
  return newElement;
}

18. 添加事件监听器（Add Event Listener）

用途： 跨浏览器为给定元素添加事件监听器。

function addEventListener(element, event, callback) {
  if (element.addEventListener) {
    element.addEventListener(event, callback);
  } else {
    element.attachEvent('on' + event, callback);
  }
}

19. 移除事件监听器（Remove Event Listener）

用途： 跨浏览器从给定元素中移除事件监听器。

function removeEventListener(element, event, callback) {
  if (element.removeEventListener) {
    element.removeEventListener(event, callback);
  } else {
    element.detachEvent('on' + event, callback);
  }
}

20. 滚动到顶部（Scroll to Top）

用途： 平滑滚动到页面的顶部。

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

结语

这些 JavaScript 工具函数是开发人员必备的工具库，它们可以大幅提升我们的开发效率和代码质量。掌握这些工具，你将能够轻松应对各种开发挑战，构建出更强大、更可靠的 Web 应用程序。

常见问题解答

1. 如何使用这些工具函数？

将这些工具函数复制粘贴到你的 JavaScript 代码中，并根据需要修改参数。

2. 我可以将这些工具函数用于我的项目吗？

是的，这些工具函数是开源且免费的，你可以将它们用于任何个人或商业项目。

3. 有哪些其他有用的 JavaScript 工具函数？

除了这里列出的工具函数之外，还有许多其他有用的 JavaScript 工具函数，例如数组过滤、查找和排序。

4. 如何创建自己的 JavaScript 工具函数？

要创建自己的 JavaScript 工具函数，你可以使用基本语法，例如函数、变量和条件语句。确保你的工具函数清晰、简洁且经过测试。

5. 在哪里可以找到更多 JavaScript 资源？

网上有许多资源可以帮助你学习和使用 JavaScript，例如文档、教程和社区论坛。