一些常见的工具函数

作为一名现代前端开发人员，除了掌握框架（React/Vue/Next.js等）和构建工具（Vite/Webpack），你还需要熟练掌握或手写一大批实用工具函数（Utils），这些函数几乎出现在每一个中大型项目中。

下面是一张目前最常用、最值得掌握的前端工具函数分类表格（2025~2026主流实践）：

快速掌握优先级建议

1. debounce / throttle
2. deepClone（至少掌握JSON.parse + 递归两种方式）
3. isEmpty / isNil / isPlainObject
4. getQueryParam / stringifyQuery
5. formatDate / relativeTime
6. once / memoize
7. randomId / uuid
8. omit / pick
9. unique / uniqBy
10. sleep / retry

推荐学习路径（实用建议）

• 先自己手写上面标了“强烈建议手写”的几个（尤其是防抖/节流+深拷贝）
• 把它们收集到一个 utils.js / helpers.ts 文件中
• 再去看 lodash-es / radash / remeda / ujs 这类现代轻量工具库的源码
• 最后用 TypeScript 把你的工具函数加上类型（非常加分）

这些函数看似简单，但真正能又快又稳地写出来，并且考虑边界情况、类型安全、性能的同学，在面试和实际项目中都非常吃香。

你现在最想先掌握/手写哪个分类的函数？可以告诉我，我给你出个手写题或参考实现～ 🚀

debounce / throttle

我对防抖和节流，真的是没有搞清楚，用法没有搞清楚、实现更没有搞清楚。原因在于我不知道二者到底有什么区别？是怎么实现的？实现之后的效果到底是什么？

我好像笼统的认为，都是隔一段时间之后再执行，二者好像没有区别啊？2020年作用收集的司徒正美的一篇文章，感觉也没有讲清楚。干脆直接问AI吧，结果AI一下子就抓住了重点。

防抖（Debounce）和节流（Throttle）的目的都是限制函数在短时间内被过于频繁地调用，但它们的策略和使用场景完全不同。

用最生活化的比喻来帮你一次搞懂两者的区别：

直观对比表（最常用的场景）

代码最直观的对比（动画感理解）

​x
1
// 防抖：你停下来才算数
2
function debounce(fn, wait = 300) {
3
  let timer = null
4
  return function (...args) {
5
    clearTimeout(timer)           // 每次触发都把上次的清掉
6
    timer = setTimeout(() => {
7
      fn.apply(this, args)        // 等你停了才执行
8
    }, wait)
9
  }
10
}
11
​
12
// 节流：固定节奏放行
13
function throttle(fn, wait = 300) {
14
  let lastTime = 0
15
  return function (...args) {
16
    const now = Date.now()
17
    if (now - lastTime >= wait) {   // 距离上次执行已经够间隔了
18
      fn.apply(this, args)
19
      lastTime = now
20
    }
21
  }
22
}

一句话总结目前最容易记住的区别：

防抖 = “等你消停了再说” → 适合“最后一次才重要”的场景 节流 = “别太快，我要喘口气” → 适合“过程需要持续采样”的场景

防抖和节流最终执行的是哪一次触发的函数呢？

我觉得这个是我最没有搞清楚的地方，只要搞清楚了这个，写代码实现就很容易了。

防抖（debounce）和节流（throttle）最终执行的是哪一次触发的函数？

这是一个非常容易混淆但又很核心的区别，下面用最直白的方式对比说明：

两种最常见的实现方式对比（最终执行哪一次）

xxxxxxxxxx
47
1
// 1. 防抖（最常见写法：trailing 模式）
2
function debounce(fn, delay) {
3
  let timer = null;
4
  return function (...args) {
5
    clearTimeout(timer);
6
    timer = setTimeout(() => {
7
      fn.apply(this, args);   // ← 永远是「最后一次」触发的参数
8
    }, delay);
9
  };
10
}
11
​
12
// 2. 节流 - trailing 模式（最常见）
13
function throttle(fn, delay) {
14
  let lastTime = 0;
15
  return function (...args) {
16
    const now = Date.now();
17
    if (now - lastTime >= delay) {
18
      fn.apply(this, args);     // ← 这次时间窗里的「第一次」
19
      lastTime = now;
20
    }
21
  };
22
}
23
​
24
// 3. 节流 - leading + trailing 模式（更完整）
25
function throttle(fn, delay, { leading = true, trailing = true } = {}) {
26
  let timer = null;
27
  let lastArgs = null;
28
  
29
  return function (...args) {
30
    const now = Date.now();
31
    lastArgs = args;
32
    
33
    if (!timer && leading) {
34
      fn.apply(this, args);   // ← 第一次立即执行
35
    }
36
    
37
    if (timer) clearTimeout(timer);
38
    
39
    timer = setTimeout(() => {
40
      if (trailing && lastArgs) {
41
        fn.apply(this, lastArgs); // ← 时间窗结束时的「最后一次」
42
      }
43
      timer = null;
44
      lastArgs = null;
45
    }, delay);
46
  };
47
}

