1. 防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

  1. function debounce(func, ms = 1000) {
  2.   let timer;
  3.   return function (...args) {
  4.     if (timer) {
  5.       clearTimeout(timer)
  6.     }
  7.     timer = setTimeout(() => {
  8.       func.apply(this, args)
  9.     }, ms)
  10.   }
  11. }
  13. // 测试
  14. const task = () => { console.log('run task') }
  15. const debounceTask = debounce(task, 1000)
  16. window.addEventListener('scroll', debounceTask)

2. 节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

  1. function throttle(func, ms = 1000) {
  2.   let canRun = true
  3.   return function (...args) {
  4.     if (!canRun) return
  5.     canRun = false
  6.     setTimeout(() => {
  7.       func.apply(this, args)
  8.       canRun = true
  9.     }, ms)
  10.   }
  11. }
  13. // 测试
  14. const task = () => { console.log('run task') }
  15. const throttleTask = throttle(task, 1000)
  16. window.addEventListener('scroll', throttleTask)

3. new

  1. function myNew(Func, ...args) {
  2.   // 生成一个新的对象
  3.   const instance = {};
  4.   if (Func.prototype) {
  5.     Object.setPrototypeOf(instance, Func.prototype)
  6.   }
  7.   const res = Func.apply(instance, args)
  8.   if (typeof res === "function" || (typeof res === "object" && res !== null)) {
  9.     return res
  10.   }
  11.   return instance
  12. }
  14. // 测试
  15. function Person(name) {
  16.   this.name = name
  17. }
  18. Person.prototype.sayName = function() {
  19.   console.log(`My name is ${this.name}`)
  20. }
  21. const me = myNew(Person, 'Jack')
  22. me.sayName()
  23. console.log(me)

4. bind

  1. Function.prototype.myBind = function (context = globalThis) {
  2.   const fn = this
  3.   const args = Array.from(arguments).slice(1)
  4.   const newFunc = function () {
  5.     const newArgs = args.concat(...arguments)
  6.     if (this instanceof newFunc) {
  7.       // 通过 new 调用，绑定 this 为实例对象
  8.       fn.apply(this, newArgs)
  9.     } else {
  10.       // 通过普通函数形式调用，绑定 context
  11.       fn.apply(context, newArgs)
  12.     }
  13.   }
  14.   // 支持 new 调用方式
  15.   newFunc.prototype = Object.create(fn.prototype)
  16.   return newFunc
  17. }
  19. // 测试
  20. const me = { name: 'Jack' }
  21. const other = { name: 'Jackson' }
  22. function say() {
  23.   console.log(`My name is ${this.name || 'default'}`);
  24. }
  25. const meSay = say.myBind(me)
  26. meSay()
  27. const otherSay = say.myBind(other)
  28. otherSay()

5. call

  1. Function.prototype.myCall = function (context = globalThis) {
  2.   // 关键步骤，在 context 上调用方法，触发 this 绑定为 context，使用 Symbol 防止原有属性的覆盖
  3.   const key = Symbol('key')
  4.   context[key] = this
  5.   // es5 可通过 for 遍历 arguments 得到参数数组
  6.   const args = [...arguments].slice(1)
  7.   const res = context[key](...args)
  8.   delete context[key]
  9.   return res
  10. };
  12. // 测试
  13. const me = { name: 'Jack' }
  14. function say() {
  15.   console.log(`My name is ${this.name || 'default'}`);
  16. }
  17. say.myCall(me)

6. apply

  1. Function.prototype.myApply = function (context = globalThis) {
  2.   // 关键步骤，在 context 上调用方法，触发 this 绑定为 context，使用 Symbol 防止原有属性的覆盖
  3.   const key = Symbol('key')
  4.   context[key] = this
  5.   let res
  6.   if (arguments[1]) {
  7.     res = context[key](...arguments[1])
  8.   } else {
  9.     res = context[key]()
  10.   }
  11.   delete context[key]
  12.   return res
  13. }
  15. // 测试
  16. const me = { name: 'Jack' }
  17. function say() {
  18.   console.log(`My name is ${this.name || 'default'}`);
  19. }
  20. say.myApply(me)

