续上一篇,金九银十,又到了一大波面试的时候,这里整理了一些被询问的高频率面试题,希望对大家有所帮助,后续会持续不断更新,有什么问题希望大家在评论区指出来,谢谢!
1.写React/Vue时为什么要在表格中写key,他的作用是什么。
key是给没一个vnode的唯一ID,可以依靠key,更精准,更快速的拿到oldVnode中对应的vode的节点。
2.什么是防抖和节流,他们的区别是什么,如何实现防抖和节流。
函数防抖(debounce)和 函数节流(throttle)都是为了限制函数的执行频次,来优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象(例如input,keyup,keydown,scroll,resize,mousemove等)
函数防抖:触发完事件 n 秒内不再触发,才执行;如果n秒内事件再次被触发,则重新计算时间
- 用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源
- window的resize、scroll事件,不断地调整浏览器的窗口大小、或者滚动时会触发对应事件,防抖让其只触发一次
function debounce(fn,delay = 100){
// 创建一个标记用来存放定时器的返回值
let timer = null
return function (){
// 每当事件触发的时候把前一个 setTimeout清除
if(timer) clearTimer(timer)
// 然后又创建一个新的 setTimeout, 这样就能保证时间间隔内如果事件持续触发,就不会执行 fn 函数
timer = setTimeout(() => {
fn.apply(this,arguments)
timer = null
},delay)
}
}
函数节流:持续触发事件,每隔一段时间,只执行一次事件(类似于技能冷却时间)
- 连续不断地触发某事件(如点击),只在单位时间内只触发一次
function throttle(fn,delay = 100){
// 通过闭包保存一个标记,相当于一个开关
let flag = true
return function () {
// 在函数开头判断标记定时器是否触发,如果有值return
if (!flag) return
flag = false
setTimeout(() => {
fn.apply(this, arguments)
flag = true
}, delay)
}
}
3.解释一下深度优先遍历和广度优先遍历。
- 深度优先遍历:是对每一个可能的分支路径深入到不能再深入为止,而且每个节点只能访问一次。
- 广度优先遍历:系统地展开并检查图中的所有节点,以找寻结果。
特点:
1、深度优先遍历:所有的搜索算法从其最终的算法实现上来看,都可以划分成两个部分──控制结构和产生系统。正如前面所说的,搜索算法简而言之就是穷举所有可能情况并找到合适的答案,所以最基本的问题就是罗列出所有可能的情况,这其实就是一种产生式系统。
2、广度优先遍历:并不考虑结果的可能位置,彻底地搜索整张图,直到找到结果为止。
4.闭包是什么
闭包就是能够读取其他函数内部变量的函数。
闭包的用途:可以读取函数内部的变量,并且让这些变量的值始终保持在内存中。
5.谈谈你对webpack的理解
是一个对资源进行模块化和打包的工具,处理每个模块的 import 和 export
追问:资源是指什么?
回答:Js,css,png图片等
追问:如果有个二进制文件,它是资源么?webpack怎么使它模块化?
回答:是。需要有一个对应的loader来处理(我是想到了vue-loader等)
6.进程和线程是什么
线程是最小的执行单元,而进程由至少一个线程组成。如何调度进程和线程,完全由操作系统决定,程序自己不能决定什么时候执行,执行多长时间。
进程指计算机中已运行的程序。
线程指操作系统能够进行运算调度的最小单位。
7.什么是事件代理/事件委托?
事件代理/事件委托是利用事件冒泡的特性,将本应该绑定在多个元素上的事件绑定在他们的祖先元素上,尤其在动态添加子元素的时候,可以非常方便的提高程序性能,减小内存空间。
8.什么是事件冒泡?什么是事件捕获?
冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型事件:事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。
9.说出你对javascript中this的指向理解
第一准则是:this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。
普通的函数调用,函数被谁调用,this就是谁。
构造函数的话,如果不用new操作符而直接调用,那即this指向window。用new操作符生成对象实例后,this就指向了新生成的对象。
匿名函数或不处于任何对象中的函数指向window 。
如果是call,apply等,指定的this是谁,就是谁。
10.什么是函数柯里化
函数柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术