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

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

---

✅ 一、防抖（Debounce）

📌 场景：

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

✅ 实现方式：

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

✅ 使用方式：

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

---

✅ 二、节流（Throttle）

📌 场景：

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

✅ 时间戳实现：

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);
    }
  };
}

✅ 使用方式：

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

---

✅ 三、数组扁平化（Flatten Array）

📌 场景：

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

---

✅ 方法 1：递归实现

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

---

✅ 方法 2：flat(Infinity)（ES10 简洁）

const arr = [1, [2, [3, [4]]]];
const result = arr.flat(Infinity);

---

✅ 方法 3：迭代 + 栈实现（不使用递归）

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

---