1
// 基础版
2
function debounce(fn, delay = 300) {
3
  let timer = null;
4
  return function (...args) {
5
    clearTimeout(timer);                        // 每次触发都重置计时
6
    timer = setTimeout(() => fn.apply(this, args), delay);
7
  };
8
}
9

10
// 进阶版：立即执行 + 可取消（面试加分项）
11
function debounce(fn, delay = 300, immediate = false) {
12
  let timer = null;
13
  function debounced(...args) {
14
    if (timer) clearTimeout(timer);
15
    if (immediate && !timer) {
16
      fn.apply(this, args);                     // 首次立即执行
17
      timer = setTimeout(() => { timer = null; }, delay);
18
    } else {
19
      timer = setTimeout(() => fn.apply(this, args), delay);
20
    }
21
  }
22
  debounced.cancel = () => {                    // 组件卸载时可取消
23
    clearTimeout(timer);
24
    timer = null;
25
  };
26
  return debounced;
27
}

1
// 时间戳版（首次立即执行）
2
function throttle(fn, interval = 200) {
3
  let last = 0;
4
  return function (...args) {
5
    const now = Date.now();
6
    if (now - last >= interval) {
7
      last = now;
8
      fn.apply(this, args);
9
    }
10
  };
11
}
12

13
// 定时器版（停止触发后还会执行最后一次）
14
function throttle2(fn, interval = 200) {
15
  let timer = null;
16
  return function (...args) {
17
    if (timer) return;
18
    timer = setTimeout(() => {
19
      timer = null;
20
      fn.apply(this, args);
21
    }, interval);
22
  };
23
}

1
// call：把函数挂到目标对象上调用，this 即目标对象
2
Function.prototype.myCall = function (ctx, ...args) {
3
  if (typeof this !== 'function') throw new TypeError('not a function');
4
  ctx = ctx == null ? globalThis : Object(ctx);
5
  const key = Symbol('fn');           // 避免覆盖已有属性
6
  ctx[key] = this;
7
  const result = ctx[key](...args);
8
  delete ctx[key];
9
  return result;
10
};
11

12
// apply：同 call，参数是数组
13
Function.prototype.myApply = function (ctx, args = []) {
14
  ctx = ctx == null ? globalThis : Object(ctx);
15
  const key = Symbol('fn');
16
  ctx[key] = this;
17
  const result = ctx[key](...args);
18
  delete ctx[key];
19
  return result;
20
};
21

22
// bind：返回新函数，this 永久绑定；支持柯里化传参、new 调用
23
Function.prototype.myBind = function (ctx, ...preArgs) {
24
  const fn = this;
25
  function bound(...args) {
26
    // new bound() 时 this 是新实例，忽略 ctx
27
    return fn.apply(this instanceof bound ? this : ctx, [...preArgs, ...args]);
28
  }
29
  // 维护原型链：new bound() 的实例能访问原函数原型上的属性
30
  if (fn.prototype) {
31
    bound.prototype = Object.create(fn.prototype);
32
  }
33
  return bound;
34
};

1
function myNew(Constructor, ...args) {
2
  // 1. 创建空对象，原型指向构造函数的 prototype
3
  const obj = Object.create(Constructor.prototype);
4
  // 2. 执行构造函数，绑定 this
5
  const result = Constructor.apply(obj, args);
6
  // 3. 构造函数返回对象则用它，否则返回新对象
7
  return result instanceof Object ? result : obj;
8
}
9

10
// 验证
11
function Person(name) { this.name = name; }
12
Person.prototype.say = function () { console.log(this.name); };
13
const p = myNew(Person, 'Tom');
14
p.say();  // Tom

1
function myInstanceof(obj, Constructor) {
2
  if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
3
    return false;                          // 基本类型直接 false
4
  }
5
  let proto = Object.getPrototypeOf(obj);
6
  const prototype = Constructor.prototype;
7
  while (proto !== null) {
8
    if (proto === prototype) return true;
9
    proto = Object.getPrototypeOf(proto);  // 沿原型链向上
10
  }
11
  return false;
12
}
13

14
myInstanceof([], Array);    // true
15
myInstanceof([], Object);   // true
16
myInstanceof('str', String); // false（基本类型）

1
// 参数够了就执行，不够就继续收集
2
function curry(fn) {
3
  return function curried(...args) {
4
    if (args.length >= fn.length) {        // fn.length = 形参个数
5
      return fn.apply(this, args);
6
    }
7
    return (...args2) => curried.apply(this, [...args, ...args2]);
8
  };
9
}
10

11
function add(a, b, c) { return a + b + c; }
12
const curriedAdd = curry(add);
13
curriedAdd(1)(2)(3);     // 6
14
curriedAdd(1, 2)(3);     // 6
15
curriedAdd(1)(2, 3);     // 6
16