快速对照表（最终执行的是哪一次）

一句话总结区别（背下来最有用）：

• 防抖：只执行最后一次（你停手后的那一次）
• 节流：周期性地执行，执行的是该时间段内的第一次或最后一次（看具体实现）

希望这次解释能让你彻底分清「到底执行的是哪一次」～ 如果还有具体场景不确定执行的是哪一次，可以举例告诉我，我帮你分析！

动画演示

tanstack/react-pacer提供了很多实用的工具函数，我使用里面提供的防抖、节流函数来演示一下效果。这篇blog写的也很好，动画可以看一下https://kettanaito.com/blog/debounce-vs-throttle。

debounce

xxxxxxxxxx
78
1
import { useDebouncedCallback } from "@tanstack/react-pacer";
2
import { useRef, useState } from "react";
3
​
4
type User = {
5
  id: number;
6
  name: string;
7
};
8
​
9
export default function DebouncePage() {
10
  const [users, setUsers] = useState<User[]>([]);
11
  const [loading, setLoading] = useState(false);
12
  const controller = useRef(new AbortController());
13
​
14
  const debounceSearch = useDebouncedCallback(
15
    async function handleSearch(query: string) {
16
      controller.current.abort();
17
      controller.current = new AbortController();
18
      setLoading(true);
19
​
20
      const users = await fetchUsers(query, controller.current.signal);
21
      setUsers(users);
22
      setLoading(false);
23
    },
24
    {
25
      wait: 1000,
26
    }
27
  );
28
​
29
  // async function handleSearch(query: string) {
30
  //   controller.current.abort();
31
  //   controller.current = new AbortController();
32
  //   setLoading(true);
33
​
34
  //   const users = await fetchUsers(query, controller.current.signal);
35
  //   setUsers(users);
36
  //   setLoading(false);
37
  // }
38
​
39
  return (
40
    <div className="bg-gray-100 w-100 px-4 py-8 rounded-2xl">
41
      <h1 className="mb-4 text-2xl">User Search</h1>
42
​
43
      <div>
44
        <input
45
          className="border border-gray-400 rounded-xl w-full p-2"
46
          type="text"
47
          onChange={(e) => debounceSearch(e.target.value)}
48
          placeholder="Search users..."
49
        />
50
      </div>
51
​
52
      {loading ? (
53
        <div className="text-left pt-3">Loading...</div>
54
      ) : (
55
        <ul>
56
          {users.map((user) => (
57
            <li
58
              key={user.id}
59
              className="border-b border-b-gray-200 p-2 text-gray-900 text-left cursor-pointer hover:bg-gray-200 transition-all duration-200">
60
              <div>{user.name}</div>
61
            </li>
62
          ))}
63
        </ul>
64
      )}
65
    </div>
66
  );
67
}
68
​
69
async function fetchUsers(query: string, signal: AbortSignal) {
70
  const url = new URL("http://192.168.31.198:4000/users");
71
  if (query) url.searchParams.append("name_like", query);
72
​
73
  // await new Promise((resolve) => setTimeout(resolve, 1000));
74
​
75
  return fetch(url.toString(), { signal })
76
    .then((res) => res.json())
77
    .then((data) => data.data as User[]);
78
}

这是没有加防抖的情况，输入框每次变动，都会请求一次数据。

这是加了防抖的，只有在输入停止1s之后才会请求数据。

throttle

xxxxxxxxxx
20
1
import { useEffect, useState } from "react";
2
import { useThrottledValue } from "@tanstack/react-pacer";
3
​
4
export default function ThrottlePage() {
5
  const [width, setWidth] = useState(window.innerWidth);
6
  const [throttledWidth] = useThrottledValue(width, { wait: 1000 });
7
​
8
  useEffect(() => {
9
    const controller = new AbortController();
10
    window.addEventListener("resize", () => setWidth(window.innerWidth), {
11
      signal: controller.signal,
12
    });
13
  }, []);
14
  return (
15
    <div className="bg-gray-100 rounded-2xl p-6 w-full">
16
      <h2 className="text-2xl">Width: {width}px</h2>
17
      <h2 className="text-2xl">ThrottledWidth: {throttledWidth}px</h2>
18
    </div>
19
  );
20
}

可以看到，节流的实际效果就是每隔一段时间执行一次，不需要停止下来之后才能执行。

React 面试最常考的 8 个工具函数/Hooks

下面是简洁的表格概览，后面会逐一详细讲解作用、使用场景、核心原理、手写代码，帮助你真正理解和记住。

1. debounce / throttle

详细作用

