题目:

for (var i = ; i < ; i++) {
setTimeout(function() {
console.log(new Date, i);
}, );
}
console.log(new Date, i);

  1、面对这段代码时给出的结果也不尽相同,以下是典型的答案:

  A. 20% 的人会快速扫描代码,然后给出结果:0,1,2,3,4,5;
  B. 30% 的人会拿着代码逐行看,然后给出结果:5,0,1,2,3,4;
  C. 50% 的人会拿着代码仔细琢磨,然后给出结果:5,5,5,5,5,5;

  只要你对 JS 中同步和异步代码的区别、变量作用域、闭包等概念有正确的理解,就知道正确答案是 C,代码的实际输出是:

  2、如果我们约定,用箭头表示其前后的两次输出之间有 1 秒的时间间隔,而逗号表示其前后的两次输出之间的时间间隔可以忽略,代码实际运行的结果该如何描述?会有下面两种答案:

  A. 60% 的人会描述为:5 -> 5 -> 5 -> 5 -> 5,即每个 5 之间都有 1 秒的时间间隔;
  B. 40% 的人会描述为:5 -> 5,5,5,5,5,即第 1 个 5 直接输出,1 秒之后,输出 5 个 5

  这就要求候选人对 JS 中的定时器的工作机制非常熟悉,循环执行过程中,几乎同时设置了 5 个定时器,一般情况下,这些定时器都会在 1 秒之后触发,而循环完的输出是立即执行的,显而易见,正确的描述是 B。

  3、追问:闭包

  如果这道题仅仅是考察候选人对 JS 异步代码、变量作用域的理解,局限性未免太大,接下来如果期望代码的输出变成:5 -> 0,1,2,3,4,该怎么改造代码?熟悉闭包的同学很快能给出下面的解决办法:

for (var i = ; i < ; i++) {
(function(j){
setTimeout(function() {
console.log(new Date, j);
}, );
})(i);
}
console.log(new Date, i);

  巧妙的利用 IIFE(Immediately Invoked Function Expression:声明即执行的函数表达式)来解决闭包造成的问题,确实是不错的思路,但是初学者可能并不觉得这样的代码很好懂,至少笔者初入门的时候这里琢磨了一会儿才真正理解。

  有没有更符合直觉的做法?答案是有,我们只需要对循环体稍做手脚,让负责输出的那段代码能拿到每次循环的 i 值即可。该怎么做呢?利用 JS 中基本类型(Primitive Type)的参数传递是按值传递(Pass by Value)的特征,不难改造出下面的代码:

var output = function(i){
setTimeout(function() {
console.log(new Date, i);
}, );
}
for (var i = ; i < ; i++) {
output(i);//值传递传个i值过去
}
console.log(new Date, i);

  4、追问

  如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5,并且要求原有的代码块中的循环和两处 console.log 不变,该怎么改造代码?新的需求可以精确的描述为:代码执行时,立即输出 0,之后每隔 1 秒依次输出 1,2,3,4,循环结束后在大概第 5 秒的时候输出 5(这里使用大概,是为了避免钻牛角尖的同学陷进去,因为 JS 中的定时器触发时机有可能是不确定的)

for (var i = ; i < ; i++) {
(function(j) {
setTimeout(function() {
console.log(new Date, j);
}, * j); // 这里修改 0~4 的定时器时间
})(i);
} setTimeout(function() { // 这里增加定时器,超时设置为 5 秒
console.log(new Date, i);
}, * i);

  不得不承认,这种做法虽粗暴有效,但是不算是能额外加分的方案。如果把这次的需求抽象为:在系列异步操作完成(每次循环都产生了 1 个异步操作)之后,再做其他的事情,代码该怎么组织?聪明的你是不是想起了什么?对,就是 Promise

  ES6、ES7的解决方案(后续)。

