logo

开发者热搜

JavaScript进阶：手写实现10个高频工具函数详解

作者：蛮不讲李2025.09.19 12:56浏览量：0

简介：本文深度解析JavaScript进阶阶段必须掌握的10个核心工具函数的手写实现，涵盖数组处理、函数式编程、异步控制等场景，通过原理剖析和代码示例帮助开发者突破原生API依赖，提升代码掌控力。

JavaScript进阶：手写实现10个高频工具函数详解

在JavaScript开发中，过度依赖第三方库会导致代码体积膨胀和性能损耗。本文将系统讲解10个进阶场景下必须掌握的核心工具函数的手写实现，涵盖数组处理、函数式编程、异步控制等关键领域，帮助开发者建立扎实的底层实现能力。

一、数组扁平化处理（flatten）

1.1 递归实现方案

  1. function flatten(arr) {
  2.   let result = [];
  3.   for (const item of arr) {
  4.     if (Array.isArray(item)) {
  5.       result = result.concat(flatten(item));
  6.     } else {
  7.       result.push(item);
  8.     }
  9.   }
  10.   return result;
  11. }
  12. // 测试用例
  13. console.log(flatten([1, [2, [3, 4]], 5])); // [1, 2, 3, 4, 5]

1.2 迭代实现方案

  1. function flattenIterative(arr) {
  2.   const stack = [...arr];
  3.   const result = [];
  4.   while (stack.length) {
  5.     const next = stack.pop();
  6.     if (Array.isArray(next)) {
  7.       stack.push(...next);
  8.     } else {
  9.       result.push(next);
  10.     }
  11.   }
  12.   return result.reverse();
  13. }

1.3 深度控制实现

  1. function flattenDeep(arr, depth = 1) {
  2.   return depth > 0 
  3.     ? arr.reduce((prev, curr) => 
  4.         prev.concat(Array.isArray(curr) 
  5.           ? flattenDeep(curr, depth - 1) 
  6.           : curr), [])
  7.     : arr.slice();
  8. }

二、函数柯里化（Currying）

2.1 基础柯里化实现

  1. function curry(fn) {
  2.   return function curried(...args) {
  3.     if (args.length >= fn.length) {
  4.       return fn.apply(this, args);
  5.     } else {
  6.       return function(...args2) {
  7.         return curried.apply(this, args.concat(args2));
  8.       }
  9.     }
  10.   }
  11. }
  12. // 使用示例
  13. const sum = (a, b, c) => a + b + c;
  14. const curriedSum = curry(sum);
  15. console.log(curriedSum(1)(2)(3)); // 6

2.2 带占位符的柯里化

  1. function curryWithPlaceholder(fn) {
  2.   const placeholder = Symbol();
  3.   const curried = (...args) => {
  4.     const filledArgs = args.map(arg => 
  5.       arg === placeholder ? undefined : arg
  6.     );
  7.     const missingArgs = fn.length - filledArgs.filter(Boolean).length;
  9.     if (missingArgs <= 0) {
  10.       return fn(...filledArgs);
  11.     } else {
  12.       return (...newArgs) => {
  13.         const newArgsWithPlaceholders = newArgs.map(arg => 
  14.           arg === placeholder ? placeholder : arg
  15.         );
  16.         const combinedArgs = args.map((arg, i) => 
  17.           arg === placeholder ? newArgsWithPlaceholders.shift() || placeholder : arg
  18.         );
  19.         return curried(...combinedArgs);
  20.       }
  21.     }
  22.   };
  23.   curried.placeholder = placeholder;
  24.   return curried;
  25. }

三、防抖与节流（Debounce & Throttle）

3.1 防抖函数实现

  1. function debounce(fn, delay, immediate = false) {
  2.   let timer = null;
  3.   return function(...args) {
  4.     const context = this;
  5.     if (timer) clearTimeout(timer);
  6.     if (immediate && !timer) {
  7.       fn.apply(context, args);
  8.     }
  9.     timer = setTimeout(() => {
  10.       if (!immediate) {
  11.         fn.apply(context, args);
  12.       }
  13.       timer = null;
  14.     }, delay);
  15.   }
  16. }
  17. // 使用场景
  18. window.addEventListener('resize', debounce(() => {
  19.   console.log('Window resized');
  20. }, 300));