• debounce：把短时间内连续多次触发的事件合并成最后一次，只有当事件停止触发一段时间后才真正执行。
• throttle：保证函数在指定时间间隔内最多执行一次，不管事件触发多频繁，都会按照固定节奏采样执行。

典型真实场景（非常详细）

• debounce

  • 搜索框输入（用户每敲一个字就发请求太浪费 → 等用户停下来 300~500ms 再发）
  • 表单自动保存（用户狂点保存按钮 → 只保存最后一次修改）
  • 窗口 resize 后重新计算布局（拖动过程中不计算，只在松手后算最终尺寸）
  • 按钮防重复提交（用户狂点提交 → 只发最后一次请求）

• throttle

  • 页面滚动加载更多（scroll 事件疯狂触发 → 每 200~300ms 判断一次是否到底）
  • 鼠标移动绘制/拖拽跟随（mousemove 每毫秒触发 → 每 16ms~50ms 采样一次位置）
  • 实时价格/股票图表更新（websocket 消息频繁 → 每秒最多渲染一次）
  • resize 过程中实时预览（拖动时要看到变化，但不能每像素都重算）

核心区别（背下来） debounce = “等你消停了再说”（只执行最后一次） throttle = “别太快，我要喘口气”（固定节奏执行，过程有采样）

xxxxxxxxxx
36
1
// 防抖（最常用 trailing 版）
2
function debounce<T extends (...args: any[]) => any>(
3
  fn: T,
4
  delay: number
5
): (...args: Parameters<T>) => void {
6
  let timer: NodeJS.Timeout | null = null;
7
  return (...args) => {
8
    if (timer) clearTimeout(timer);
9
    timer = setTimeout(() => fn(...args), delay);
10
  };
11
}
12
​
13
// 节流（leading + trailing 完整版）
14
function throttle<T extends (...args: any[]) => any>(
15
  fn: T,
16
  delay: number,
17
  { leading = true, trailing = true } = {}
18
) {
19
  let timer: NodeJS.Timeout | null = null;
20
  let lastArgs: Parameters<T> | null = null;
21
​
22
  return (...args: Parameters<T>) => {
23
    lastArgs = args;
24
​
25
    if (!timer && leading) {
26
      fn(...args);
27
    }
28
​
29
    if (timer) clearTimeout(timer);
30
    timer = setTimeout(() => {
31
      if (trailing && lastArgs) fn(...lastArgs);
32
      timer = null;
33
      lastArgs = null;
34
    }, delay);
35
  };
36
}

2. useDebounce

详细作用 在 React 中对值进行防抖处理，返回一个延迟更新的版本。 核心目的：避免值频繁变化导致 useEffect、API 调用、渲染等副作用频繁执行。

典型场景

• 搜索框：输入框 value 变化 → 防抖后才发搜索请求
• 表单校验：输入内容变化 → 防抖后才做复杂校验（正则、远程校验）
• 拖拽调整宽度/高度：实时显示预览，但不希望每像素都更新状态
• 防抖统计上报：用户操作频繁 → 只上报最后一次稳定状态

xxxxxxxxxx
19
1
function useDebounce<T>(value: T, delay: number): T {
2
  const [debouncedValue, setDebouncedValue] = useState(value);
3
​
4
  useEffect(() => {
5
    const timer = setTimeout(() => {
6
      setDebouncedValue(value);
7
    }, delay);
8
​
9
    return () => clearTimeout(timer);
10
  }, [value, delay]);
11
​
12
  return debouncedValue;
13
}
14
​
15
// 用法
16
const debouncedSearch = useDebounce(searchText, 300);
17
useEffect(() => {
18
  if (debouncedSearch) fetchData(debouncedSearch);
19
}, [debouncedSearch]);

3. usePrevious

详细作用 记住组件上一次渲染时的值，让你在当前渲染周期内可以拿到“旧值”进行对比。

典型场景

• 对比 count 是否增加/减少 → 做动画、入场/出场效果
• 监听 url/searchParams 变化 → 记录上一个 tab/page，做返回动画
• 表单脏检查：对比新旧值决定是否显示“保存”按钮
• 日志/埋点：只在值真正变化时才上报

xxxxxxxxxx
17
1
function usePrevious<T>(value: T): T | undefined {
2
  const ref = useRef<T>();
3
​
4
  useEffect(() => {
5
    ref.current = value;
6
  }, [value]);
7
​
8
  return ref.current;
9
}
10
​
11
// 用法示例
12
const prevCount = usePrevious(count);
13
useEffect(() => {
14
  if (prevCount !== undefined && count > prevCount) {
15
    console.log("count 增加了");
16
  }
17
}, [count]);

4. deepClone

详细作用 创建对象的完整独立副本，修改副本不会影响原对象，支持数组、嵌套对象、循环引用。

典型场景

