80% 应聘者都不及格的 JS 面试题
发布于 8 年前 作者 wangshijun 14975 次浏览 来自 分享

共 5024 字,读完需 6 分钟,速读需 2 分钟,本文首发于知乎专栏前端周刊。写在前面,笔者在做面试官这 2 年多的时间内,面试了数百个前端工程师,惊讶的发现,超过 80% 的候选人对下面这道题的回答情况连及格都达不到。这究竟是怎样神奇的一道面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示?且听我慢慢道来

不起眼的开始

招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结果:

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

console.log(new Date, i);

这段代码很短,只有 7 行,我想,能读到这里的同学应该不需要我逐行解释这段代码在做什么吧。候选人面对这段代码时给出的结果也不尽相同,以下是典型的答案:

  • 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,代码的实际输出是:

2017-03-18T00:43:45.873Z 5
2017-03-18T00:43:46.866Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5

接下来我会追问:如果我们约定,用箭头表示其前后的两次输出之间有 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。

如果到这里算是及格的话,100 个人参加面试只有 20 人能及格,读到这里的同学可以仔细思考,你及格了么?

追问 1:闭包

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

for (var i = 0; i < 5; i++) {
    (function(j) {  // j = i
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(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);
    }, 1000);
};

for (var i = 0; i < 5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}

console.log(new Date, i);

能给出上述 2 种解决方案的候选人可以认为对 JS 基础的理解和运用是不错的,可以各加 10 分。当然实际面试中还有候选人给出如下的代码:

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}

console.log(new Date, i);

细心的同学会发现,这里只有个非常细微的变动,即使用 ES6 块级作用域(Block Scope)中的 let 替代了 var,但是代码在实际运行时会报错,因为最后那个输出使用的 i 在其所在的作用域中并不存在,i 只存在于循环内部。

能想到 ES6 特性的同学虽然没有答对,但是展示了自己对 ES6 的了解,可以加 5 分,继续进行下面的追问。

追问 2:ES6

有经验的前端同学读到这里可能有些不耐烦了,扯了这么多,都是他知道的内容,先别着急,挑战的难度会继续增加。

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

看到这里,部分同学会给出下面的可行解:

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

setTimeout(function() { // 这里增加定时器,超时设置为 5 秒
    console.log(new Date, i);
}, 1000 * i));

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

可能有的同学会问,不就是在控制台输出几个数字么?至于这样杀鸡用牛刀?你要知道,面试官真正想考察的是候选人是否具备某种能力和素质,因为在现代的前端开发中,处理异步的代码随处可见,熟悉和掌握异步操作的流程控制是成为合格开发者的基本功。

顺着下来,不难给出基于 Promise 的解决方案(既然 Promise 是 ES6 中的新特性,我们的新代码使用 ES6 编写是不是会更好?如果你这么写了,大概率会让面试官心生好感):

const tasks = [];
for (var i = 0; i < 5; i++) {   // 这里 i 的声明不能改成 let,如果要改该怎么做?
    ((j) => {
        tasks.push(new Promise((resolve) => {
            setTimeout(() => {
                console.log(new Date, j);
                resolve();  // 这里一定要 resolve,否则代码不会按预期 work
            }, 1000 * j);   // 定时器的超时时间逐步增加
        }));
    })(i);
}

Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);   // 注意这里只需要把超时设置为 1 秒
});

相比而言,笔者更倾向于下面这样看起来更简洁的代码,要知道编程风格也是很多面试官重点考察的点,代码阅读时的颗粒度更小,模块化更好,无疑会是加分点。

const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000 * i);
});

// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}

// 异步操作完成之后,输出最后的 i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);
});

读到这里的同学,恭喜你,你下次面试遇到类似的问题,至少能拿到 80 分。

我们都知道使用 Promise 处理异步代码比回调机制让代码可读性更高,但是使用 Promise 的问题也很明显,即如果没有处理 Promise 的 reject,会导致错误被丢进黑洞,好在新版的 Chrome 和 Node 7.x 能对未处理的异常给出 Unhandled Rejection Warning,而排查这些错误还需要一些特别的技巧(浏览器Node.js)。

追问 3:ES7

既然你都看到这里了,那就再坚持 2 分钟,接下来的内容会让你明白你的坚持是值得的。

