一、简述
T0T感觉面试体验很好,面试官很耐心很温柔也很专业,就是我有点菜了捏,还有很多掌握得一般,经不起细问。希望不断查缺补漏,加油加油!
二、面试内容
1、笔试
- ‘手写防抖节流函数
简介:
- 防抖函数:函数的延迟执行;应用场景:当频繁触发同一个事件时,只有最后一次会被执行,减少了因为频繁的网络请求带来的开销
- 节流函数:会按照一定的频率来执行函数。节流类似于技能cd,不管你按了多少次,必须等到cd结束后才能释放技能。也就是说在如果在cd时间段,不管你触发了几次事件,只会执行一次。只有当下一次cd转换,才会再次执行。
参考博客:JS手写题-防抖-节流 - 掘金 (juejin.cn)
//防抖debounce函数
//------------------参考前面的博客
// 第一个参数是需要进行防抖处理的函数,第二个参数是延迟时间,默认为1秒钟
// 这里多传一个参数,immediate用来决定是否要第一次立即执行, 默认为false
function debounce(fn, delay = 1000, immediate = false) {
// 实现防抖函数的核心是使用setTimeout
// time变量用于保存setTimeout返回的Id
let time = null
// isImmediateInvoke变量用来记录是否立即执行, 默认为false
let isImmediateInvoke = false
// 将回调接收的参数保存到args数组中
function _debounce(...args) {
// 如果time不为0,也就是说有定时器存在,将该定时器清除
if (time !== null) {
clearTimeout(time)
}
// 当是第一次触发,并且需要触发第一次事件
if (!isImmediateInvoke && immediate) {
fn.apply(this, args)
// 将isImmediateInvoke设置为true,这样不会影响到后面频繁触发的函数调用
isImmediateInvoke = true;
}
time = setTimeout(() => {
// 使用apply改变fn的this,同时将参数传递给fn
fn.apply(this, args)
// 当定时器里的函数执行时,也就是说是频繁触发事件的最后一次事件
// 将isImmediateInvoke设置为false,这样下一次的第一次触发事件才能被立即执行
isImmediateInvoke = false
}, delay)
}
// 防抖函数会返回另一个函数,该函数才是真正被调用的函数
return _debounce
}
//节流throttle函数
// leading参数用来控制是否第一次立即执行,默认为true
function throttle(fn, interval, leading = true) {
//该变量用于记录上一次函数的执行事件
let lastTime = 0
// 内部的控制是否立即执行的变量
let isLeading = true
const _throttle = function(...args) {
// 获取当前时间
const nowTime = new Date().getTime()
// 第一次不需要立即执行
if (!leading && isLeading) {
// 将lastTime设置为nowTime,这样就不会导致第一次时remainTime大于interval
lastTime = nowTime
// 将isLeading设置为false,这样就才不会对后续的lastTime产生影响。
isLeading = false
}
// cd剩余时间
const remainTime = nowTime - lastTime
// 如果剩余时间大于间隔时间,也就是说可以再次执行函数
if (remainTime - interval >= 0) {
fn.apply(this, args)
// 将上一次函数执行的时间设置为nowTime,这样下次才能重新进入cd
lastTime = nowTime
}
}
// 返回_throttle函数
return _throttle
}
- 使用promise封装ajax原生请求
参考博客:(135条消息) 使用Promise封装简单Ajax方法_promise封装ajax_小黑ii的博客-CSDN博客
GET方法:
function getJSON (url) {
return new Promise( (resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
//由于下面的回调函数由xhr对象调用,所以xhr的属性访问可以用this代替
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >=200 && xhr.status<300 || xhr.status == 304) {
resolve(xhr.responseText)
} else {
var resJson = { code: xhr.status, response: xhr.response }
reject(resJson)
}
}
}
xhr.send()
})
}
POST方法:
function postJSON(url, data) {
return new Promise( (resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open("POST", url, true)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >=200 && this.status<300 || this.status == 304){
resolve(JSON.parse(this.responseText))
} else {
var resJson = { code: this.status, response: this.response }
reject(resJson)
}
}
}
xhr.send(JSON.stringify(data))
})
}
- 冒泡排序
2、面试
1、vue virtual dom解释
2、== 和 === 和Object.is()区别(主要注意:Object.is()和===的细微差别)
js中==、===和Object.is()的区别 - durance - 博客园 (cnblogs.com)
3、Array说出五个方法,考了下splice三个参数
splice:
第1个参数表示开始修改的元素索引位置。
第2个参数表示要移除的个数。
第3个参数表示要添加进数组的元素,从第一个参数的索引位置开始添加。
4、vue生命周期
5、页面优化方法
web前端性能优化(全汇总) - 掘金 (juejin.cn)
6、跨域请求方法
解决跨域请求的几种常用方式 - 掘金 (juejin.cn)
7、list列表上的key有什么意义
React之key详解 - wonyun - 博客园 (cnblogs.com)
8、普通函数和箭头函数的区别