一切福田,不離方寸,從心而覓,感無不通。

最全的手写JS面试题

前言

本文整理了前端面试高频出现的手写源码相关的题目 其中有小编面试亲自遇到的也有其他同学帮忙补充的 整体采用 es6 语法并且以简单易懂版进行实现 如果对答案有不一样见解的同学欢迎评论区补充讨论 虽然鲨鱼哥也很不喜欢内卷 但是在如今人人皆卷的大环境下 大家只有比别人更卷才能收获更好的未来 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可~~

整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢!


1 compose

题目描述:实现一个 compose 函数

 

实现代码如下:

 

2 settimeout 模拟实现 setinterval(带清除定时器的版本)

题目描述:setinterval 用来实现循环定时调用 可能会存在一定的问题 能用 settimeout 解决吗

实现代码如下:

 

扩展:我们能反过来使用 setinterval 模拟实现 settimeout 吗?

 

扩展思考:为什么要用 settimeout 模拟实现 setinterval?setinterval 的缺陷是什么?

答案请自行百度哈 这个其实面试官问的也挺多的 小编这里就不展开了

3 发布订阅模式

题目描述:实现一个发布订阅模式拥有 on emit once off 方法

实现代码如下:

 

4 数组去重

实现代码如下:

 

5 数组扁平化

题目描述:实现一个方法使多维数组变成一维数组

最常见的递归版本如下:

 

扩展思考:能用迭代的思路去实现吗?

实现代码如下:

 

6 寄生组合继承

题目描述:实现一个你认为不错的 js 继承方式

实现代码如下:

 

7 实现有并行限制的 Promise 调度器

题目描述:JS 实现一个带并发限制的异步调度器 Scheduler,保证同时运行的任务最多有两个

 

实现代码如下:

 

8 new 操作符

题目描述:手写 new 操作符实现

实现代码如下:

 

9 call apply bind

题目描述:手写 call apply bind 实现

实现代码如下:

 

10 深拷贝(考虑到复制 Symbol 类型)

题目描述:手写 new 操作符实现

实现代码如下:

 

11 instanceof

题目描述:手写 instanceof 操作符实现

实现代码如下:

 

12 柯里化

题目描述:柯里化(Currying),又称部分求值(Partial Evaluation),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。核心思想是把多参数传入的函数拆成单参数(或部分)函数,内部再返回调用下一个单参数(或部分)函数,依次处理剩余的参数。

实现代码如下:

 

13 冒泡排序--时间复杂度 n^2

题目描述:实现一个冒泡排序

实现代码如下:

 

14 选择排序--时间复杂度 n^2

题目描述:实现一个选择排序

实现代码如下:

 

15 插入排序--时间复杂度 n^2

题目描述:实现一个插入排序

实现代码如下:

 

16 快排--时间复杂度 nlogn~ n^2 之间

题目描述:实现一个快排

实现代码如下:

 

17 归并排序--时间复杂度 nlog(n)

题目描述:实现一个时间复杂度为 nlog(n)的排序算法

实现代码如下:

 

18 二分查找--时间复杂度 log2(n)

题目描述:如何确定一个数在一个有序数组中的位置

实现代码如下:

 

19 实现 LazyMan

题目描述:

 

实现代码如下:

 

20 防抖节流

题目描述:手写防抖节流

实现代码如下:

 

21 写版本号排序的方法

题目描述:有一组版本号如下['0.1.1', '2.3.3', '0.302.1', '4.2', '4.3.5', '4.3.4.5']。现在需要对其进行排序,排序的结果为 ['4.3.5′,’4.3.4.5′,’2.3.3′,’0.302.1′,’0.1.1']

实现代码如下:

 

22 LRU 算法

题目描述: LRU题目.png

实现代码如下:

 

23 Promise 以及相关方法的实现

题目描述:手写 Promise 以及 Promise.all Promise.race 的实现

实现代码如下:

 

扩展思考:如何取消 promise

Promise.race()方法可以用来竞争 Promise 可以借助这个特性 自己包装一个 空的 Promise 与要发起的 Promise 来实现

 

24 实现一个 add 方法

题目描述:实现一个 add 方法 使计算结果能够满足如下预期: add(1)(2)(3)()=6 add(1,2,3)(4)()=10

其实就是考函数柯里化

实现代码如下:

 

25 动态规划求解硬币找零问题

题目描述:给定不同面额的硬币 coins 和一个总金额 amount。编写一个函数来计算可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额,返回 -1

 

实现代码如下:

 

26 请实现 DOM2JSON 一个函数,可以把一个 DOM 节点输出 JSON 的格式

题目描述:

 

实现代码如下:

 

扩展思考:如果给定的不是一个 Dom 树结构 而是一段 html 字符串 该如何解析?

那么这个问题就类似 Vue 的模板编译原理 我们可以利用正则 匹配 html 字符串 遇到开始标签 结束标签和文本 解析完毕之后生成对应的 ast 并建立相应的父子关联 不断的 advance 截取剩余的字符串 直到 html 全部解析完毕 感兴趣的可以看这里

27 类数组转化为数组的方法

题目描述:类数组拥有 length 属性 可以使用下标来访问元素 但是不能使用数组的方法 如何把类数组转化为数组?

实现代码如下:

 

28 Object.is 实现

题目描述:

 

实现代码如下:

 

29 AJAX

题目描述:利用 XMLHttpRequest 手写 AJAX 实现

实现代码如下:

 

30 分片思想解决大数据量渲染问题

题目描述:渲染百万条结构简单的大数据时 怎么使用分片思想优化渲染

实现代码如下:

 

扩展思考:对于大数据量的简单 dom 结构渲染可以用分片思想解决 如果是复杂的 dom 结构渲染如何处理?

这时候就需要使用虚拟列表了 大家自行百度哈 虚拟列表和虚拟表格在日常项目使用还是很频繁的

31 将虚拟 Dom 转化为真实 Dom

题目描述:JSON 格式的虚拟 Dom 怎么转换成真实 Dom

 

实现代码如下:

 

32 实现模板字符串解析功能

题目描述:

 

实现代码如下:

 

33 实现一个对象的 flatten 方法

题目描述:

 

实现代码如下:

 

34 列表转成树形结构

题目描述:

 

实现代码如下:

 

35 树形结构转成列表

题目描述:

 

实现代码如下:

 

36 大数相加

题目描述:实现一个add方法完成两个大数相加

 

实现代码如下:

 

作者:Big shark@LX
链接:https://juejin.cn/post/6968713283884974088
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。