多数面试官在决定聘用某个候选人之前还需要考察另外一项重要能力,即技术自驱力,直白的说就是候选人像有内部的马达在驱动他,用漂亮的方式解决工程领域的问题,不断的跟随业务和技术变得越来越牛逼,究竟什么是牛逼?建议阅读程序人生的这篇剖析

回到正题,既然 Promise 已经被拿下,如何使用 ES7 中的 async await 特性来让这段代码变的更简洁?你是否能够根据自己目前掌握的知识给出答案?请在这里暂停 1 分钟,思考下。

下面是笔者给出的参考代码:

// 模拟其他语言中的 sleep,实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        await sleep(1000);
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();

总结

感谢你花时间读到这里,相信你收获的不仅仅是用 JS 精确控制代码输出的各种技巧,更是对于前端工程师的成长期许:扎实的语言基础、与时俱进的能力、强大技术自驱力。

One More Thing

本文首发知乎专栏,商业转载请联系作者获得授权,非商业转载请注明出处。如果你觉得本文对你有帮助,请点赞!如果对文中的内容有任何疑问,欢迎留言讨论。想知道我接下来会写些什么?欢迎订阅知乎专栏:《前端周刊:让你在前端领域跟上时代的脚步》

39 回复

里面的内容是否有些借鉴了这篇文章?

听你听我 - Excuse me?这个前端面试在搞事!(分享自知乎网)https://zhuanlan.zhihu.com/p/25407758?utm_source=qq&utm_medium=social

来自酷炫的 CNodeMD

追问1直接这样就可以了。

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

@beyond5959 厉害

额, 我一直以为 setTimeout() 括号中只能有两个 内容. 请问这个在哪里可以看到这个 详解 谢谢

@beyond5959 请问你是在哪学到这种用法的?谢谢

// 之前在koa2里用的delay函数
async function delay(time) {
  return new Promise(function(resolve, reject) {
	setTimeout(function(){
	  resolve();
	}, time);
  });
};
await delay(2000);
// go on...

@cctv1005s 坦诚的说,在本文成文之前,我并没有发现你的这篇文章,所有的内容均来自自己思考和知识积累。昨天发到掘金之后,看到有人回复你的这篇帖子,才发现,里面有部分是相似的,并且你在文末标注了如有雷同就属抄袭。我当时惊出一身冷汗,我的文章确实是原创,但是如果外人说抄袭怎么办?后来仔细想想,我淡定了,真是我原创我自己就会扪心无愧,只要后续为大家输出更多好的内容来证明自己,信任的积累需要时间,何必急在一时。

@beyond5959 我是否能把你的评论增补到原文中,让更多的前端同学学习?

你从哪得来的80%,最多只有10%的人答不出来吧

下面这些才是大部分人都答不出来的(工作中不可能用到,但是变态的面试会出现)

function bbbb(){
  console.log(a);
  var a = 'aaa';
  function a(){}
  console.log(a); 
}

var n = 123;
n.a = 11;
console.log(n+n.a);
var s = 'string';
s.str = 'haha';
console.log(s+s.str);



function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出以下输出结果:
Foo.getName(); 
getName(); 
Foo().getName();
getName(); 
new Foo.getName(); 
new Foo().getName(); 
new new Foo().getName(); 

@zengming00 我陈述两个观点:

  1. 我们的统计样本应该是不同的吧?大概率,以你的能力,你身边的同事中的 90% 都能把这篇文章中列出的问题解释的清清楚楚,而本文的标题是 “80% 的应聘者”,这里已经说明了,数据产生的样本是我面试过的人,从实际经历来看 80% 的人不能全部解释清楚并不夸张,毕竟,最后被录取的那部分能和我一起工作的基本都能答上来。认知中的样本偏差,你可以去搜搜看看。
  2. 个人不建议有变态的面试,变态的面试只会让应聘者心生恶感,自忖这篇文章里面要求的程序行为描述和三个追问都不变态,我不想把候选人问倒,从他的回答和神态基本能看出一二。

@beyond5959 这个写法我试了下并不会有每次的延时,看起来像是无效

@wangshijun 😃赞,是原创的就好。牛顿和莱布尼茨也还同一时间想出一样的东西呢。

