一道前端面试题?求大神解答

for (var i = 0; i < 5; i++) {
  console.log(i);
}

“小伟,你说说这几行代码会输出什么?”

当面试官在 Sublime 打出这几行代码时,我竟有点蒙蔽。蛤?这不是最简单的一个循环吗?是不是有陷阱啊,我思索一下,这好像和我看的那个闭包的题很像啊,这面试官是不是没写完啊?有毒啊。

“应该是直接输出 0 到 4 吧...”,我弱弱的说到。

“是啊,别紧张,这题没啥陷阱,我就是随便写一下。”

(Excuse me?面试官你是来搞笑的吗,吓死老子了!)

“那你在看看这几行代码会输出什么?”

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

额,什么鬼,怎么还不是我背了那么多遍的那道闭包题,让我想想。 setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了,对,就是这样,这么简单怎么可能难到老子。

“应该是开始输出一个 5,然后每隔一秒再输出一个 5,一共 5 个 5。”

“对,那应该怎么改才能输出 0 到 4 呢?”

终于到我熟悉的了,加个闭包就解决了,稳!

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

“很好,那你能说一下,我删掉这个 i 会发生什么吗?”

for (var i = 0; i < 5; i++) {
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

“这样子的话,内部其实没有对 i 保持引用,其实会变成输出 5。”

“很好,那我给你改一下,你看看会输出什么?”

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

蛤?什么鬼,这是什么情况,让我想想。这里给 setTimeout 传递了一个立即执行函数。额,setTimeout 可以接受函数或者字符串作为参数,那么这里立即执行函数是个啥呢,应该是个 undefined ,也就是说等价于:

setTimeout(undefined, ...);

而立即执行函数会立即执行,那么应该是立马输出的。

“应该是立马输出 0 到 4 吧。”

“哎哟,不错哦,最后一题,你对 Promise 了解吧?”

“还可以吧...”

“OK,那你试试这道题。”

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

WTF!!!!我想静静!

这道题应该考察我 JavaScript 的运行机制的,让我理一下思路。

首先先碰到一个 setTimeout,于是会先设置一个定时,在定时结束后将传递这个函数放到任务队列里面,因此开始肯定不会输出 1 。

然后是一个 Promise,里面的函数是直接执行的,因此应该直接输出 2 3 。

然后,Promise 的 then 应当会放到当前 tick 的最后,但是还是在当前 tick 中。

因此,应当先输出 5,然后再输出 4 。

最后在到下一个 tick,就是 1 。

“2 3 5 4 1”

“好滴,等待下一轮面试吧。”

So easy!妈妈再也不用担心我的面试了。

转载与‘最骚的就是你’

原文地址:https://www.cnblogs.com/llhWeb/p/9578184.html

时间: 2024-10-10 09:52:40

一道前端面试题?求大神解答的相关文章

关于添加微信公众号报错问题~求大神解答~

  弄微信请求添加永久图文素材时报错 madia id 是永久图片素材没错的 但还是包这个错 求大神解答!!如图:

[LeetCode]LRU Cache有个问题,求大神解答

题目: Design and implement a data structure for Least Recently Used (LRU) cache. It should support the following operations: get and set. get(key) - Get the value (will always be positive) of the key if the key exists in the cache, otherwise return -1.

条件运算符与逗号的嵌套的疑问,求大神解答

最近在学习条件运算符时,遇到条件运算符与逗号的嵌套的问题.有如下题目: 请大神分析输出结果?感激不尽!

112-今日闲情:瞅啥?不是你想象那样的 求大神解答

请=加=我=们=的=V+信[wqv 370]关注免费资料实力解答请=加=我=们=的=V+信[wqv 370]关注免费资料用心分析112期已解答,请加我们的导师免费获取答案,期期免费获取,不收任何费用赶紧行动起来111期:[猴羊] 开 :羊16 中110期:[龙猪] 开 :猪36 中109期:[羊兔] 开 :羊04 中108期:[蛇虎] 开 :蛇30 中107期:[牛马] 开 :牛46 中106期:[牛鸡] 开 :鸡26 中105期:[马兔] 开 :马41 中104期:[鼠兔] 开 :鼠35 中

被困扰了一个下午,求大神解答。VC6.0能编译通过,VS2013报错错误。

是一个与链表相关的代码,输入学生总人数及,每个学生的姓名成绩,并将输入的内容显示出来..VC6.0能编译通过,VS2013报错error C4703: 使用了可能未初始化的本地指针变量“p1”代码如下:#define _CRT_SECURE_NO_WARNINGS#include<stdio.h>#include<stdlib.h>typedef struct student{char name[15];int mark;struct student *next;}Node,*no

这个程序我不用指针做错在哪里求大神解答

fsb7kc滦墩到懦偾沽<http://weibo.com/dugiDp/230927983198303946547200> uxv3b3悍考婪仗堑案<http://weibo.com/p632p610p/230927982957097572372480> 2yoslj们亟案净跃懊<http://weibo.com/ZCjnqTnp/230927983042510374834176> una5i2影陕垢险柏咸<http://weibo.com/p488p699p/

各大互联网公司前端面试题(js)

对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Function) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方

金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)下

金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)下 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上的心,来面对未来每一天的挑战! 所谓"兵马未动,粮草先行",我们打响明天的战役也需要精神食粮来做后勤保障才是.在此我整理了多位从业者和我在2019年底至2020年初的一厂面试精选题,希望对磨砺锋芒.奋发向上

web前端面试题系列:(一)

1.作用域问题 var a = 6; setTimeout(function () { alert(a); a = 666; }, 1000); a = 66; 结果:66 2.语义化标签 1)tite与h1的区别 2)b与strong的区别 3)i与em的区别 PS:不要小看这些题,80%人答不上来 3.事件绑定 addEventListener,第三个参数是用来表示事件是以事件冒泡还是事件捕获这个各位都知道!但是他问的问题是: 我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你