3.2 节流函数实现

  1. function throttle(fn, delay) {
  2.   let lastTime = 0;
  3.   return function(...args) {
  4.     const now = Date.now();
  5.     if (now - lastTime >= delay) {
  6.       fn.apply(this, args);
  7.       lastTime = now;
  8.     }
  9.   }
  10. }
  11. // 时间戳版改进
  12. function throttleAdvanced(fn, delay) {
  13.   let lastTime = 0;
  14.   let timer = null;
  15.   return function(...args) {
  16.     const now = Date.now();
  17.     const remaining = delay - (now - lastTime);
  19.     if (remaining <= 0) {
  20.       if (timer) {
  21.         clearTimeout(timer);
  22.         timer = null;
  23.       }
  24.       lastTime = now;
  25.       fn.apply(this, args);
  26.     } else if (!timer) {
  27.       timer = setTimeout(() => {
  28.         lastTime = Date.now();
  29.         timer = null;
  30.         fn.apply(this, args);
  31.       }, remaining);
  32.     }
  33.   }
  34. }

四、Promise并行控制（Promise.all变体）

4.1 限制并发数的Promise调度器

  1. class PromiseScheduler {
  2.   constructor(maxConcurrent = 3) {
  3.     this.maxConcurrent = maxConcurrent;
  4.     this.running = 0;
  5.     this.queue = [];
  6.   }
  8.   add(promiseCreator) {
  9.     return new Promise((resolve, reject) => {
  10.       this.queue.push({ promiseCreator, resolve, reject });
  11.       this.run();
  12.     });
  13.   }
  15.   run() {
  16.     while (this.running < this.maxConcurrent && this.queue.length) {
  17.       const { promiseCreator, resolve, reject } = this.queue.shift();
  18.       this.running++;
  20.       promiseCreator()
  21.         .then(resolve)
  22.         .catch(reject)
  23.         .finally(() => {
  24.           this.running--;
  25.           this.run();
  26.         });
  27.     }
  28.   }
  29. }
  30. // 使用示例
  31. const scheduler = new PromiseScheduler(2);
  32. const tasks = Array(5).fill(0).map((_, i) => 
  33.   () => new Promise(res => setTimeout(() => {
  34.     console.log(`Task ${i} completed`);
  35.     res(i);
  36.   }, Math.random() * 1000))
  37. );
  39. tasks.forEach(task => scheduler.add(task));

4.2 带超时控制的Promise.all

  1. function promiseAllWithTimeout(promises, timeout) {
  2.   return new Promise((resolve, reject) => {
  3.     const timeoutId = setTimeout(() => {
  4.       reject(new Error('Promise.all timeout'));
  5.     }, timeout);
  7.     Promise.all(promises)
  8.       .then(resolve)
  9.       .catch(reject)
  10.       .finally(() => {
  11.         clearTimeout(timeoutId);
  12.       });
  13.   });
  14. }

五、深拷贝实现（Deep Clone）

5.1 完整深拷贝实现

  1. function deepClone(obj, hash = new WeakMap()) {
  2.   // 处理基本类型和null/undefined
  3.   if (obj === null || typeof obj !== 'object') {
  4.     return obj;
  5.   }
  7.   // 处理循环引用
  8.   if (hash.has(obj)) {
  9.     return hash.get(obj);
  10.   }
  12.   // 处理Date和RegExp
  13.   if (obj instanceof Date) return new Date(obj);
  14.   if (obj instanceof RegExp) return new RegExp(obj);
  16.   // 处理Map和Set
  17.   if (obj instanceof Map) {
  18.     const clone = new Map();
  19.     hash.set(obj, clone);
  20.     obj.forEach((value, key) => {
  21.       clone.set(deepClone(key, hash), deepClone(value, hash));
  22.     });
  23.     return clone;
  24.   }
  26.   if (obj instanceof Set) {
  27.     const clone = new Set();
  28.     hash.set(obj, clone);
  29.     obj.forEach(value => {
  30.       clone.add(deepClone(value, hash));
  31.     });
  32.     return clone;
  33.   }
  35.   // 处理普通对象和数组
  36.   const cloneObj = Array.isArray(obj) ? [] : {};
  37.   hash.set(obj, cloneObj);
  39.   for (const key in obj) {
  40.     if (obj.hasOwnProperty(key)) {
  41.       cloneObj[key] = deepClone(obj[key], hash);
  42.     }
  43.   }
  45.   // 处理Symbol属性
  46.   const symbolKeys = Object.getOwnPropertySymbols(obj);
  47.   for (const symKey of symbolKeys) {
  48.     cloneObj[symKey] = deepClone(obj[symKey], hash);
  49.   }
  51.   return cloneObj;
  52. }

