前端面试手写核心 Cheat Sheet（终极精简版）

摸鱼仙人~2026-03-14 12:59

背会这一页，面试手写题直接稳过！

1. 防抖 & 节流

防抖（debounce）

场景：搜索输入、窗口 resize、按钮防重复点击
核心：频繁触发 → 只执行最后一次

js 复制代码

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

节流（throttle）

场景：滚动加载、高频点击、鼠标移动
核心：频繁触发 → 每隔一段时间执行一次

js 复制代码

function throttle(fn, delay) {
  let lastTime = 0
  return function (...args) {
    const now = Date.now()
    if (now - lastTime >= delay) {
      fn.apply(this, args)
      lastTime = now
    }
  }
}

2. 数组去重

js 复制代码

function unique(arr) {
  return [...new Set(arr)]
}

3. call / apply / bind

myCall

js 复制代码

Function.prototype.myCall = function (context, ...args) {
  context = context || window
  const fn = Symbol()
  context[fn] = this
  const result = context[fn](...args)
  delete context[fn]
  return result
}

myApply

js 复制代码

Function.prototype.myApply = function (context, args) {
  context = context || window
  args = args || []
  const fn = Symbol()
  context[fn] = this
  const result = context[fn](...args)
  delete context[fn]
  return result
}

myBind

js 复制代码

Function.prototype.myBind = function (context) {
  const self = this
  return function (...args) {
    return self.apply(context || window, args)
  }
}

4. 深拷贝（含循环引用）

js 复制代码

function deepClone(obj, map = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj
  }
  if (map.has(obj)) return map.get(obj)

  const clone = Array.isArray(obj) ? [] : {}
  map.set(obj, clone)

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], map)
    }
  }
  return clone
}

5. this 指向口诀

obj.fun() → this = obj
fun() → this = window / undefined
call / apply / bind → 手动指定 this
new → this = 新创建的对象

6. 场景速查

搜索输入联想 → 防抖
滚动加载更多 → 节流
按钮防重复点击 → 防抖
拷贝多层对象 → 深拷贝