Web前端最全setTimeout与循环闭包经典面试题详解(1)，2024年最新五面拿下阿里飞猪offer

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

在对于执行上下文[2]的介绍中，我与大家分享了函数调用栈这种特殊数据结构的调用特性。在这里，将会介绍另外一个特殊的队列结构，页面中所有由setTimeout定义的操作，都将放在同一个队列中依次执行。

我用下图跟大家展示一下队列数据结构的特点。

队列：先进先出

而这个队列执行的时间，需要等待到函数调用栈清空之后才开始执行。即所有可执行代码执行完毕之后，才会开始执行由setTimeout定义的操作。而这些操作进入队列的顺序，则由设定的延迟时间来决定。

更加详细的执行顺序，将会在事件循环的文中中描述

因此在上面这个例子中，即使我们将延迟时间设置为0，它定义的操作仍然需要等待所有代码执行完毕之后才开始执行。这里的延迟时间，并非相对于setTimeout执行这一刻，而是相对于其他代码执行完毕这一刻。所以上面的例子执行结果就非常容易理解了。

为了帮助大家理解，再来一个结合变量提升的更加复杂的例子。如果你能够正确看出执行顺序，那么你对于函数的执行就有了比较正确的认识了，如果还不能，就回过头去看看其他几篇文章。

setTimeout(function () {

console.log(a);

}, 0);

var a = 10;

console.log(b);

console.log(fn);

var b = 20;

function fn() {

setTimeout(function () {

console.log(‘setTImeout 10ms.’);

}, 10);

}

fn.toString = function () {

return 30;

}

console.log(fn);

setTimeout(function () {

console.log(‘setTimeout 20ms.’);

}, 20);

fn();

执行结果如图所示。

OK，关于setTimeout就暂时先介绍到这里，我们回过头来看看那个循环闭包的思考题。

for (var i = 1; i <= 5; i++) {

setTimeout(function timer() {

console.log(i);

}, i * 1000);

}

如果我们直接这样写，根据setTimeout定义的操作在函数调用栈清空之后才会执行的特点，for循环里定义了5个setTimeout操作。而当这些操作开始执行时，for循环的i值，已经先一步变成了6。因此输出结果总为6。而我们想要让输出结果依次执行，我们就必须借助闭包的特性，每次循环时，将i值保存在一个闭包中，当setTimeout中定义的操作执行时，则访问对应闭包保存的i值即可。

而我们知道在函数中闭包判定的准则，即执行时是否在内部定义的函数中访问了上层作用域的变量。我们需要包裹一层自执行函数为闭包的形成提供条件。

因此，我们只需要2个操作就可以完成题目需求，一是使用自执行函数提供闭包条件，二是传入i值并保存在闭包中。

for (var i = 1; i <= 5; i++) {

(function (i) {

setTimeout(function timer() {

console.log(i);

}, i * 1000);

})(i)

}

利用断点调试，在chrome中查看执行顺序与每一个闭包中不同的i值

当然，也可以在setTimeout的第一个参数处利用闭包。

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-AByljmzy-1715861183743)]