六、函数组合（Function Composition）

6.1 从右到左的组合实现

  1. function compose(...fns) {
  2.   return function(initialValue) {
  3.     return fns.reduceRight((acc, fn) => fn(acc), initialValue);
  4.   }
  5. }
  6. // 使用示例
  7. const add5 = x => x + 5;
  8. const multiplyBy2 = x => x * 2;
  9. const subtract3 = x => x - 3;
  11. const composedFn = compose(subtract3, multiplyBy2, add5);
  12. console.log(composedFn(10)); // (10+5)*2-3 = 27

6.2 从左到右的组合实现

  1. function pipe(...fns) {
  2.   return function(initialValue) {
  3.     return fns.reduce((acc, fn) => fn(acc), initialValue);
  4.   }
  5. }
  6. // 与compose的对比
  7. const pipedFn = pipe(add5, multiplyBy2, subtract3);
  8. console.log(pipedFn(10)); // ((10+5)*2)-3 = 27

七、发布订阅模式（Pub/Sub）

7.1 基础实现

  1. class EventEmitter {
  2.   constructor() {
  3.     this.events = {};
  4.   }
  6.   on(event, callback) {
  7.     if (!this.events[event]) {
  8.       this.events[event] = [];
  9.     }
  10.     this.events[event].push(callback);
  11.   }
  13.   emit(event, ...args) {
  14.     if (this.events[event]) {
  15.       this.events[event].forEach(callback => {
  16.         callback.apply(this, args);
  17.       });
  18.     }
  19.   }
  21.   off(event, callback) {
  22.     if (!this.events[event]) return;
  24.     if (!callback) {
  25.       delete this.events[event];
  26.     } else {
  27.       this.events[event] = this.events[event].filter(
  28.         cb => cb !== callback
  29.       );
  30.     }
  31.   }
  33.   once(event, callback) {
  34.     const onceWrapper = (...args) => {
  35.       callback.apply(this, args);
  36.       this.off(event, onceWrapper);
  37.     };
  38.     this.on(event, onceWrapper);
  39.   }
  40. }
  41. // 使用示例
  42. const emitter = new EventEmitter();
  43. const handler = data => console.log('Received:', data);
  45. emitter.on('message', handler);
  46. emitter.emit('message', 'Hello'); // Received: Hello
  47. emitter.off('message', handler);
  48. emitter.emit('message', 'World'); // 无输出

八、惰性函数（Lazy Evaluation）

8.1 惰性求值实现

  1. function createLazyFunction(fn) {
  2.   let cache = null;
  3.   return function(...args) {
  4.     if (cache === null) {
  5.       cache = fn.apply(this, args);
  6.     }
  7.     return cache;
  8.   }
  9. }
  10. // 使用示例
  11. const expensiveCalculation = createLazyFunction(() => {
  12.   console.log('Performing expensive calculation...');
  13.   return Math.random();
  14. });
  16. console.log(expensiveCalculation()); // 输出日志并返回随机数
  17. console.log(expensiveCalculation()); // 直接返回缓存值

