前端手写面试题汇总#

本文整理了前端面试中常见的手写题，涵盖了 JavaScript 核心概念和常用工具函数的实现。

目录#

Promise 相关
- Promise.all
- Promise.race
防抖与节流
- debounce (防抖)
- throttle (节流)
深拷贝
发布订阅模式
call、apply、bind
instanceof 和 new
函数柯里化
异步任务调度器
LRU 缓存

1. Promise 相关#

1.1 Promise.all#

题目描述： 实现 Promise.all 方法，接收一个 Promise 数组，当所有 Promise 成功时返回结果数组，任一失败则立即返回失败原因。

核心要点：

返回结果顺序与传入顺序一致
使用计数器判断是否全部完成
快速失败机制
处理非 Promise 值

代码实现：

1
function MyPromiseAll(promises) {
2
  return new Promise((resolve, reject) => {
3
    // 参数校验
4
    if (!Array.isArray(promises)) {
5
      reject(new TypeError("arguments must be an array"));
6
      return;
7
    }
8

9
    // 空数组直接返回
10
    if (promises.length === 0) {
11
      resolve([]);
12
      return;
13
    }
14

15
    const result = [];
16
    let count = 0;
17

18
    promises.forEach((promise, index) => {
19
      // 使用 Promise.resolve 包装，处理非 Promise 值
20
      Promise.resolve(promise)
21
        .then((value) => {
22
          result[index] = value;  // 保证顺序
23
          count++;
24
          if (count === promises.length) {
25
            resolve(result);
26
          }
27
        })
28
        .catch(reject);  // 快速失败
29
    });
30
  });
31
}

使用示例：

1
const p1 = Promise.resolve(1);
2
const p2 = new Promise((resolve) => setTimeout(() => resolve(2), 1000));
3
const p3 = Promise.resolve(3);
4

5
MyPromiseAll([p1, p2, p3]).then((results) => {
6
  console.log(results); // [1, 2, 3]
7
});

1.2 Promise.race#

题目描述： 实现 Promise.race 方法，返回最先完成（resolve 或 reject）的 Promise 结果。

核心要点：

第一个完成的 Promise 决定结果
Promise 状态只能改变一次
空数组返回永远 pending 的 Promise

代码实现：

1
function MyPromiseRace(promises) {
2
  return new Promise((resolve, reject) => {
3
    if (!Array.isArray(promises)) {
4
      reject(new TypeError("arguments must be an array"));
5
      return;
6
    }
7

8
    // 空数组：返回永远 pending 的 Promise
9
    if (promises.length === 0) {
10
      return;
11
    }
12

13
    promises.forEach((promise) => {
14
      Promise.resolve(promise)
15
        .then(resolve)   // 第一个完成的会改变状态
16
        .catch(reject);  // 后续的会被忽略
17
    });
18
  });
19
}

使用示例：

1
const p1 = new Promise((resolve) => setTimeout(() => resolve(1), 1000));
2
const p2 = new Promise((resolve) => setTimeout(() => resolve(2), 500));
3

4
MyPromiseRace([p1, p2]).then((result) => {
5
  console.log(result); // 2 (500ms 后输出)
6
});

2. 防抖与节流#

2.1 debounce (防抖)#

题目描述： 实现防抖函数，在事件触发 n 秒后执行回调，若 n 秒内再次触发则重新计时。

核心要点：

支持立即执行模式（immediate）
支持取消功能（cancel）
非 immediate 模式返回 Promise
正确绑定 this 和传递参数

代码实现：

