JS开发者应该了解的函数方法

基础工具函数

• debounce 优化性能

该函数可防止函数执行过于频繁（例如搜索输入框、窗口大小调整事件等）。防抖函数对于性能优化至关重要，因为它有助于减少函数执行的次数，尤其是对于那些触发频率很高的事件，例如：

• 窗口大小调整
• 滚动
• 输入（例如搜索输入框）
• 鼠标移动

防抖的工作原理

防抖会延迟函数的执行，直到自上次调用该函数以来经过的延迟时间。

示例：

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

• throttle 限制函数调用，确保函数在给定的时间间隔内最多执行一次。

它适用于 高频事件，例如：

• 滚动（例如无限滚动、懒加载）
• 窗口大小调整
• 鼠标移动（例如跟踪光标位置）
• 按钮点击（例如防止重复提交）

节流的工作原理

节流限制函数在单位时间内执行的次数。与防抖不同，防抖是在活动停止后才执行。

示例：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function (...args) {
    if (!lastRan) {
      func.apply(this, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(this, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

数组和对象操作

在 JavaScript 中，对象和数组是 引用类型 。当你将一个对象/数组赋值给一个新变量时，这两个变量 指向内存中的同一个位置，如果其中一个被修改，就会导致 意外的副作用。

✅ 克隆有助于防止意外修改

✅ 在使用函数时确保数据完整性

✅ 对于不可变性（例如在 React 状态管理中）很有用

• 克隆对象或数组（浅拷贝）

const clone = (obj) => ({ ...obj });
const arrClone = (arr) => [...arr];

• 深克隆对象

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

• 从数组中删除重复项

const removeDuplicates = (arr) => [...new Set(arr)];

• 展平嵌套数组

const flatten = (arr) => arr.flat(Infinity);

字符串操作

• 首字母大写

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

• 将字符串转换为 Slug

在博客、新闻等中常用。例如查看用户时，不用用户的 id，而是使用 slug。在博客或新闻中，URL 中有 slug 更好，因为这样对搜索引擎优化友好，并且提高了 URL 的可读性。

const toSlug = (str) => str.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
console.log(toSlug("Hello World!")); // 输出: "hello-world"
console.log(toSlug("This is a test_string.")); // 输出: "this-is-a-teststring"
console.log(toSlug("123 456!@#$%^&*()")); // 输出: "123-456"

DOM 操作

• 选择元素

以下两个函数是用于选择 DOM 元素的简写工具。它们是 document.querySelecter() 和 document.querySelectorAll() 的短替代方法，使代码更加简洁易读。

const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => document.querySelectorAll(selector);

示例：

const title = $("h1"); // 选择第一个 <h1> 元素
console.log(title.textContent);

• 切换类

const toggleClass = (el, className) => el.classList.toggle(className);

当调用此函数时，它会在元素上添加或移除一个 CSS 类。它会检查该类是否存在：

• ✅ 如果存在该类，则将其移除。
• ✅ 如果不存在该类，则将其添加。

示例：

const btn = document.querySelector("#themeToggle");

btn.addEventListener("click", () => {
  toggleClass(document.body, "dark-mode");
});

CSS 示例：

.dark-mode {
  background: black;
  color: white;
}

• 将文本复制到剪贴板

在 Web 应用程序中将文本复制到剪贴板对于提升用户体验至关重要。它允许用户快速复制链接、代码或文本，而无需手动选择。该函数在分享按钮、代码片段、表单输入框以及密码管理器中被广泛使用。🚀

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

事件处理

• 检测点击元素外部

此函数可检测在元素外部的点击事件，并触发回调函数。

✅ 防止意外交互

✅ 适用于关闭下拉菜单、模态框或侧边栏

✅ 提升用户体验

function clickOutside(element, callback) {
  document.addEventListener('click', (event) => {
    if (!element.contains(event.target)) callback();
  });
}

示例：

// 如果在模态框外部点击，则关闭模态框
const modal = document.querySelector("#modal");
const closeModal = () => modal.classList.remove("open");

clickOutside(modal, closeModal);

• 平滑滚动元素

const smoothScroll = (element) => {
  document.querySelector(element).scrollIntoView({ behavior: 'smooth' });
};

当调用此函数时，它会平滑滚动到页面上的特定元素。

它的工作原理：

• document.querySelector(element) -- 根据提供的 CSS 选择器查找 DOM 元素。
• scrollIntoView({ behavior: 'smooth' }) -- 平滑滚动到选定的元素，而不是突然跳转。

日期与时间

• 将日期格式化为 YYYY-MM-DD

很多人不知道，你可以使用这一行代码将日期格式化为 YYYY-MM-DD 格式。

const formatDate = (date) => date.toISOString().split('T')[0];

此函数将 JavaScript Date 对象格式化为 YYYY-MM-DD 格式（ISO 8601）。

示例：

const today = new Date();
console.log(formatDate(today)); // 输出："2025-02-02"

• 获取 "多久之前"（例如"5 分钟前"）

此函数根据给定的日期返回一个 人类可读的"多久之前"字符串，例如："2 天前""5 小时前"或"刚刚"。它适用于在帖子、评论或活动日志中显示相对时间戳。

function timeAgo(date) {
  const seconds = Math.floor((new Date() - date) / 1000);
  const intervals = { year: 31536000, month: 2592000, day: 86400, hour: 3600, minute: 60 };

  for (const [unit, value] of Object.entries(intervals)) {
    const count = Math.floor(seconds / value);
    if (count >= 1) return `${count} ${unit}${count > 1 ? 's' : ''} ago`;
  }
  return 'just now';
}

它的工作原理：

• new Date() - date -- 计算当前时间与给定 date 之间的时间差。
• 将差值除以 1000 -- 将差值转换为秒。
• intervals 对象 -- 将时间（年、月、日等）映射为其对应的秒数。
• 遍历时间间隔 -- 确定时间（年、月、日等）最适合时间差，并返回对应的字符串（例如"5 分钟前"）。
• 回退 -- 如果时间差很短（不到一分钟），则返回"刚刚"。

示例：

const postDate = new Date("2025-01-30T12:00:00");
console.log(timeAgo(postDate)); // 输出："3 days ago"

Fetch 与 Async/Await

• 带错误处理的获取数据方法

此函数向给定的 url 发起 HTTP 请求 ，并将响应以 JSON 格式返回。它是 Axios 的有效替代品。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Network error');
    return await response.json();
  } catch (error) {
    console.error(error);
  }
}

🎯为什么在不使用 Axios ？

1. JavaScript 原生支持 -- fetch 是现代浏览器内置的，因此无需包含任何外部依赖项（如 Axios）。它在大多数环境中都能正常工作，包括浏览器和 Node.js （通过 node-fetch）。
2. Async/Await 语法 -- 它使用 async/await 更易读且类似同步的方式处理异步请求。
3. 错误处理 -- 当响应不是 ok（状态码不在 200-299 范围内）时，该函数会抛出错误，轻松捕获网络错误 。它还使用 try-catch 块捕获其他任何错误。
4. 较小的占用空间 -- 由于 fetch 是 浏览器内置的 API ，因此无需导入或安装任何额外的库， 更轻量且速度更快。

示例：

const url = "https://jsonplaceholder.typicode.com/posts";
fetchData(url).then((data) => {
  console.log(data);
});

函数式编程辅助工具

• 缓存（缓存昂贵的函数调用）

function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);
  };
}

