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 / 栈

相关推荐
奕辰杰3 小时前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny4 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
_Kayo_5 小时前
VUE2 学习笔记14 nextTick、过渡与动画
javascript·笔记·学习
路光.5 小时前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks
我爱996!5 小时前
SpringMVC——响应
java·服务器·前端
咔咔一顿操作6 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹6 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz7 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°7 小时前
css 不错的按钮动画
前端·css·微信小程序