2021-前端面试(24道)手写/场景/排序题

2,928 阅读4分钟

手写题

绑定事件?

通用绑定事件+事件代理

marches: 判断一个DOM元素是不是符合一个CSS选择器

画一个三角形?

实现简易的ajax?

实现new操作符?

实现promise.all()?

思路:

1. 传入一个iterable / 数组 (可包含 promise、普通数据)

2. promise并行执行

3. 若有一个promise被reject,promise失败

4. 输出数组与输入数组一致

5. 所有数据resolve之后,返回结果

测试:

手写防抖?

手写节流?

手写深拷贝?

手写数组去重?

手写clearfix?

手写instanceof?

instanceof:判断左边的原型是否存在于右边的原型链上

实现原理:逐层往上查找原型,如果最终原型 = null,表示不存在原型链上,否则存在

手写typeof?

实现promise加载一张图片?

基础排序算法

插入排序?

思路:

1.从第二个数开始往前比

2.比它大就往后排

3.以此类推进行到最后一个数

第一次比较:4和5比较, 4<5, 4插入到5前面,5往后排

第二次比较:3和[4,5]比较, 3<4<5, 3插入到4前面, [4,5]往后排

第三次比较:2和[3,4,5]比较, 2<3<4<5, 2插入到3前面, [3,4,5]往后排

第四次比较:1和[2,3,4,5]比较, 1<2<3<4<5, 1插入到2前面, [2,3,4,5]往后排

快速排序?

思路:

1.分区:从数组中任意选择一个“基准”,所有比基准小的元素放在基准前面,比基准大的元素放在基准的后面 (考虑只有一个数时)

2.递归:递归对基准前后的子数组进行分区

冒泡排序?

数组长度:length

排序次数:n = 0, n++, 排序次数length - 1

比较次数: i = 0, i++, length - n (排序n次,少n个数参与比较)

选择排序?

思路:

1.找到数组中的最小值,选中它并将其放置在第一位

2.接着找到第二小的值,选中它并将其放置在第二位

3.以此类推,执行n-1轮

归并排序?

思路:

1.分:把数组劈成两半,再递归地对子数组进行“分”操作,直到分成一个个单独的数

2.合:把两个数合并为有序数组,再对有序数组进行合并,直到全部子数组合并为一个完整数组

合并两个有序数组:

1.新建一个空数组res,用于存放最终排序后的数组

2.比较两个有序数组的头部,较小者出队并推入res中

3.如果两个数组还有值,就重复第二步

深度优先遍历 - 树?

深度优先遍历:尽可能深的搜索树的分支

技巧:

1.访问根节点

2.对根节点的children挨个进行深度优先遍历(递归)

执行顺序:按照上面树结构 a b d e c f g

广度优先遍历 - 树?

广度优先遍历:先访问离根节点最近的节点

技巧:

1.新建一个队列,把根节点入队

2.把队头出队并访问

3.把队头的children挨个入队

4.重复第二、第三步,直到队列为空

结果:a b c d e f g

场景题

实现模糊查询?

大div下,两个小div,鼠标悬停一个div,改变另一个div样式?

Vue如何实现登录方法?

1.进入登录页面,输入账号和密码

2.点击登录按钮,触发当前组件中methods的login方法

3.在login方法中,将账号和密码作为参数传递给Vuex中的doLogin方法并调用通过this.$store.dispatch("doLogin")

4.在doLogin方法中,异步调用登录请求Api,当服务器返回token,则通过localStorage存储token

5.当调用完doLogin方法后,返回Promise对象,通过.then继续调用Vuex中getUserInfo方法获取用户信息

6.最后跳转到指定页面

Vue如何保持登录状态?刷新还是当前页面?

1.localStorage存储token

2.设置全局守卫router.beforeEach(to,from,next) -- 路由进入前做验证判断

3.通过getItem获取localStorage中的token

4.如果即将进入的路由需要requiresAuth登录权限 -to.meta.requiresAuth- 登录权限是在定义路由的meta字段设置的再进一步判断token是否存在,如果存在则直接进入路由next(),否则就跳转到登录页面重新登录

5.如果即将进入的路由不需要requiresAuth登录权限,则可以直接访问进入的路由