1
function debounce(func, wait, immediate = false) {
2
  let timer = null;
3

4
  const debounced = function (...args) {
5
    const callNow = immediate && !timer;
6

7
    if (timer) clearTimeout(timer);
8

9
    // immediate 模式：立即执行并返回结果
10
    if (callNow) {
11
      const result = func.apply(this, args);
12
      timer = setTimeout(() => {
13
        timer = null;
14
      }, wait);
15
      return result;
16
    }
17

18
    // 非 immediate 模式：返回 Promise
19
    return new Promise((resolve) => {
20
      timer = setTimeout(() => {
21
        timer = null;
22
        const result = func.apply(this, args);
23
        resolve(result);
24
      }, wait);
25
    });
26
  };
27

28
  // 添加 cancel 方法
29
  debounced.cancel = function () {
30
    if (timer) {
31
      clearTimeout(timer);
32
      timer = null;
33
    }
34
  };
35

36
  return debounced;
37
}

使用示例：

1
// 搜索框输入
2
const searchInput = debounce((value) => {
3
  console.log('搜索:', value);
4
}, 500);
5

6
// 用户输入
7
searchInput('a');   // 不执行
8
searchInput('ab');  // 不执行
9
searchInput('abc'); // 500ms 后执行
10

11
// 取消执行
12
const debouncedFn = debounce(() => console.log('执行'), 1000);
13
debouncedFn();
14
debouncedFn.cancel(); // 取消执行

应用场景：

搜索框输入
窗口 resize
表单验证

2.2 throttle (节流)#

题目描述： 实现节流函数，持续触发事件时保证一定时间内只执行一次。

核心要点：

时间戳 + 定时器混合实现
支持 leading 和 trailing 模式
支持取消功能
处理系统时间修改的边界情况

代码实现：

1
function throttle(func, wait, options = {}) {
2
  let timer = null;
3
  let previous = 0;
4

5
  const { leading = true, trailing = true } = options;
6

7
  const throttled = function (...args) {
8
    const now = Date.now();
9

10
    // 如果不需要首次立即执行，设置 previous 为当前时间
11
    if (!leading && !previous) {
12
      previous = now;
13
    }
14

15
    const remaining = wait - (now - previous);
16

17
    // 如果距离上次执行已超过 wait，可以执行
18
    if (remaining <= 0 || remaining > wait) {
19
      if (timer) {
20
        clearTimeout(timer);
21
        timer = null;
22
      }
23

24
      previous = now;
25
      func.apply(this, args);
26
    }
27
    // 如果需要尾部执行，且还没设置定时器
28
    else if (trailing && !timer) {
29
      timer = setTimeout(() => {
30
        previous = leading ? Date.now() : 0;
31
        timer = null;
32
        func.apply(this, args);
33
      }, remaining);
34
    }
35
  };
36

37
  // 添加 cancel 方法
38
  throttled.cancel = function () {
39
    if (timer) {
40
      clearTimeout(timer);
41
      timer = null;
42
    }
43
    previous = 0;
44
  };
45

46
  return throttled;
47
}

使用示例：

1
// 滚动事件
2
const handleScroll = throttle(() => {
3
  console.log('滚动位置:', window.scrollY);
4
}, 200);
5

6
window.addEventListener('scroll', handleScroll);
7

8
// 不同模式
9
const fn1 = throttle(log, 1000); // 首尾都执行
10
const fn2 = throttle(log, 1000, { trailing: false }); // 只在开始执行
11
const fn3 = throttle(log, 1000, { leading: false }); // 只在结束执行

应用场景：

滚动事件
鼠标移动
窗口 resize
按钮点击

防抖 vs 节流：

特性	防抖	节流
执行时机	停止触发后 n 秒执行	每 n 秒最多执行一次
形象比喻	电梯关门（有人进就重新计时）	技能 CD（冷却时间内无法释放）
典型场景	搜索框输入、窗口 resize	滚动事件、鼠标移动

3. 深拷贝#

题目描述： 实现深拷贝函数，能够正确处理各种数据类型和循环引用。

核心要点：

处理基本类型、对象、数组
处理特殊对象：Date、RegExp、Map、Set
使用 WeakMap 解决循环引用
处理 Symbol 作为 key
处理函数

代码实现：