17
// 变体题：无限参数累加 add(1)(2)(3)() === 6 / add(1,2)(3) === 6
18
function addChain(...args) {
19
  const nums = [...args];
20
  const fn = (...more) => {
21
    if (more.length === 0) return nums.reduce((a, b) => a + b, 0);
22
    nums.push(...more);
23
    return fn;
24
  };
25
  return fn;
26
}

1
function deepClone(target, map = new WeakMap()) {
2
  // 基本类型和函数直接返回
3
  if (target === null || typeof target !== 'object') return target;
4
  // 特殊内置对象
5
  if (target instanceof Date) return new Date(target);
6
  if (target instanceof RegExp) return new RegExp(target.source, target.flags);
7
  // 循环引用：拷贝过的直接返回缓存
8
  if (map.has(target)) return map.get(target);
9

10
  const result = Array.isArray(target) ? [] : {};
11
  map.set(target, result);                 // 先缓存再递归，解决循环引用
12

13
  for (const key of Reflect.ownKeys(target)) {   // 包含 Symbol 键
14
    result[key] = deepClone(target[key], map);
15
  }
16
  return result;
17
}
18

19
// 验证循环引用
20
const obj = { name: 'a' };
21
obj.self = obj;
22
const copy = deepClone(obj);
23
console.log(copy.self === copy);  // true，且不栈溢出

1
// 1. 递归 + reduce
2
function flat(arr, depth = Infinity) {
3
  return arr.reduce((acc, cur) => {
4
    if (Array.isArray(cur) && depth > 0) {
5
      acc.push(...flat(cur, depth - 1));
6
    } else {
7
      acc.push(cur);
8
    }
9
    return acc;
10
  }, []);
11
}
12

13
// 2. 完全扁平化简洁版
14
const flatAll = arr => arr.reduce(
15
  (acc, cur) => acc.concat(Array.isArray(cur) ? flatAll(cur) : cur), []
16
);
17

18
// 3. 迭代版（不用递归，避免栈溢出）
19
function flatIterative(arr) {
20
  const stack = [...arr];
21
  const result = [];
22
  while (stack.length) {
23
    const item = stack.pop();
24
    Array.isArray(item) ? stack.push(...item) : result.unshift(item);
25
  }
26
  return result;
27
}
28

29
// 4. 一行版（了解即可）
30
const flatOneLine = arr => arr.flat(Infinity);
31
const flatToString = arr => arr.toString().split(',').map(Number); // 仅纯数字数组
32

33
flatAll([1, [2, [3, [4]]]]);  // [1, 2, 3, 4]

1
// 1. Set（最简洁，NaN 也能去重）
2
const unique1 = arr => [...new Set(arr)];
3

4
// 2. filter + indexOf
5
const unique2 = arr => arr.filter((item, i) => arr.indexOf(item) === i);
6

7
// 3. 对象数组按 key 去重（实战常见）
8
function uniqueBy(arr, key) {
9
  const seen = new Map();
10
  return arr.filter(item => !seen.has(item[key]) && seen.set(item[key], true));
11
}
12
uniqueBy([{ id: 1 }, { id: 2 }, { id: 1 }], 'id');  // [{id:1},{id:2}]

1
// 浅拷贝的常见实现（对比记忆）
2
const shallowClone = obj => ({ ...obj });
3
const shallowClone2 = obj => Object.assign({}, obj);
4

5
// 深合并（deepMerge，配置合并场景）
6
function deepMerge(target, source) {
7
  const result = { ...target };
8
  for (const key of Object.keys(source)) {
9
    const t = target[key], s = source[key];
10
    const bothObj = v => v !== null && typeof v === 'object' && !Array.isArray(v);
11
    result[key] = bothObj(t) && bothObj(s) ? deepMerge(t, s) : s;
12
  }
13
  return result;
14
}
15
deepMerge({ a: 1, b: { x: 1 } }, { b: { y: 2 } });
16
// { a: 1, b: { x: 1, y: 2 } }

1
function promiseAll(promises) {
2
  return new Promise((resolve, reject) => {
3
    const results = [];
4
    let count = 0;
5
    const list = Array.from(promises);     // 支持可迭代对象
6
    if (list.length === 0) return resolve([]);
7

8
    list.forEach((p, i) => {
9
      // Promise.resolve 包装：兼容非 Promise 值
10
      Promise.resolve(p).then(
11
        value => {
12
          results[i] = value;              // 按索引存，保证顺序
13
          if (++count === list.length) resolve(results);  // 全部完成才 resolve
14
        },
15
        reject                             // 任意一个失败立即 reject
16
      );
17
    });
18
  });
19
}
20

21
// 验证
22
promiseAll([Promise.resolve(1), 2, Promise.resolve(3)])
23
  .then(console.log);  // [1, 2, 3]