7. deepCopy

  1. function deepCopy(obj, cache = new WeakMap()) {
  2.   if (!obj instanceof Object) return obj
  3.   // 防止循环引用
  4.   if (cache.get(obj)) return cache.get(obj)
  5.   // 支持函数
  6.   if (obj instanceof Function) {
  7.     return function () {
  8.       return obj.apply(this, arguments)
  9.     }
  10.   }
  11.   // 支持日期
  12.   if (obj instanceof Date) return new Date(obj)
  13.   // 支持正则对象
  14.   if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
  15.   // 还可以增加其他对象，比如：Map, Set等，根据情况判断增加即可，面试点到为止就可以了
  17.   // 数组是 key 为数字素银的特殊对象
  18.   const res = Array.isArray(obj) ? [] : {}
  19.   // 缓存 copy 的对象，用于处理循环引用的情况
  20.   cache.set(obj, res)
  22.   // Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
  23.   Object.keys(obj).forEach((key) => {
  24.     if (obj[key] instanceof Object) {
  25.       res[key] = deepCopy(obj[key], cache)
  26.     } else {
  27.       res[key] = obj[key]
  28.     }
  29.   });
  30.   return res
  31. }
  33. // 测试
  34. const source = {
  35.   name: 'Jack',
  36.   meta: {
  37.     age: 12,
  38.     birth: new Date('1997-10-10'),
  39.     ary: [1, 2, { a: 1 }],
  40.     say() {
  41.       console.log('Hello');
  42.     }
  43.   }
  44. }
  45. source.source = source
  46. const newObj = deepCopy(source)
  47. console.log(newObj.meta.ary[2] === source.meta.ary[2]); // false
  48. console.log(newObj.meta.birth === source.meta.birth); // false

8. 事件总线 | 发布订阅模式

  1. // 8. 事件总线 | 发布订阅模式
  2. class EventEmitter {
  3.   constructor() {
  4.     this.cache = {}
  5.   }
  7.   on(name, fn) {
  8.     if (this.cache[name]) {
  9.       this.cache[name].push(fn)
  10.     } else {
  11.       this.cache[name] = [fn]
  12.     }
  13.   }
  15.   off(name, fn) {
  16.     const tasks = this.cache[name]
  17.     if (tasks) {
  18.       const index = tasks.findIndex((f) => f === fn || f.callback === fn)
  19.       if (index >= 0) {
  20.         tasks.splice(index, 1)
  21.       }
  22.     }
  23.   }
  25.   emit(name) {
  26.     if (this.cache[name]) {
  27.       // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
  28.       const tasks = this.cache[name].slice()
  29.       for (let fn of tasks) {
  30.         fn();
  31.       }
  32.     }
  33.   }
  35.   emit(name, once = false) {
  36.     if (this.cache[name]) {
  37.       // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
  38.       const tasks = this.cache[name].slice()
  39.       for (let fn of tasks) {
  40.         fn();
  41.       }
  42.       if (once) {
  43.         delete this.cache[name]
  44.       }
  45.     }
  46.   }
  47. }
  49. // 测试
  50. const eventBus = new EventEmitter()
  51. const task1 = () => { console.log('task1'); }
  52. const task2 = () => { console.log('task2'); }
  53. eventBus.on('task', task1)
  54. eventBus.on('task', task2)
  56. setTimeout(() => {
  57.   eventBus.emit('task')
  58. }, 1000)

9. 柯里化：只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数

  1. function curry(func) {
  2.   return function curried(...args) {
  3.     // 关键知识点：function.length 用来获取函数的形参个数
  4.     // 补充：arguments.length 获取的是实参个数
  5.     if (args.length >= func.length) {
  6.       return func.apply(this, args)
  7.     }
  8.     return function (...args2) {
  9.       return curried.apply(this, args.concat(args2))
  10.     }
  11.   }
  12. }
  14. // 测试
  15. function sum (a, b, c) {
  16.   return a + b + c
  17. }
  18. const curriedSum = curry(sum)
  19. console.log(curriedSum(1, 2, 3))
  20. console.log(curriedSum(1)(2,3))
  21. console.log(curriedSum(1)(2)(3))

11. instanceof

  1. function isInstanceOf(instance, klass) {
  2.   let proto = instance.__proto__
  3.   let prototype = klass.prototype
  4.   while (true) {
  5.     if (proto === null) return false
  6.     if (proto === prototype) return true
  7.     proto = proto.__proto__
  8.   }
  9. }
  11. // 测试
  12. class Parent {}
  13. class Child extends Parent {}
  14. const child = new Child()
  15. console.log(isInstanceOf(child, Parent), isInstanceOf(child, Child), isInstanceOf(child, Array));

