每日前端手写题实战：Day2深度解析与进阶技巧

一、手写代码的核心价值与训练意义

在前端开发领域，”手写代码”能力是区分初级与高级工程师的重要标志。不同于框架API的调用，手写实现要求开发者深入理解底层原理，培养系统化思维。每日手写题训练具有三重价值：

1. 原理内化：通过手动实现Promise.all、bind等内置方法，倒逼理解异步机制与作用域链
2. 编码优化：在无IDE辅助下，锻炼代码健壮性设计能力（如参数校验、异常处理）
3. 思维训练：构建从问题拆解到方案设计的完整逻辑链条

以某大厂面试真题为例：要求候选人现场实现带缓存的斐波那契数列计算器，70%的应试者因边界条件处理不完善被淘汰。这印证了手写训练的实战价值。

二、Day2精选题目解析与实现

题目1：防抖与节流组合实现

需求：编写一个throttleDebounce函数，兼具节流（throttle）的频率控制与防抖（debounce）的最终执行特性。

function throttleDebounce(func, delay, throttleDelay) {
  let lastExecTime = 0;
  let timer = null;
  let isThrottled = false;
  return function(...args) {
    const now = Date.now();
    const context = this;
    // 节流控制：距离上次执行超过throttleDelay才允许执行
    if (now - lastExecTime > throttleDelay) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      lastExecTime = now;
      func.apply(context, args);
      isThrottled = false;
    } else if (!isThrottled) {
      isThrottled = true;
      // 防抖处理：延迟delay后执行
      timer = setTimeout(() => {
        lastExecTime = Date.now();
        func.apply(context, args);
        isThrottled = false;
      }, delay);
    }
  };
}

实现要点：

1. 使用时间戳记录上次执行时间，实现节流控制
2. 通过clearTimeout清除未执行的防抖定时器
3. 状态标志isThrottled防止重复触发

应用场景：搜索框输入联想（防抖）+ 滚动加载（节流）的复合需求

题目2：深拷贝进阶版

需求：实现支持循环引用、函数、Date等特殊类型的深拷贝函数。

function deepClone(obj, hash = new WeakMap()) {
  // 处理基本类型和null/undefined
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  // 处理循环引用
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  // 处理Date和RegExp
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  // 处理函数（简单实现，实际需考虑作用域等问题）
  if (typeof obj === 'function') {
    return obj; // 实际项目建议使用更复杂的函数克隆方案
  }
  // 处理数组和普通对象
  const cloneObj = Array.isArray(obj) ? [] : {};
  hash.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  // 处理Symbol属性
  const symbolKeys = Object.getOwnPropertySymbols(obj);
  for (let symKey of symbolKeys) {
    cloneObj[symKey] = deepClone(obj[symKey], hash);
  }
  return cloneObj;
}

关键优化：

1. 使用WeakMap解决循环引用问题
2. 特殊类型单独处理（Date/RegExp）
3. 递归实现真正的深度克隆
4. 兼容Symbol属性

性能对比：与JSON.parse(JSON.stringify())相比，支持更多数据类型但性能开销更大，需根据场景选择。

题目3：Promise链式调用限制

需求：实现一个LimitedPromiseChain类，限制同时执行的Promise数量。

class LimitedPromiseChain {
  constructor(limit) {
    this.limit = limit;
    this.running = 0;
    this.queue = [];
  }
  add(promiseCreator) {
    return new Promise((resolve, reject) => {
      this.queue.push({ promiseCreator, resolve, reject });
      this.run();
    });
  }
  run() {
    while (this.running < this.limit && this.queue.length) {
      const { promiseCreator, resolve, reject } = this.queue.shift();
      this.running++;
      promiseCreator()
        .then(resolve, reject)
        .finally(() => {
          this.running--;
          this.run();
        });
    }
  }
}
// 使用示例
const limiter = new LimitedPromiseChain(2);
function createPromise(id, delay) {
  return () => new Promise(res => setTimeout(() => {
    console.log(`Promise ${id} resolved`);
    res(id);
  }, delay));
}
for (let i = 0; i < 5; i++) {
  limiter.add(createPromise(i, i * 1000));
}

设计原理：

1. 任务队列管理未执行的Promise
2. 计数器控制并发数量
3. 使用finally确保执行完毕后释放资源

实际应用：控制并发HTTP请求数量，避免浏览器请求并发限制导致的问题。

三、手写题训练方法论

1. 渐进式训练策略

• 基础阶段：实现简单函数（如map/filter）
• 进阶阶段：处理边界条件和异常（如空值、循环引用）
• 高级阶段：优化性能和内存使用（如尾递归优化）

2. 调试与优化技巧

• 使用console.trace()追踪调用栈
• 通过Jest编写单元测试验证实现正确性
• 使用Chrome DevTools分析内存占用

3. 常见错误模式

• 变量提升问题：在闭包中错误引用循环变量
• this指向错误：未正确处理函数调用上下文
• 性能陷阱：嵌套循环导致O(n²)复杂度

四、企业级应用场景

1. 中间件系统实现

参考Koa的洋葱模型，手写实现一个可扩展的中间件系统：

class MiddlewareSystem {
  constructor() {
    this.middlewares = [];
  }
  use(fn) {
    this.middlewares.push(fn);
    return this;
  }
  execute(context) {
    const dispatch = (i) => {
      if (i === this.middlewares.length) return Promise.resolve();
      const middleware = this.middlewares[i];
      return Promise.resolve(middleware(context, () => dispatch(i + 1)));
    };
    return dispatch(0);
  }
}

2. 状态管理简化实现

手写实现Redux核心逻辑：

function createStore(reducer, initialState) {
  let state = initialState;
  const listeners = [];
  function getState() {
    return state;
  }
  function dispatch(action) {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  }
  function subscribe(listener) {
    listeners.push(listener);
    return () => {
      const index = listeners.indexOf(listener);
      listeners.splice(index, 1);
    };
  }
  dispatch({ type: '@INIT' });
  return { getState, dispatch, subscribe };
}

五、持续训练建议

1. 建立题库：按数据结构、算法、设计模式等分类整理
2. 代码审查：每次实现后进行自我审查，重点关注：
   • 变量命名规范性
   • 错误处理完整性
   • 性能优化空间
3. 对比学习：对比自己实现与标准库的实现差异
4. 场景扩展：为每个实现添加至少3个应用场景

每日前端手写题不是简单的肌肉记忆训练，而是通过刻意练习培养解决复杂问题的能力。建议开发者每天投入30分钟进行专项训练，6个月后编码质量和问题解决速度将有显著提升。记住：优秀的代码不是写出来的，而是改出来的——在持续迭代中追求卓越。