1
function deepClone(obj, map = new WeakMap()) {
2
  // 基本类型直接返回
3
  if (obj === null || typeof obj !== 'object') {
4
    return obj;
5
  }
6

7
  // 函数直接返回引用
8
  if (typeof obj === 'function') {
9
    return obj;
10
  }
11

12
  // 检查循环引用
13
  if (map.has(obj)) {
14
    return map.get(obj);
15
  }
16

17
  // Date
18
  if (obj instanceof Date) {
19
    return new Date(obj);
20
  }
21

22
  // RegExp
23
  if (obj instanceof RegExp) {
24
    const result = new RegExp(obj.source, obj.flags);
25
    result.lastIndex = obj.lastIndex;
26
    return result;
27
  }
28

29
  // Set
30
  if (obj instanceof Set) {
31
    const newSet = new Set();
32
    map.set(obj, newSet); // 先设置，防止循环引用
33
    obj.forEach((item) => {
34
      newSet.add(deepClone(item, map));
35
    });
36
    return newSet;
37
  }
38

39
  // Map
40
  if (obj instanceof Map) {
41
    const newMap = new Map();
42
    map.set(obj, newMap);
43
    obj.forEach((value, key) => {
44
      newMap.set(deepClone(key, map), deepClone(value, map));
45
    });
46
    return newMap;
47
  }
48

49
  // Array 和 Object
50
  const newObj = Array.isArray(obj) ? [] : {};
51
  map.set(obj, newObj);
52

53
  // 使用 Reflect.ownKeys 同时处理 String 和 Symbol 类型的 key
54
  Reflect.ownKeys(obj).forEach(key => {
55
    newObj[key] = deepClone(obj[key], map);
56
  });
57

58
  return newObj;
59
}

使用示例：

1
// 测试循环引用
2
const obj = { name: 'Alice' };
3
obj.self = obj;
4
const cloned = deepClone(obj);
5
console.log(cloned.self === cloned); // true
6

7
// 测试特殊对象
8
const original = {
9
  date: new Date(),
10
  reg: /test/gi,
11
  set: new Set([1, 2, 3]),
12
  map: new Map([['key', 'value']]),
13
  [Symbol('id')]: 123
14
};
15
const cloned2 = deepClone(original);

关键知识点：

WeakMap 不会阻止垃圾回收
Reflect.ownKeys 可以获取 Symbol 类型的 key
Set/Map 需要先创建并记录映射，再遍历内容

4. 发布订阅模式#

题目描述： 实现 EventEmitter 类，支持事件的发布订阅功能。

核心要点：

on: 订阅事件
emit: 触发事件
off: 取消订阅
once: 一次性订阅
支持链式调用
错误处理

代码实现：

1
class EventEmitter {
2
  constructor() {
3
    this.events = new Map();
4
  }
5

6
  on(event, listener) {
7
    if (!this.events.has(event)) {
8
      this.events.set(event, []);
9
    }
10
    this.events.get(event).push(listener);
11
    return this; // 支持链式调用
12
  }
13

14
  emit(event, ...args) {
15
    if (this.events.has(event)) {
16
      const listeners = this.events.get(event);
17
      // 错误处理：某个监听器出错不影响其他监听器
18
      listeners.forEach((listener) => {
19
        try {
20
          listener(...args);
21
        } catch (error) {
22
          console.error(`Error in listener for event "${event}":`, error);
23
        }
24
      });
25
    }
26
    return this;
27
  }
28

29
  off(event, listener) {
30
    if (this.events.has(event)) {
31
      const listeners = this.events.get(event);
32
      const index = listeners.indexOf(listener);
33
      if (index !== -1) {
34
        listeners.splice(index, 1);
35
      }
36
      // 如果没有监听器了，删除该事件
37
      if (listeners.length === 0) {
38
        this.events.delete(event);
39
      }
40
    }
41
    return this;
42
  }
43

44
  once(event, listener) {
45
    const onceWrapper = (...args) => {
46
      this.off(event, onceWrapper);
47
      listener(...args);
48
    };
49
    this.on(event, onceWrapper);
50
    return this;
51
  }
52

53
  // 取消某个事件的所有监听器，或取消所有事件
54
  allOff(event) {
55
    if (event) {
56
      this.events.delete(event);
57
    } else {
58
      this.events.clear();
59
    }
60
    return this;
61
  }
62
}