24
promiseAll([Promise.resolve(1), Promise.reject('err')])
25
  .catch(console.log);  // 'err'

1
// race：第一个完成（无论成败）决定结果
2
function promiseRace(promises) {
3
  return new Promise((resolve, reject) => {
4
    for (const p of promises) {
5
      Promise.resolve(p).then(resolve, reject);  // 谁先谁赢
6
    }
7
  });
8
}
9

10
// allSettled：全部结束，返回每项状态
11
function promiseAllSettled(promises) {
12
  return promiseAll(
13
    Array.from(promises).map(p =>
14
      Promise.resolve(p)
15
        .then(value => ({ status: 'fulfilled', value }))
16
        .catch(reason => ({ status: 'rejected', reason }))
17
    )
18
  );
19
}
20

21
// any：第一个成功决定结果；全失败才失败（AggregateError）
22
function promiseAny(promises) {
23
  return new Promise((resolve, reject) => {
24
    const errors = [];
25
    let count = 0;
26
    const list = Array.from(promises);
27
    list.forEach((p, i) => {
28
      Promise.resolve(p).then(resolve, err => {
29
        errors[i] = err;
30
        if (++count === list.length) {
31
          reject(new AggregateError(errors, 'All promises were rejected'));
32
        }
33
      });
34
    });
35
  });
36
}

1
class MyPromise {
2
  constructor(executor) {
3
    this.state = 'pending';
4
    this.value = undefined;
5
    this.callbacks = [];                    // pending 期间收集的回调
6

7
    const resolve = value => this.#settle('fulfilled', value);
8
    const reject = reason => this.#settle('rejected', reason);
9
    try { executor(resolve, reject); } catch (e) { reject(e); }
10
  }
11

12
  #settle(state, value) {
13
    if (this.state !== 'pending') return;   // 状态不可逆
14
    this.state = state;
15
    this.value = value;
16
    this.callbacks.forEach(cb => cb());     // 异步触发已收集回调
17
  }
18

19
  then(onFulfilled, onRejected) {
20
    // 穿透处理：then() 不传参时值要能传递下去
21
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
22
    onRejected = typeof onRejected === 'function' ? onRejected : e => { throw e; };
23

24
    const promise2 = new MyPromise((resolve, reject) => {
25
      const handle = () => {
26
        // 用宏任务模拟微任务，保证异步调用
27
        setTimeout(() => {
28
          try {
29
            if (this.state === 'fulfilled') {
30
              const x = onFulfilled(this.value);
31
              resolvePromise(promise2, x, resolve, reject);
32
            } else {
33
              const x = onRejected(this.value);
34
              resolvePromise(promise2, x, resolve, reject);
35
            }
36
          } catch (e) { reject(e); }
37
        }, 0);
38
      };
39
      this.state === 'pending' ? this.callbacks.push(handle) : handle();
40
    });
41
    return promise2;                        // 返回新 Promise 支持链式调用
42
  }
43

44
  catch(onRejected) { return this.then(null, onRejected); }
45
}
46

47
// A+ 核心：解析 then 回调的返回值
48
function resolvePromise(promise2, x, resolve, reject) {
49
  if (promise2 === x) {
50
    return reject(new TypeError('Chaining cycle detected'));
51
  }
52
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
53
    let called = false;
54
    try {
55
      const then = x.then;
56
      if (typeof then === 'function') {
57
        then.call(x,
58
          y => { if (!called) { called = true; resolvePromise(promise2, y, resolve, reject); } },
59
          r => { if (!called) { called = true; reject(r); } }
60
        );
61
      } else { resolve(x); }
62
    } catch (e) {
63
      if (!called) { called = true; reject(e); }
64
    }
65
  } else { resolve(x); }                    // 普通值直接 resolve
66
}

1
// async 语法糖 = 生成器 + 自动执行器
2
function run(generatorFn) {
3
  return new Promise((resolve, reject) => {
4
    const gen = generatorFn();
5
    function step(nextFn) {
6
      let result;
7
      try {
8
        result = nextFn();
9
      } catch (e) {
10
        return reject(e);                   // 生成器内抛错 → reject
11
      }
12
      if (result.done) return resolve(result.value);
13
      // yield 的值包装成 Promise，then 里递归驱动下一步
14
      Promise.resolve(result.value).then(
15
        v => step(() => gen.next(v)),       // 成功值送回生成器
16
        e => step(() => gen.throw(e))       // 错误抛回生成器（可被 try/catch 捕获）
17
      );
18
    }
19
    step(() => gen.next());
20
  });
21
}
22

23
// 使用（等价于 async/await）
24
const fetchUser = run(function* () {
25
  const res = yield fetch('/api/user');
26
  const data = yield res.json();
27
  return data;
28
});

