js防抖、节流和扁平化实现

下面是 JavaScript 中常见的三个面试高频考点:


✅ 一、防抖(Debounce)

📌 场景:

  • 例如搜索输入框,每次输入触发搜索太频繁;
  • 希望用户停止操作后一段时间再触发函数

✅ 实现方式:

ini 复制代码
function debounce(fn, delay = 300) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

✅ 使用方式:

javascript 复制代码
window.addEventListener('resize', debounce(() => {
  console.log('窗口大小变化,执行逻辑');
}, 500));

✅ 二、节流(Throttle)

📌 场景:

  • 例如滚动监听、按钮点击,频繁触发但希望控制执行频率
  • 比如希望每 500ms 执行一次即可。

✅ 时间戳实现:

ini 复制代码
function throttle(fn, delay = 300) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime > delay) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

✅ 使用方式:

javascript 复制代码
document.addEventListener('scroll', throttle(() => {
  console.log('节流执行 scroll');
}, 200));

✅ 三、数组扁平化(Flatten Array)

📌 场景:

  • 嵌套数组 [1, [2, [3, [4]]]] 要变成 [1, 2, 3, 4]

✅ 方法 1:递归实现

javascript 复制代码
function flatten(arr) {
  return arr.reduce((acc, val) =>
    Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}

✅ 方法 2:flat(Infinity)(ES10 简洁)

ini 复制代码
const arr = [1, [2, [3, [4]]]];
const result = arr.flat(Infinity);

✅ 方法 3:迭代 + 栈实现(不使用递归)

arduino 复制代码
function flatten(arr) {
  const stack = [...arr];
  const result = [];
  while (stack.length) {
    const item = stack.pop();
    if (Array.isArray(item)) {
      stack.push(...item);
    } else {
      result.unshift(item); // 反顺序需要 unshift
    }
  }
  return result;
}

✅ 总结对比

技术 适用场景 核心原理
防抖 停止输入后再处理 每次都清定时器
节流 控制频繁触发频率 设置时间戳或定时器
扁平化 处理嵌套数组 递归 / ES10 flat / 栈

相关推荐
lichenyang4532 分钟前
Vue生命周期以及自定义钩子和路由
前端
程序员二师兄5 分钟前
记一次鸿蒙webview图片渲染失败的问题
前端·javascript·harmonyos
萌萌哒草头将军5 分钟前
字节也在用的 @tanstack/react-query 到底有多好用!🔥🔥🔥
前端·javascript·react.js
lineo_7 分钟前
手写 pinia 持久化缓存插件,兼容indexDB
前端·vue.js
20269 分钟前
14.2.企业级脚手架-tsup的配置和使用
前端
王林不想说话11 分钟前
新的枚举使用方式enum-plus
前端·vue.js·typescript
JohnYan20 分钟前
工作笔记 - 改进的单例应用
javascript·设计模式·bun
拾光拾趣录23 分钟前
HTML | 10个常犯的错误
前端·html
coding随想24 分钟前
常见UI事件解析:Load/Unload、Error/Abort、Resize/Scroll、Select/DOMFocusIn等
前端
鹧鸪yy27 分钟前
从Token介绍到单点登录SSO
前端·javascript