12. 异步并发数限制

  1. /**
  2.  * 关键点
  3.  * 1. new promise 一经创建，立即执行
  4.  * 2. 使用 Promise.resolve().then 可以把任务加到微任务队列，防止立即执行迭代方法
  5.  * 3. 微任务处理过程中，产生的新的微任务，会在同一事件循环内，追加到微任务队列里
  6.  * 4. 使用 race 在某个任务完成时，继续添加任务，保持任务按照最大并发数进行执行
  7.  * 5. 任务完成后，需要从 doingTasks 中移出
  8.  */
  9. function limit(count, array, iterateFunc) {
  10.   const tasks = []
  11.   const doingTasks = []
  12.   let i = 0
  13.   const enqueue = () => {
  14.     if (i === array.length) {
  15.       return Promise.resolve()
  16.     }
  17.     const task = Promise.resolve().then(() => iterateFunc(array[i++]))
  18.     tasks.push(task)
  19.     const doing = task.then(() => doingTasks.splice(doingTasks.indexOf(doing), 1))
  20.     doingTasks.push(doing)
  21.     const res = doingTasks.length >= count ? Promise.race(doingTasks) : Promise.resolve()
  22.     return res.then(enqueue)
  23.   };
  24.   return enqueue().then(() => Promise.all(tasks))
  25. }
  27. // test
  28. const timeout = i => new Promise(resolve => setTimeout(() => resolve(i), i))
  29. limit(2, [1000, 1000, 1000, 1000], timeout).then((res) => {
  30.   console.log(res)
  31. })

13. 异步串行 | 异步并行

  1. // 字节面试题，实现一个异步加法
  2. function asyncAdd(a, b, callback) {
  3.   setTimeout(function () {
  4.     callback(null, a + b);
  5.   }, 500);
  6. }
  8. // 解决方案
  9. // 1. promisify
  10. const promiseAdd = (a, b) => new Promise((resolve, reject) => {
  11.   asyncAdd(a, b, (err, res) => {
  12.     if (err) {
  13.       reject(err)
  14.     } else {
  15.       resolve(res)
  16.     }
  17.   })
  18. })
  20. // 2. 串行处理
  21. async function serialSum(...args) {
  22.   return args.reduce((task, now) => task.then(res => promiseAdd(res, now)), Promise.resolve(0))
  23. }
  25. // 3. 并行处理
  26. async function parallelSum(...args) {
  27.   if (args.length === 1) return args[0]
  28.   const tasks = []
  29.   for (let i = 0; i < args.length; i += 2) {
  30.     tasks.push(promiseAdd(args[i], args[i + 1] || 0))
  31.   }
  32.   const results = await Promise.all(tasks)
  33.   return parallelSum(...results)
  34. }
  36. // 测试
  37. (async () => {
  38.   console.log('Running...');
  39.   const res1 = await serialSum(1, 2, 3, 4, 5, 8, 9, 10, 11, 12)
  40.   console.log(res1)
  41.   const res2 = await parallelSum(1, 2, 3, 4, 5, 8, 9, 10, 11, 12)
  42.   console.log(res2)
  43.   console.log('Done');
  44. })()

14. vue reactive

  1. // Dep module
  2. class Dep {
  3.   static stack = []
  4.   static target = null
  5.   deps = null
  7.   constructor() {
  8.     this.deps = new Set()
  9.   }
  11.   depend() {
  12.     if (Dep.target) {
  13.       this.deps.add(Dep.target)
  14.     }
  15.   }
  17.   notify() {
  18.     this.deps.forEach(w => w.update())
  19.   }
  21.   static pushTarget(t) {
  22.     if (this.target) {
  23.       this.stack.push(this.target)
  24.     }
  25.     this.target = t
  26.   }
  28.   static popTarget() {
  29.     this.target = this.stack.pop()
  30.   }
  31. }
  33. // reactive
  34. function reactive(o) {
  35.   if (o && typeof o === 'object') {
  36.     Object.keys(o).forEach(k => {
  37.       defineReactive(o, k, o[k])
  38.     })
  39.   }
  40.   return o
  41. }
  43. function defineReactive(obj, k, val) {
  44.   let dep = new Dep()
  45.   Object.defineProperty(obj, k, {
  46.     get() {
  47.       dep.depend()
  48.       return val
  49.     },
  50.     set(newVal) {
  51.       val = newVal
  52.       dep.notify()
  53.     }
  54.   })
  55.   if (val && typeof val === 'object') {
  56.     reactive(val)
  57.   }
  58. }
  60. // watcher
  61. class Watcher {
  62.   constructor(effect) {
  63.     this.effect = effect
  64.     this.update()
  65.   }
  67.   update() {
  68.     Dep.pushTarget(this)
  69.     this.value = this.effect()
  70.     Dep.popTarget()
  71.     return this.value
  72.   }
  73. }
  75. // 测试代码
  76. const data = reactive({
  77.   msg: 'aaa'
  78. })
  80. new Watcher(() => {
  81.   console.log('===> effect', data.msg);
  82. })
  84. setTimeout(() => {
  85.   data.msg = 'hello'
  86. }, 1000)