使用示例：

1
const emitter = new EventEmitter();
2

3
// 订阅事件
4
emitter.on('login', (username) => {
5
  console.log(`${username} 登录了`);
6
});
7

8
// 链式调用
9
emitter
10
  .on('click', () => console.log('点击1'))
11
  .on('click', () => console.log('点击2'))
12
  .once('load', () => console.log('只执行一次'));
13

14
// 触发事件
15
emitter.emit('login', 'Alice'); // Alice 登录了
16
emitter.emit('click'); // 点击1 点击2
17
emitter.emit('load'); // 只执行一次
18
emitter.emit('load'); // 不输出
19

20
// 取消订阅
21
emitter.allOff('click'); // 删除 click 的所有监听器

5. call、apply、bind#

5.1 Function.prototype.myCall#

题目描述： 实现 call 方法，改变函数的 this 指向并立即执行。

核心要点：

改变 this 指向
立即执行并返回结果
处理 context 为 null/undefined
使用 Symbol 避免属性冲突

代码实现：

1
Function.prototype.myCall = function (context, ...args) {
2
  // 1. 处理 context 为 null 或 undefined
3
  const ctx = context ?? globalThis;
4

5
  // 2. 使用 Symbol 作为属性名，避免冲突和污染
6
  const fn = Symbol('fn');
7
  ctx[fn] = this; // this 就是要执行的函数
8

9
  // 3. 执行函数
10
  const result = ctx[fn](...args);
11

12
  // 4. 删除添加的属性
13
  delete ctx[fn];
14

15
  // 5. 返回执行结果
16
  return result;
17
};

核心原理：

1
// 原理：对象方法调用时，this 指向该对象
2
const obj = { name: 'Alice' };
3
function greet() {
4
  console.log(this.name);
5
}
6

7
// 直接调用：this 是 undefined 或 window
8
greet(); // undefined
9

10
// 作为对象方法调用：this 指向 obj
11
obj.greet = greet;
12
obj.greet(); // 'Alice'

5.2 Function.prototype.myApply#

题目描述： 实现 apply 方法，与 call 类似，但参数以数组形式传入。

代码实现：

1
Function.prototype.myApply = function (context, args = []) {
2
  const ctx = context || globalThis;
3
  const fn = Symbol('fn');
4
  ctx[fn] = this;
5
  const result = ctx[fn](...args); // 展开数组参数
6
  delete ctx[fn];
7
  return result;
8
};

call vs apply：

方法	参数形式	示例
call	逐个传递	`fn.call(obj, 1, 2, 3)`
apply	数组传递	`fn.apply(obj, [1, 2, 3])`

5.3 Function.prototype.myBind#

题目描述： 实现 bind 方法，返回一个绑定了 this 的新函数，支持柯里化和 new 操作符。

核心要点：

返回新函数，不立即执行
支持柯里化（分步传参）
支持 new 操作符
维护原型链

代码实现：

1
Function.prototype.myBind = function (context, ...args) {
2
  const fn = this; // 保存原函数
3

4
  const boundFn = function (...newArgs) {
5
    // 判断是否用 new 调用
6
    // 如果是，this 指向实例，忽略 context
7
    // 如果不是，this 使用传入的 context
8
    return fn.apply(
9
      this instanceof boundFn ? this : context,
10
      [...args, ...newArgs]
11
    );
12
  };
13

14
  // 维护原型链，让 instanceof 正常工作
15
  if (fn.prototype) {
16
    boundFn.prototype = Object.create(fn.prototype);
17
  }
18

19
  return boundFn;
20
};

使用示例：

1
function Person(name, age) {
2
  this.name = name;
3
  this.age = age;
4
}
5