8.2 惰性链式调用

  1. class LazyChain {
  2.   constructor(value) {
  3.     this._calls = [];
  4.     this._value = value;
  5.   }
  7.   through(fn) {
  8.     this._calls.push(fn);
  9.     return this;
  10.   }
  12.   value() {
  13.     return this._calls.reduce((val, fn) => fn(val), this._value);
  14.   }
  16.   static of(value) {
  17.     return new LazyChain(value);
  18.   }
  19. }
  20. // 使用示例
  21. const result = LazyChain.of([1, 2, 3])
  22.   .through(arr => arr.map(x => x * 2))
  23.   .through(arr => arr.filter(x => x > 3))
  24.   .value(); // [4, 6]

九、观察者模式（Observer Pattern）

9.1 可观察对象实现

  1. class Observable {
  2.   constructor() {
  3.     this.observers = [];
  4.   }
  6.   subscribe(observer) {
  7.     this.observers.push(observer);
  8.     return {
  9.       unsubscribe: () => {
  10.         this.observers = this.observers.filter(
  11.           obs => obs !== observer
  12.         );
  13.       }
  14.     };
  15.   }
  17.   notify(data) {
  18.     this.observers.forEach(observer => {
  19.       if (typeof observer.update === 'function') {
  20.         observer.update(data);
  21.       }
  22.     });
  23.   }
  24. }
  25. // 使用示例
  26. const observable = new Observable();
  28. const observer1 = {
  29.   update: data => console.log('Observer1:', data)
  30. };
  32. const observer2 = {
  33.   update: data => console.log('Observer2:', data)
  34. };
  36. const subscription1 = observable.subscribe(observer1);
  37. const subscription2 = observable.subscribe(observer2);
  39. observable.notify('Test message');
  40. subscription1.unsubscribe();
  41. observable.notify('Another message');

十、记忆化（Memoization）

10.1 基础记忆化实现

  1. function memoize(fn) {
  2.   const cache = new Map();
  3.   return function(...args) {
  4.     const key = JSON.stringify(args);
  5.     if (cache.has(key)) {
  6.       return cache.get(key);
  7.     }
  8.     const result = fn.apply(this, args);
  9.     cache.set(key, result);
  10.     return result;
  11.   }
  12. }
  13. // 使用示例
  14. const factorial = memoize(n => {
  15.   if (n <= 1) return 1;
  16.   return n * factorial(n - 1);
  17. });
  19. console.log(factorial(5)); // 计算并缓存
  20. console.log(factorial(5)); // 从缓存获取

10.2 带过期时间的记忆化

  1. function memoizeWithExpiry(fn, ttl) {
  2.   const cache = new Map();
  3.   return function(...args) {
  4.     const key = JSON.stringify(args);
  5.     const now = Date.now();
  7.     // 检查缓存是否存在且未过期
  8.     if (cache.has(key)) {
  9.       const { value, expiry } = cache.get(key);
  10.       if (now < expiry) {
  11.         return value;
  12.       }
  13.       cache.delete(key);
  14.     }
  16.     const result = fn.apply(this, args);
  17.     cache.set(key, {
  18.       value: result,
  19.       expiry: now + ttl
  20.     });
  21.     return result;
  22.   }
  23. }
  24. // 使用示例
  25. const expensiveOperation = memoizeWithExpiry(
  26.   () => {
  27.     console.log('Performing expensive operation...');
  28.     return Math.random();
  29.   },
  30.   5000 // 5秒过期
  31. );

性能优化建议

  1. 缓存策略：对于记忆化函数，根据数据特性选择合适的缓存键生成方式，复杂对象建议使用JSON.stringify或自定义序列化方法

  2. 错误处理：在防抖/节流函数中添加错误边界处理，防止意外错误导致定时器无法清除

  3. 内存管理：对于事件发射器，定期清理不再使用的事件监听器，避免内存泄漏

  4. 类型检查：在深拷贝实现中增加更严格的类型检查，防止意外行为

  5. 并发控制：Promise调度器可根据实际需求调整队列策略（FIFO/LIFO）

总结

本文系统讲解了10个进阶JavaScript工具函数的手写实现，涵盖从基础数组操作到复杂异步控制的各种场景。这些实现不仅帮助开发者理解底层原理，更能在实际项目中减少对第三方库的依赖，提升代码性能和可维护性。建议开发者在实践中逐步掌握这些模式，并根据具体需求进行定制化改造。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数