ToB企服应用市场:ToB评测及商务社交产业平台
标题:
【面经】携程暑期练习一面
[打印本页]
作者:
不到断气不罢休
时间:
2024-7-27 15:48
标题:
【面经】携程暑期练习一面
一、简述
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、平凡函数和箭头函数的区别
(135条消息) 箭头函数与平凡函数的区别详解_箭头函数与平凡函数有哪些区别_小弦的博客的博客-CSDN博客
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4