6
const obj = { name: 'Bob' };
7

8
// 普通调用 + 柯里化
9
const boundPerson = Person.myBind(obj, 'Alice');
10
boundPerson(25);
11
console.log(obj.name); // 'Alice'
12

13
// new 调用
14
const BoundPerson = Person.myBind({ ignored: true }, 'Charlie');
15
const p = new BoundPerson(30);
16
console.log(p.name); // 'Charlie'
17
console.log(p instanceof Person); // true

关键知识点：

this instanceof boundFn 判断是否用 new 调用
new 调用时，bind 的 context 会被忽略

6. instanceof 和 new#

6.1 myInstanceof#

题目描述： 实现 instanceof 操作符，判断对象是否是某个构造函数的实例。

核心要点：

沿着原型链查找
处理边界情况
原型链的终点是 null

代码实现：

1
function myInstanceof(obj, construct) {
2
  // 处理基本类型�� null
3
  if (obj === null || typeof obj !== 'object') return false;
4

5
  let proto = Object.getPrototypeOf(obj);
6

7
  while (proto) {
8
    if (proto === construct.prototype) return true;
9
    proto = Object.getPrototypeOf(proto);
10
  }
11

12
  return false;
13
}

原型链示例：

1
function Person() {}
2
const p = new Person();
3

4
// 原型链：
5
// p.__proto__ === Person.prototype
6
// Person.prototype.__proto__ === Object.prototype
7
// Object.prototype.__proto__ === null
8

9
myInstanceof(p, Person);  // true
10
myInstanceof(p, Object);  // true
11
myInstanceof(p, Array);   // false

6.2 myNew#

题目描述： 实现 new 操作符的功能。

核心要点：

创建新对象并设置原型
执行构造函数绑定 this
处理构造函数的返回值
如果返回对象则使用该对象，否则返回新对象

代码实现：

1
function myNew(fn, ...args) {
2
  // 1. 创建新对象，原型指向构造函数的 prototype
3
  const obj = Object.create(fn.prototype);
4

5
  // 2. 执行构造函数，this 绑定到新对象
6
  const result = fn.apply(obj, args);
7

8
  // 3&4. 判断构造函数返回值
9
  return result instanceof Object ? result : obj;
10
}

使用示例：

1
function Person(name, age) {
2
  this.name = name;
3
  this.age = age;
4
}
5

6
Person.prototype.sayHi = function() {
7
  return `Hi, I'm ${this.name}`;
8
};
9

10
const person = myNew(Person, 'Bob', 25);
11
console.log(person.name); // 'Bob'
12
console.log(person.sayHi()); // "Hi, I'm Bob"
13
console.log(person instanceof Person); // true

new 的四个步骤：

创建新对象
设置原型
执行构造函数
返回对象

7. 函数柯里化#

7.1 基础版 curry#

题目描述： 实现函数柯里化，将多参数函数转换为单参数的嵌套函数。

核心要点：

支持多次调用收集参数
参数够了自动执行
递归调用实现无限层嵌套

代码实现：

1
function curry(fn) {
2
  return function curried(...args) {
3
    // 参数够了，执行原函数
4
    if (args.length >= fn.length) {
5
      return fn.apply(this, args);
6
    }
7
    // 参数不够，返回新函数继续收集
8
    return curried.bind(this, ...args);
9
  };
10
}

使用示例：

1
function add(a, b, c) {
2
  return a + b + c;
3
}
4

5
const curriedAdd = curry(add);
6

7
// 多种调用方式
8
console.log(curriedAdd(1)(2)(3));     // 6
9
console.log(curriedAdd(1, 2)(3));     // 6
10
console.log(curriedAdd(1)(2, 3));     // 6
11
console.log(curriedAdd(1, 2, 3));     // 6
12

13
// 柯里化的复用性
14
const add1 = curriedAdd(1);
15
const add1and2 = add1(2);
16
console.log(add1and2(3)); // 6
17
console.log(add1and2(5)); // 8