1
// 经典题：最多同时执行 limit 个异步任务
2
function asyncPool(limit, tasks) {
3
  return new Promise((resolve, reject) => {
4
    const results = [];
5
    const executing = new Set();            // 正在执行的 Promise 集合
6
    let index = 0;
7

8
    async function runNext() {
9
      if (index >= tasks.length) {
10
        // 全部派发完，等待剩余任务结束
11
        await Promise.all(executing);
12
        return resolve(results);
13
      }
14
      const i = index++;
15
      const task = Promise.resolve()
16
        .then(() => tasks[i]())             // tasks[i] 是返回 Promise 的函数
17
        .then(
18
          v => { results[i] = v; },
19
          e => { results[i] = e; }          // 单个失败不中断（可改为 reject）
20
        );
21
      executing.add(task);
22
      task.then(() => executing.delete(task));
23

24
      if (executing.size >= limit) {
25
        await Promise.race(executing);      // 满了就等最快的一个腾出位置
26
      }
27
      runNext();                            // 递归派发下一个
28
    }
29
    runNext();
30
  });
31
}
32

33
// 使用
34
const tasks = urls.map(url => () => fetch(url).then(r => r.json()));
35
const results = await asyncPool(3, tasks);  // 最多 3 个并发
36

37
// 追问：为什么用 Promise.race 而不是 Promise.all？
38
// race 等"最快的一个"完成就继续派发，保持并发池满载；
39
// all 要等全部完成，并发度会塌缩。

1
// sleep
2
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
3

4
// 超时控制（Promise.race 实战）
5
function withTimeout(promise, ms) {
6
  return Promise.race([
7
    promise,
8
    sleep(ms).then(() => Promise.reject(new Error('timeout'))),
9
  ]);
10
}
11
withTimeout(fetch('/api/slow'), 3000);
12

13
// 请求重试（指数退避）
14
async function retry(fn, times = 3, delay = 1000) {
15
  for (let i = 0; i < times; i++) {
16
    try {
17
      return await fn();
18
    } catch (e) {
19
      if (i === times - 1) throw e;         // 最后一次仍失败 → 抛出
20
      await sleep(delay * Math.pow(2, i));  // 1s → 2s → 4s
21
    }
22
  }
23
}
24
retry(() => fetch('/api/unstable').then(r => {
25
  if (!r.ok) throw new Error(r.status);
26
  return r.json();
27
}), 3);

1
class EventEmitter {
2
  constructor() {
3
    this.events = new Map();                // eventName → Set<callback>
4
  }
5

6
  on(name, fn) {
7
    if (!this.events.has(name)) this.events.set(name, new Set());
8
    this.events.get(name).add(fn);
9
    return this;                            // 支持链式调用
10
  }
11

12
  off(name, fn) {
13
    const set = this.events.get(name);
14
    if (set) {
15
      set.delete(fn);
16
      if (set.size === 0) this.events.delete(name);
17
    }
18
    return this;
19
  }
20

21
  once(name, fn) {
22
    const wrapper = (...args) => {
23
      fn.apply(this, args);
24
      this.off(name, wrapper);              // 执行后自动移除
25
    };
26
    this.on(name, wrapper);
27
    return this;
28
  }
29

30
  emit(name, ...args) {
31
    this.events.get(name)?.forEach(fn => fn.apply(this, args));
32
    return this;
33
  }
34
}
35

36
// 使用
37
const bus = new EventEmitter();
38
const handler = data => console.log('got:', data);
39
bus.on('msg', handler);
40
bus.once('login', u => console.log('welcome', u));
41
bus.emit('msg', 'hello');   // got: hello
42
bus.emit('login', 'Tom');   // welcome Tom
43
bus.emit('login', 'Tom');   // 无输出（once 已移除）
44
bus.off('msg', handler);

1
// 图片懒加载封装（实战常用）
2
class LazyLoad {
3
  constructor(selector = 'img[data-src]', options = {}) {
4
    this.observer = new IntersectionObserver(entries => {
5
      entries.forEach(entry => {
6
        if (!entry.isIntersecting) return;
7
        const img = entry.target;
8
        img.src = img.dataset.src;
9
        img.onload = img.onerror = () => this.observer.unobserve(img);
10
      });
11
    }, {
12
      rootMargin: options.rootMargin || '200px',  // 提前 200px 加载
13
      threshold: 0,
14
    });
15
    document.querySelectorAll(selector).forEach(el => this.observer.observe(el));
16
  }
17

18
  destroy() { this.observer.disconnect(); }
19
}
20

21
new LazyLoad();  // 自动接管页面所有 img[data-src]
22

23
// 追问：为什么不用 scroll 事件 + getBoundingClientRect？
24
// scroll 高频触发性能差，getBoundingClientRect 强制同步布局；
25
// IntersectionObserver 由浏览器异步计算，不阻塞主线程。