15. promise

  1. // 建议阅读 [Promises/A+ 标准](https://promisesaplus.com/)
  2. class MyPromise {
  3.   constructor(func) {
  4.     this.status = 'pending'
  5.     this.value = null
  6.     this.resolvedTasks = []
  7.     this.rejectedTasks = []
  8.     this._resolve = this._resolve.bind(this)
  9.     this._reject = this._reject.bind(this)
  10.     try {
  11.       func(this._resolve, this._reject)
  12.     } catch (error) {
  13.       this._reject(error)
  14.     }
  15.   }
  17.   _resolve(value) {
  18.     setTimeout(() => {
  19.       this.status = 'fulfilled'
  20.       this.value = value
  21.       this.resolvedTasks.forEach(t => t(value))
  22.     })
  23.   }
  25.   _reject(reason) {
  26.     setTimeout(() => {
  27.       this.status = 'reject'
  28.       this.value = reason
  29.       this.rejectedTasks.forEach(t => t(reason))
  30.     })
  31.   }
  33.   then(onFulfilled, onRejected) {
  34.     return new MyPromise((resolve, reject) => {
  35.       this.resolvedTasks.push((value) => {
  36.         try {
  37.           const res = onFulfilled(value)
  38.           if (res instanceof MyPromise) {
  39.             res.then(resolve, reject)
  40.           } else {
  41.             resolve(res)
  42.           }
  43.         } catch (error) {
  44.           reject(error)
  45.         }
  46.       })
  47.       this.rejectedTasks.push((value) => {
  48.         try {
  49.           const res = onRejected(value)
  50.           if (res instanceof MyPromise) {
  51.             res.then(resolve, reject)
  52.           } else {
  53.             reject(res)
  54.           }
  55.         } catch (error) {
  56.           reject(error)
  57.         }
  58.       })
  59.     })
  60.   }
  62.   catch(onRejected) {
  63.     return this.then(null, onRejected);
  64.   }
  65. }
  67. // 测试
  68. new MyPromise((resolve) => {
  69.   setTimeout(() => {
  70.     resolve(1);
  71.   }, 500);
  72. }).then((res) => {
  73.     console.log(res);
  74.     return new MyPromise((resolve) => {
  75.       setTimeout(() => {
  76.         resolve(2);
  77.       }, 500);
  78.     });
  79.   }).then((res) => {
  80.     console.log(res);
  81.     throw new Error('a error')
  82.   }).catch((err) => {
  83.     console.log('==>', err);
  84.   })

16. 数组扁平化

  1. // 方案 1
  2. function recursionFlat(ary = []) {
  3.   const res = []
  4.   ary.forEach(item => {
  5.     if (Array.isArray(item)) {
  6.       res.push(...recursionFlat(item))
  7.     } else {
  8.       res.push(item)
  9.     }
  10.   })
  11.   return res
  12. }
  13. // 方案 2
  14. function reduceFlat(ary = []) {
  15.   return ary.reduce((res, item) => res.concat(Array.isArray(item) ? reduceFlat(item) : item), [])
  16. }
  18. // 测试
  19. const source = [1, 2, [3, 4, [5, 6]], '7']
  20. console.log(recursionFlat(source))
  21. console.log(reduceFlat(source))

17. 对象扁平化

  1. function objectFlat(obj = {}) {
  2.   const res = {}
  3.   function flat(item, preKey = '') {
  4.     Object.entries(item).forEach(([key, val]) => {
  5.       const newKey = preKey ? `${preKey}.${key}` : key
  6.       if (val && typeof val === 'object') {
  7.         flat(val, newKey)
  8.       } else {
  9.         res[newKey] = val
  10.       }
  11.     })
  12.   }
  13.   flat(obj)
  14.   return res
  15. }
  17. // 测试
  18. const source = { a: { b: { c: 1, d: 2 }, e: 3 }, f: { g: 2 } }
  19. console.log(objectFlat(source));

18. 图片懒加载

  1. // <img src="default.png" data-src="https://xxxx/real.png">
  2. function isVisible(el) {
  3.   const position = el.getBoundingClientRect()
  4.   const windowHeight = document.documentElement.clientHeight
  5.   // 顶部边缘可见
  6.   const topVisible = position.top > 0 && position.top < windowHeight;
  7.   // 底部边缘可见
  8.   const bottomVisible = position.bottom < windowHeight && position.bottom > 0;
  9.   return topVisible || bottomVisible;
  10. }
  12. function imageLazyLoad() {
  13.   const images = document.querySelectorAll('img')
  14.   for (let img of images) {
  15.     const realSrc = img.dataset.src
  16.     if (!realSrc) continue
  17.     if (isVisible(img)) {
  18.       img.src = realSrc
  19.       img.dataset.src = ''
  20.     }
  21.   }
  22. }
  24. // 测试
  25. window.addEventListener('load', imageLazyLoad)
  26. window.addEventListener('scroll', imageLazyLoad)
  27. // or
  28. window.addEventListener('scroll', throttle(imageLazyLoad, 1000))