7.2 带占位符的 curry#

题目描述： 实现支持占位符的柯里化，允许跳过某些参数位置。

核心要点：

使用 Symbol 定义占位符
合并参数时优先填充占位符
完整性判断需检查是否有占位符

代码实现：

1
function curry(fn) {
2
  // 定义占位符
3
  const placeholder = Symbol('placeholder');
4
  curry.placeholder = placeholder;
5

6
  return function curried(...args) {
7
    // 检查参数是否完整
8
    const isComplete = (args) => {
9
      return args.length >= fn.length &&
10
             !args.slice(0, fn.length).includes(placeholder);
11
    };
12

13
    // 合并参数：新参数填充旧参数中的占位符
14
    const mergeArgs = (oldArgs, newArgs) => {
15
      const result = [...oldArgs];
16
      let newArgIndex = 0;
17

18
      // 遍历旧参数，用新参数替换占位符
19
      for (let i = 0; i < result.length; i++) {
20
        if (result[i] === placeholder && newArgIndex < newArgs.length) {
21
          result[i] = newArgs[newArgIndex++];
22
        }
23
      }
24

25
      // 剩余的新参数追加到末尾
26
      while (newArgIndex < newArgs.length) {
27
        result.push(newArgs[newArgIndex++]);
28
      }
29

30
      return result;
31
    };
32

33
    // 参数完整，执行原函数
34
    if (isComplete(args)) {
35
      return fn.apply(this, args);
36
    }
37

38
    // 参数不完整，返回新函数继续收集
39
    return function (...newArgs) {
40
      const mergedArgs = mergeArgs(args, newArgs);
41
      return curried.apply(this, mergedArgs);
42
    };
43
  };
44
}

使用示例：

1
function test(a, b, c, d) {
2
  return `${a}-${b}-${c}-${d}`;
3
}
4

5
const curriedTest = curry(test);
6
const _ = curry.placeholder;
7

8
// 占位符在开头
9
console.log(curriedTest(_, 2, 3, 4)(1)); // "1-2-3-4"
10

11
// 占位符在中间
12
console.log(curriedTest(1, _, 3, 4)(2)); // "1-2-3-4"
13

14
// 多个占位符
15
console.log(curriedTest(_, 2, _, 4)(1, 3)); // "1-2-3-4"
16

17
// 分步填充
18
console.log(curriedTest(_, _, _, 4)(1)(2, 3)); // "1-2-3-4"

应用场景：

1
// HTTP 请求封装
2
const request = curry((method, url, headers, data) => {
3
  return fetch(url, { method, headers, body: JSON.stringify(data) });
4
});
5

6
const _ = curry.placeholder;
7
const apiCall = request(_, '/api/users', { 'Content-Type': 'application/json' });
8

9
const getUsers = apiCall('GET', null);
10
const createUser = apiCall('POST', { name: 'Alice' });

8. 异步任务调度器#

题目描述： 实现一个 Scheduler 类，控制异步任务的并发执行数量。

核心要点：

维护当前执行任务计数
超过限制时加入队列等待
任务完成后自动执行下一个
返回 Promise 支持异步结果

代码实现：

1
class Scheduler {
2
  constructor(max) {
3
    this.max = max;       // 最大并发数
4
    this.count = 0;       // 当前执行任务数
5
    this.queue = [];      // 等待队列
6
  }
7

8
  async add(promiseCreator) {
9
    // 如果当前执行数量超过限制，加入队列等待
10
    if (this.count >= this.max) {
11
      await new Promise((resolve) => {
12
        this.queue.push(resolve);
13
      });
14
    }
15

16
    // 执行任务
17
    this.count++;
18
    try {
19
      const result = await promiseCreator();
20
      return result;
21
    } finally {
22
      this.count--;
23
      // 执行队列中的下一个任务
24
      if (this.queue.length > 0) {
25
        const resolve = this.queue.shift();
26
        resolve();
27
      }
28
    }
29
  }
30
}