关于一道JS面试题的思考的更多相关文章

  1. new与属性访问的顺序,从一道JS面试题说起

    这段时间一直在研究设计模式,在看工厂模式的时候,看到一段代码 VehicleFactory.prototype.createVehicle = function ( options ) { if( o ...

  2. 一道JS面试题引发的血案

    刚入职新公司,属于公司萌新一枚,一天下午对着屏幕看代码架构时. BI项目组长给我看了一道面试别人的JS面试题. 虽然答对了,但把理由说错了,照样不及格. 话不多说,直接上题: var a = 1; s ...

  3. 一道JS面试题所引发的"血案",透过现象寻本质,再从本质看现象

    觉得本人写的不算很烂的话,可以登录关注一下我的GitHub博客,新手写东西写的不好之处,还望见谅,毕竟水平有限,写东西只为交流提高,一起学习,还望大神多加指点,指出纰漏,和提出宝贵的意见,博客会坚持写 ...

  4. 一道js面试题看变量的作用域

    [问题]分别求下面程序的输出结果: 1. <script type="text/javascript"> var a = 10; sayHi(); function s ...

  5. 一道js面试题

     当然这道面试题并不一定就能在你面试的时候遇到,但是不怕一万就怕万一,会的多一些还是好的. 问:怎么判断一串字符中哪个字符出现的最多,最多几次或者这串字符分别有哪些,每个字符出现了几次.写你请出运算代 ...

  6. 腾讯的一道js面试题(原型)

    有一只小狗叫花花,它会“汪汪”叫,他的同伴也会汪汪叫,后来环境发生了变化,新出生的狗不会再“汪汪”叫,而变成“呜呜”叫. 试通过继承来达到目的 function Dog(){ 2 this.bark ...

  7. 一道经典JS面试题

    超过80%的候选人对下面这道JS面试题的回答情况连及格都达不到.这究竟是怎样神奇的一道JS面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示? 不起眼的开始 招聘前端工程师,尤其是中高级前端 ...

  8. 一道经典的js面试题

    # 声明:学习编程语言最好的方式就是通过实例学习 ## 下面是我在博客上看到的一道js面试题,可以说非常经典,下面会以最简单的方式让你理解题目:```bashfunction Foo() { getN ...

  9. 那晚征服的一道js经典的面试题

    今天朋友共享了一道js中经典的面试题,需求是这样的 给定你任意一个字符串,让你写出一个算法,求算出该字符串中出现次数最多的一个字符,并将其结果输出 刚拿到这道题的第一感觉便是定义一个count计时器, ...

随机推荐

  1. 【BZOJ 2688】 2688: Green Hackenbush (概率DP+博弈-树上删边)

    2688: Green Hackenbush Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 42  Solved: 16 Description   ...

  2. BZOJ.3105.[CQOI2013]新Nim游戏(线性基 贪心 博弈论)

    题目链接 如果后手想要胜利,那么在后手第一次取完石子后 可以使石子数异或和为0.那所有数异或和为0的线性基长啥样呢,不知道.. 往前想,后手可以取走某些石子使得剩下石子异或和为0,那不就是存在异或和为 ...

  3. CDOJ 1401 谭爷的黑暗沙拉 数学

    谭爷的黑暗沙拉 题目连接: http://mozhu.today/#/problem/show/1401 Description 谭爷有\(n\)种不同种类的食材(水果&蔬菜),他想做出一份总 ...

  4. C# 7.0特性与vs2017

    下面是关于在C#7.0语言中计划功能的说明.其中大部分功能在Visual Studio “15” Preview 4中能运行.现在是最好的试用时期,请记录下你们的想法. C#7.0语言增加了许多的新功 ...

  5. spring---transaction(1)---源代码分析(事务的拦截器TransactionInterceptor)

    写在前面: 先了解一下spring的事务.分为分明式事务管理和注解式事务管理,对于前期的事务,spring会通过扫描拦截对于事务的方法进行增强(以后讲解). 若果目标方法存在事务,spring产出的b ...

  6. Ubuntu16.04配置Android5.0编译环境

    1.安装jdk7 Ubuntu16.04的安装源已经默认没有openjdk7了,所以要自己手动添加仓库,如下: $ sudo add-apt-repository ppa:openjdk-r/ppa ...

  7. sql prompt5安装好了,也破解完成了,然后到SQL里面还是没有提示是为什么?

    勾上这个,祝你成功!

  8. java8函数式接口小例子

    // Function<T, R> -T作为输入,返回的R作为输出 Function<String,String> function = (x) -> {System.o ...

  9. 使用C#中的out关键字,用世界杯演绎

    今年的世界杯好看至极,充满着故事性.戏剧性.无论你平常踢不踢球,也不管你是否懂球,你总能从中获得些许的情感释放.世界杯似乎超越了足球本身,成为世界各地人们的"情感总和",一场场比赛 ...

  10. MVC扩展ActionInvoker,自定义ActionInvoker,根据请求数据返回不同视图

    ActionInvoker的作用是:根据请求数据(HttpPost,HttpGet等)和action名称,来激发响应的action,再由action渲染视图.本文通过自定义ActionInvoker, ...