【面经】携程暑期练习一面

一、简述

T0T感觉面试体验很好，面试官很耐烦很温柔也很专业，就是我有点菜了捏，还有许多把握得一般，经不起细问。希望不断查缺补漏，加油加油！
二、面试内容

1、笔试

• ‘手写防抖节省函数
  

   简介：
  - 防抖函数：函数的延长执行；应用场景：当频繁触发同一个变乱时，只有最后一次会被执行，淘汰了因为频繁的网络请求带来的开销
  - 节省函数：会按照一定的频率来执行函数。节省类似于技能cd，不管你按了多少次，必须等到cd竣事后才能开释技能。也就是说在如果在cd时间段，不管你触发了几次变乱，只会执行一次。只有当下一次cd转换，才会再次执行。
  参考博客：JS手写题-防抖-节省 - 掘金 (juejin.cn)

1. //防抖debounce函数
2. //------------------参考前面的博客
3. // 第一个参数是需要进行防抖处理的函数，第二个参数是延迟时间，默认为1秒钟
4. // 这里多传一个参数，immediate用来决定是否要第一次立即执行, 默认为false
5. function debounce(fn, delay = 1000, immediate = false) {
6. // 实现防抖函数的核心是使用setTimeout
7.     // time变量用于保存setTimeout返回的Id
8.     let time = null
9.     // isImmediateInvoke变量用来记录是否立即执行, 默认为false
10.     let isImmediateInvoke = false
11.    
12.     // 将回调接收的参数保存到args数组中
13.     function _debounce(...args) {
14.         // 如果time不为0，也就是说有定时器存在，将该定时器清除
15.         if (time !== null) {
16.             clearTimeout(time)
17.         }
18.         
19.         // 当是第一次触发，并且需要触发第一次事件
20.         if (!isImmediateInvoke && immediate) {
21.             fn.apply(this, args)
22.             // 将isImmediateInvoke设置为true，这样不会影响到后面频繁触发的函数调用
23.             isImmediateInvoke = true;
24.         }
25.         
26.         time = setTimeout(() => {
27.             // 使用apply改变fn的this，同时将参数传递给fn
28.             fn.apply(this, args)  
29.             // 当定时器里的函数执行时，也就是说是频繁触发事件的最后一次事件
30.             // 将isImmediateInvoke设置为false，这样下一次的第一次触发事件才能被立即执行
31.             isImmediateInvoke = false
32.         }, delay)
33.     }
34.    
35.     // 防抖函数会返回另一个函数，该函数才是真正被调用的函数
36.     return _debounce
37. }
42. //节流throttle函数
43. // leading参数用来控制是否第一次立即执行，默认为true
44. function throttle(fn, interval, leading = true) {
45.     //该变量用于记录上一次函数的执行事件
46.     let lastTime = 0
47.     // 内部的控制是否立即执行的变量
48.     let isLeading = true
49.    
50.     const _throttle = function(...args) {
51.         // 获取当前时间
52.         const nowTime = new Date().getTime()
53.         
54.         // 第一次不需要立即执行
55.         if (!leading && isLeading) {
56.             // 将lastTime设置为nowTime，这样就不会导致第一次时remainTime大于interval
57.             lastTime = nowTime
58.             // 将isLeading设置为false，这样就才不会对后续的lastTime产生影响。
59.             isLeading = false
60.         }
61.         
62.         // cd剩余时间
63.         const remainTime = nowTime - lastTime
64.         // 如果剩余时间大于间隔时间，也就是说可以再次执行函数
65.         if (remainTime - interval >= 0) {
66.             fn.apply(this, args)
67.             // 将上一次函数执行的时间设置为nowTime，这样下次才能重新进入cd
68.             lastTime = nowTime
69.         }
70.     }
71.     // 返回_throttle函数
72.     return _throttle
73. }

复制代码

• 使用promise封装ajax原生请求
  

参考博客：(135条消息) 使用Promise封装简朴Ajax方法_promise封装ajax_小黑ii的博客-CSDN博客
GET方法：

1. function getJSON (url) {
2.     return new Promise( (resolve, reject) => {
3.         var xhr = new XMLHttpRequest()
4.         xhr.open('GET', url, true)
6.         //由于下面的回调函数由xhr对象调用，所以xhr的属性访问可以用this代替
7.         xhr.onreadystatechange = function () {
8.             if (xhr.readyState === 4) {
9.                 if (xhr.status >=200 && xhr.status<300 || xhr.status == 304) {
10.                     resolve(xhr.responseText)
11.                 } else {
12.                     var resJson = { code: xhr.status, response: xhr.response }
13.                     reject(resJson)
14.                 }
15.             }
16.         }
18.         xhr.send()
19.     })
21. }

复制代码

POST方法：

1. function postJSON(url, data) {
2.     return new Promise( (resolve, reject) => {
3.         var xhr = new XMLHttpRequest()
4.         xhr.open("POST", url, true)
5.         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
7.         xhr.onreadystatechange = function () {
8.             if (this.readyState === 4) {
9.                 if (this.status >=200 && this.status<300 || this.status == 304){
10.                     resolve(JSON.parse(this.responseText))
11.                 } else {
12.                     var resJson = { code: this.status, response: this.response }
13.                     reject(resJson)
14.                 }
15.             }
16.         }
18.         xhr.send(JSON.stringify(data))
19.     })
20. }

复制代码

• 冒泡排序 
  

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企服之家，中国第一个企服评测及商务社交产业平台。