memoize 函数是一种 性能优化技术 ，它缓存函数调用的结果，并在再次遇到相同的输入时 返回缓存的结果 ，而不是重新计算结果。这对于 昂贵的 或 重复的计算 特别有用。

它的工作原理：

1. cache = new Map() -- 用于存储之前执行的函数调用的结果。键是序列化的参数，值是对应的函数结果。
2. key = JSON.stringify(args) -- 将函数参数转换为 JSON 字符串，用作缓存键。
3. if (!cache.has(key)) -- 检查该参数集的结果是否已存在于缓存中。
4. cache.set(key, fn(...args)) -- 如果结果不在缓存中，则调用函数并将结果存储在缓存中。
5. return cache.get(key) -- 如果结果存在于缓存中，则直接返回缓存的结果。

示例用法：

1. 缓存阶乘函数

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

const memoizedFactorial = memoize(factorial);

console.log(memoizedFactorial(5));  // 计算并缓存结果
console.log(memoizedFactorial(5));  // 返回缓存结果

✅ 第一次调用将计算结果并将其缓存，而后续具有相同参数的调用将返回缓存的结果。

2. 缓存昂贵的计算

function slowComputation(num) {
  console.log('Calculating...');
  return num * num; // 模拟昂贵的计算
}

const memoizedComputation = memoize(slowComputation);

console.log(memoizedComputation(10)); // 将会计算
console.log(memoizedComputation(10)); // 将返回缓存结果

✅ 第二次调用 memoizedComputation(10) 时将 不会打印"Calculating..." ，因为它返回的是缓存值。

• 生成随机字符串

const randomString = (length = 8) => Math.random().toString(36).substr(2, length);

此函数生成一个 指定长度的随机字母数字字符串（默认为 8 个字符）。

示例：

console.log(randomString());  // 示例输出："y8d4sj2g"
console.log(randomString(12));  // 示例输出："4df7y9qs2zxg"

何时使用 randomString？

1. 快速生成随机值 -- 仅用 一行代码 便可生成 短随机字符串。
2. 用例 -- 常用于生成唯一的 ID、令牌 或 密码。例如在表单提交、网址缩短器或会话标识符等场景中。
3. 可定制性 -- 该函数允许你 轻松调整字符串长度，只需传递一个自定义参数即可。

这些函数可能不是你每天都会用到的，了解它们可以在未来的项目中派上用场。

希望这篇文章对你有帮助！感谢你的阅读，祝你拥有美好的一天------快乐编程！😁🍻

原文：dev.to/jenueldev/j...