题目:

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. 美团外卖Android Crash治理之路

    Crash率是衡量一个App好坏的重要指标之一,如果你忽略了它的存在,它就会愈演愈烈,最后造成大量用户的流失,进而给公司带来无法估量的损失.本文讲述美团外卖Android客户端团队在将App的Cras ...

  2. POJ 2891 Strange Way to Express Integers 中国剩余定理 数论 exgcd

    http://poj.org/problem?id=2891 题意就是孙子算经里那个定理的基础描述不过换了数字和约束条件的个数…… https://blog.csdn.net/HownoneHe/ar ...

  3. 某gov的逻辑漏洞

    首先找一个号 在企业信息里面查看到大量的企业名称和组织机构代码 随后去找回密码那 可以看到是直接显示了用户名和密码 随后去登录 可以看到大量的工程信息个企业注册信息 ​

  4. hdu 5301 Buildings (2015多校第二场第2题) 简单模拟

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5301 题意:给你一个n*m的矩形,可以分成n*m个1*1的小矩形,再给你一个坐标(x,y),表示黑格子 ...

  5. Lunix/Mac下根据最后修改时间复制文件和文件夹,保持原有的目录结构

    度娘知道:http://zhidao.baidu.com/link?url=DD47jm6qDgT7yxsnz9e-NC4Fqd33oRoiIwcGLkw5TL4cbf50VKY2IONbHKH0IE ...

  6. cocos2dx 3.0 中文 iconv 转换函数

    //#include <string> #pragma once #include "cocos2d.h"; #include "iconv\include\ ...

  7. macbook pro 开发帮助

    java安装目录 /Library/java/JavaVirtualMachines/ 设置快捷目录 vim .bash_profile 文件中追加一下信息:export dirname=目录路径 重 ...

  8. Git_分支管理策略

    通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的comm ...

  9. Leetcode 树 Populating Next Right Pointers in Each Node II

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie Populating Next Right Pointers in Each Node II ...

  10. Setup Factory打包winform程序

    摘要 Setup Factory是一款软件安装工具.Setup Factory支持创建一个安装文件或一个单间的setup.exe文件,生成文件可以运行于任意版本的windows中. 步骤 1.安装Se ...