前端几个高频手写题目

252 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

建议优先掌握:

  • instanceof - 考察对原型链的理解
  • new - 对创建对象实例过程的理解
  • call/apply/bind - 对this指向的理解
  • 手写promise - 对异步的理解
  • 手写原生ajax - 对ajax原理和http请求方式的理解,重点是get和post请求的实现

1. 实现防抖函数(debounce)

防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行

eg. 像仿百度搜索,就应该用防抖,当我连续不断输入时,不会发送请求;当我一段时间内不输入了,才会发送一次请求;如果小于这段时间继续输入的话,时间会重新计算,也不会发送请求。

手写简化版:

image.png

适用场景:

按钮提交场景:防止多次提交按钮,只执行最后提交的一次 服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似

2. 实现节流函数(throttle)

节流函数原理:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效

例:(连续不断动都需要调用时用,设一时间间隔),像dom的拖拽,如果用消抖的话,就会出现卡顿的感觉,因为只在停止的时候执行了一次,这个时候就应该用节流,在一定时间内多次执行,会流畅很多

手写简版

image.png

适用场景:

  • 拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动
  • 缩放场景:监控浏览器resize
  • 动画场景:避免短时间内多次触发动画引起性能问题

3. 实现一个深拷贝

简洁版本

1. 简单版:

image.png 局限性:

  • 他无法实现对函数 、RegExp等特殊对象的克隆
  • 会抛弃对象的constructor,所有的构造函数会指向Object
  • 对象有循环引用,会报错

2. 面试够用版

image.png

调用深拷贝方法,若属性为值类型,则直接返回;若属性为引用类型,则递归遍历。这就是我们在解这一类题时的核心的方法。

4. 实现Event(event bus)

event bus既是node中各个模块的基石,又是前端组件通信的依赖手段之一,同时涉及了订阅-发布设计模式,是非常重要的基础

简单版: image.png

5. 模板引擎实现

image.png

image.png

6.查找字符串中出现最多的字符和个数

例: abbcccddddd -> 字符最多的是d,出现了5次

image.png

7. 实现千位分隔符

image.png

image.png

8. 常用正则(电话、邮箱、身份证)

image.png