• 表单编辑：备份初始数据 → 对比是否修改过（脏检查）
• Redux/状态管理：不可变更新前的深拷贝（虽然现在 immer 很流行）
• 配置合并：默认配置 + 用户配置 → 深度合并而不污染默认配置
• 测试/调试：需要独立副本时避免意外修改源数据

xxxxxxxxxx
17
1
function deepClone<T>(obj: T, visited = new WeakMap()): T {
2
  if (obj === null || typeof obj !== "object") return obj;
3
​
4
  // 处理循环引用
5
  if (visited.has(obj)) return visited.get(obj);
6
​
7
  const clone = Array.isArray(obj) ? [] : {};
8
  visited.set(obj, clone);
9
​
10
  for (const key in obj) {
11
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
12
      (clone as any)[key] = deepClone((obj as any)[key], visited);
13
    }
14
  }
15
​
16
  return clone as T;
17
}

5. useMemoizedFn

详细作用 创建一个引用永远不变的函数，但内部永远执行最新传入的函数体。 解决了 useCallback 必须依赖 deps 数组，导致函数引用频繁变化的问题。

典型场景

• 把函数作为 props 传给子组件，但不想子组件因函数引用变化而重渲染
• useEffect 依赖一个函数，但这个函数内部会经常更新（例如从 props/state 取最新值）
• 事件处理函数作为 ref.current 存储（定时器、事件监听等）

xxxxxxxxxx
12
1
function useMemoizedFn<T extends (...args: any[]) => any>(fn: T): T {
2
  const fnRef = useRef<T>(fn);
3
​
4
  // 每次渲染都更新最新的 fn，但 ref 本身不变
5
  fnRef.current = fn;
6
​
7
  const memoizedFn = useRef((...args: Parameters<T>) => {
8
    return fnRef.current(...args);
9
  });
10
​
11
  return memoizedFn.current as T;
12
}

6. useUpdate

详细作用 不修改任何状态的情况下，强制触发组件重新渲染。

典型场景

• 第三方库的 ref 变化（canvas、地图、编辑器）需要手动重绘
• 监听 window resize、orientation change 等浏览器事件
• 某些全局状态管理工具（非 React 状态）发生变化
• 强制触发动画重置/重新计算布局

xxxxxxxxxx
9
1
function useUpdate() {
2
  const [, setState] = useState({});
3
  return useCallback(() => setState({}), []);
4
}
5
​
6
// 另一种更流行的写法（更省内存）
7
function useUpdate() {
8
  return useReducer(x => x + 1, 0)[1];
9
}

7. get（安全访问深层属性）

详细作用 安全地访问对象深层属性，任意一层为 null/undefined 都不会报错，并可提供默认值。

典型场景

• 处理后端返回的数据（字段可能缺失）
• 表单默认值填充（user?.profile?.address?.city）
• 复杂配置读取（theme?.components?.button?.variants?.primary）
• 日志/埋点取值（event?.data?.user?.id）

xxxxxxxxxx
19
1
function get<T>(
2
  obj: any,
3
  path: string | string[],
4
  defaultValue?: T
5
): T | undefined {
6
  const paths = Array.isArray(path) ? path : path.split(/[\.\[\]]/).filter(Boolean);
7
  
8
  let current = obj;
9
  for (const key of paths) {
10
    if (current == null) return defaultValue;
11
    current = current[key];
12
  }
13
  
14
  return current ?? defaultValue;
15
}
16
​
17
// 用法
18
get(user, "profile.address.city", "未知城市");
19
get(obj, ["data", "user", 0, "name"]);

8. once

详细作用 保证一个函数在整个生命周期（或指定范围内）只被执行一次，之后调用都返回第一次的结果。

典型场景

• 组件只初始化一次全局事件监听
• 延迟加载第三方 SDK（只加载一次）
• 某些昂贵的初始化操作（创建 WebSocket、初始化地图）
• 埋点/统计：只上报一次“页面首次可见”

xxxxxxxxxx
16
1
function once<T extends (...args: any[]) => any>(fn: T): (...args: Parameters<T>) => ReturnType<T> | undefined {
2
  let called = false;
3
  let result: ReturnType<T>;
4
​
5
  return (...args) => {
6
    if (called) return result;
7
    called = true;
8
    result = fn(...args);
9
    return result;
10
  };
11
}
12
​
13
// React 中常用写法（结合 useRef）
14
const init = useRef(once(() => {
15
  console.log("只初始化一次");
16
}));

如果你准备面试，这些函数建议按照以下优先级手写练习：

1. debounce + throttle + useDebounce（几乎必考）
2. usePrevious + useMemoizedFn（非常高频）
3. deepClone + get（经典手写题）
4. useUpdate + once（加分项）

需要我针对其中某一个再给出更详细的面试回答模板或常见追问吗？