来自酷炫的 CNodeMD

@wangshijun 还有那篇知乎专栏也不是我写的,是开发weex的一位女程序员写的(忘记名字了)。

来自酷炫的 CNodeMD

并不难,只要异步理解正确了就好

屏幕快照 2017-03-21 下午7.47.03.png Google Chrome 版本 57.0.2987.98 (64-bit)

@wangshijun 当然可以,本身就是官方的东西,也不是我原创的。

@qingmingsang 想要延时就这样咯

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

@W-v-W 很有趣,我在 chrome version 57.0.2987.98 (64-bit) 里面的 snippet 功能里面跑,是报错的,node v7.1 下面跑也是报错的

WechatIMG138.jpeg

目测是 chrome dev tools 的 bug?

@DevinXian 哈哈,会者不难,能正确理解异步的基本很接近合格的前端了。

@wangshijun 屏幕快照 2017-03-21 下午10.21.35.png 原因是上次运行这段代码之前,变量i已经存在,因为运行过这段代码:

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

console.log(new Date, i);

@W-v-W 哈哈,我没注意到这个上下文,也没直接在 console 里面运行,仔细想确实如你所说。

声明async 的箭头函数会报错 自豪地采用 CNodeJS ionic

挺好的东西

@zengming00 前两个直接给出答案了。最后面的Foo 只对了几个。能给个解释么。跪求

@yudawei1230 运行环境是?

楼主,还有其他考察的要点么,个人感觉会这些东西还不够吧

@moonfy 当然还有其他的考察点,哈哈,语言基础是必须过关的,接下来浏览器网络、WEB性能、工程能力都是需要考察的。

@wocaatm

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出以下输出结果:
Foo.getName(); 
getName(); 
Foo().getName();
getName(); 
new Foo.getName(); 
new Foo().getName(); 
new new Foo().getName(); 

首先你需要了解下,var a = function (){} 和 function a(){}的区别,两个都是定义一个函数,但是前者是将函数给了一个变量,这个变量是一个Function类型,后者是定义一个function,在function的作用域中,声明的变量和函数都会置顶提前,不同的区别是,变量只会将声明提前不会将赋值提前,而函数是整个提前,所以这部分代码你可以看成酱紫


var getName;
function getName(){alert(5)};

function Foo(){
	getName = function (){alert(1)} //window.getName
	return this //window
}
Foo.getName = function (){alert(2)}
Foo.prototype.getName = function (){alert(3)}
getName = function (){aliert(4)}

执行Foo.getName(),毋庸置疑返回的结果是2 执行getName(),最后定义的getName将前面的变量进行了覆盖,所以是4 执行Foo().getName(),其中Foo()返回的是this(window),然后Foo内部执行的getName是给window赋值,所以getName又被覆盖了一次,所以这部分的返回值是 1 执行getName(),现在getName全局已经被覆盖了,所以现在返回的值还是1 执行 new Foo.getName()相当于执行 new function (){aliert(2)}所以返回值是2 执行 new Foo().getName,此时Foo是一个构造函数,最终会执行Foo.prototype.getName,所以返回结果是3 执行 new new Foo().getName()相当于执行 new function (){alert(3)},所以返回结果是3

顺道说下前两个哈 ,供其他同学参考

function bbbb(){
  console.log(a);
  var a = 'aaa';
  function a(){}
  console.log(a); 
}

和上一题的考点相同,变量式声明函数和函数式声明函数的区别,最终输出会是function a(){},aaa

var n = 123;
n.a = 11;
console.log(n+n.a);
var s = 'string';
s.str = 'haha';
console.log(s+s.str);

这一题其实是javascript的弱类型转换,javascript的类型在计算的时候会进行相对应的转换,但只是一个“中间类型”,至于中间类型是否会保存,就要看代码的具体写法了,比如这里var n = 123,n是一个number,n.a= 11,程序不会报错,n被转化成为一个中间变量obj,但是在最终执行n+n.a的时候,n其实是一个number所以就等于123+undefined=NaN,下面的s操作同理

@renminghao 谢谢。晚上回去,学习

我知道var的特性一直是JS工程师装逼的法宝,但如果我面试一家公司还在用var,我会直接掉头走人。

回到顶部