使用示例：

1
const scheduler = new Scheduler(2); // 最多同时执行 2 个任务
2

3
const timeout = (time) => new Promise((resolve) => setTimeout(resolve, time));
4

5
const addTask = (time, order) => {
6
  scheduler.add(() => timeout(time).then(() => console.log(order)));
7
};
8

9
addTask(1000, '1');
10
addTask(500, '2');
11
addTask(300, '3');
12
addTask(400, '4');
13

14
// 输出顺序：
15
// 500ms  后输出: 2
16
// 800ms  后输出: 3
17
// 1000ms 后输出: 1
18
// 1200ms 后输出: 4

执行时间线：

1
时间轴:  0ms   500ms   800ms   1000ms  1200ms
2
任务1:   |----------1-----------|
3
任务2:   |----2----|
4
任务3:            |--3--|
5
任务4:                      |---4---|
6
         ↑        ↑     ↑    ↑      ↑
7
并发数:   2        1     2    1      0

应用场景：

控制 HTTP 请求并发数
限制文件上传/下载的并发数
爬虫并发控制
图片懒加载

9. LRU 缓存#

题目描述： 实现 LRU（Least Recently Used）缓存淘汰算法。

核心要点：

使用 Map 保持插入顺序
get 时更新访问顺序（删除再插入）
put 时检查容量，满了删除最久未使用的
Map 的第一个元素是最久未使用的

代码实现：

1
class LRUCache {
2
  constructor(capacity) {
3
    this.capacity = capacity;
4
    this.cache = new Map();
5
  }
6

7
  get(key) {
8
    if (!this.cache.has(key)) {
9
      return -1;
10
    }
11
    // 更新访问顺序：删除后重新插入
12
    const value = this.cache.get(key);
13
    this.cache.delete(key);
14
    this.cache.set(key, value);
15
    return value;
16
  }
17

18
  put(key, value) {
19
    // 如果 key 存在，先删除
20
    if (this.cache.has(key)) {
21
      this.cache.delete(key);
22
    }
23
    // 如果已满，删除最久未使用的（第一个）
24
    else if (this.cache.size >= this.capacity) {
25
      const firstKey = this.cache.keys().next().value;
26
      this.cache.delete(firstKey);
27
    }
28
    // 插入新数据
29
    this.cache.set(key, value);
30
  }
31
}

使用示例：

1
const lruCache = new LRUCache(2);
2

3
lruCache.put(1, 1); // cache: {1=1}
4
lruCache.put(2, 2); // cache: {1=1, 2=2}
5
console.log(lruCache.get(1)); // 返回 1, cache: {2=2, 1=1}
6
lruCache.put(3, 3); // 淘汰 key 2, cache: {1=1, 3=3}
7
console.log(lruCache.get(2)); // 返回 -1 (未找到)
8
lruCache.put(4, 4); // 淘汰 key 1, cache: {3=3, 4=4}
9
console.log(lruCache.get(1)); // 返回 -1 (未找到)
10
console.log(lruCache.get(3)); // 返回 3
11
console.log(lruCache.get(4)); // 返回 4

核心原理：

Map 会记住键的插入顺序
删除后重新插入，相当于把元素移到最后
第一个元素永远是最久未使用的

总结#

本文整理了前端面试中最常见的手写题，涵盖了：

异步编程：Promise.all、Promise.race、异步调度器
性能优化：防抖、节流
数据处理：深拷贝、LRU 缓存
设计模式：发布订阅模式
函数式编程：柯里化
原型链相关：call/apply/bind、instanceof、new

这些题目不仅考察代码实现能力，更重要的是理解背后的原理和应用场景。建议在掌握实现的同时，深入理解：

原理：为什么要这样实现？
场景：什么时候用？
优化：有什么改进空间？
扩展：还有哪些相关知识点？

希望这份总结能帮助你在面试中更有信心！