几个让我印象深刻的面试题(一)

几个让我印象深刻的面试题(一)

前言

原文地址:几个让我印象深刻的面试题(一)&&我的博客:Jay Zangwill

知乎:几个让我印象深刻的面试题(一) - 知乎专栏&&知乎专栏:进击的前端咸鱼 - 知乎专栏

几个让我印象深刻的面试题(一) | 河南前端交流群 - 240344448

时间不知不觉已经来到了大三的下学期,各大企业的春招也陆续的开始,自己也开始做些面试题,一来了解了解面试题一般会问什么,二来通过面试题可以发现自己还有哪方面不足赶紧弥补,以备战今年的春招。

通过最近的学习,我总结了一下一些我遇到的让我印象深刻的一些面试题,大家可以先看看题目自己想想答案,然后再看我的答案(我的答案经供参考,如有更好的想法欢迎在下面评论区提出自己的意见)。

正文

1. 给一个div设置它的宽度为100px,然后再设置它的padding-top为20%。问:现在这个div有多高?

2. 如下代码:

function fn1(){
		for(var i=0;i<4;i++){
			var tc=setTimeout(function(i){
				console.log(i);
				clearTimeout(tc)
			},10,i);
		}
	}
	function fn2(){
		for(var i=0;i<4;i++){
			var tc=setInterval(function(i,tc){
				console.log(i);
				clearInterval(tc)
			},10,i,tc);
		}
	}
	fn1();
	fn2();

请问分别会输出什么?

3. 如下代码:

var fn=function(a,b,c){
    return a+b+c;
}

需要写一个函数,满足

curry(fn)(1)(2)(3) //6

4. 使用原生JS实现:

(10).add(10).reduce(2).add(10) //28

意思是10加上10减去2加上10等于28。

你可以自己思考答案后在参考我给的参考答案。

答案揭晓

第一个问题

这题主要考察了对w3c标准的了解。如果你亲自去浏览器去试的话会发现这个div的高为:316.8(注意:不同分辨率的电脑测试会有不同的效果,这里以我的电脑1600x900为参考),其实到这里这题已经是解开了,但是可能还有些同学没明白这个316.8是如何计算得来的。别急,请听我细细道来。


如果你搞不懂结果为何是这个的话可能会去查w3school,你可能会看到:


但是可以这么说上面的所说的是错的,或者说,表述不准确。
例如一下情况:

//css
.inner{
        position: absolute;
        width: 100px;
        padding-top: 20%;
}
.mid{
    width: 200px;
}
.wrap{
    position: relative;
    width: 300px;
}
//html
<div class="wrap">
    <div class="mid">
        <div class="inner"></div>
    </div>
</div>

如果按照w3school说的,这个inner的高应该是40px,但是实际不是,而是60px,是以wrap的宽度计算的,由此可见,w3school的说法不成立。
那么,当padding设置为%时到底以谁为参考呢?
事到如今我也不给大家卖关子了,其实是以包含块为参考的。通俗点来说就是谁包含它,它就以谁为参考,在这里inner设置了position:absolute脱离了原来的文档流,就会去寻找它的祖先元素设置了position:relative的元素作为它的包含块。如果还不懂包含块是啥的同学建议仔细阅读我刚刚给的链接,同时还可以参考我在segmentfault上的这个问题。

第二个问题

这题考察了对闭包和定时器另外还有js执行顺序的理解。
先来说说fn1,如果把clearTimeout去掉,相信大家一定很熟悉,都会说10ms延迟后会依次输出0,1,2,3。
但是,请注意这里加了个clearTimeout,如果你去控制台实验的话会发现只输出了0,1,2,那3呢?
先别急,请听我慢慢道来:
请注意:这个tc是定义在闭包外面的,也就是说tc并没有被闭包保存,所以这里的tc指的是最后一个循环留下来的tc,所以最后一个3被清除了,没有输出。


再来看看fn2,可以发现区别就是把setTimeout改为了setInterval,同时把定时器也传到了闭包里。
那么结果又会有什么不同呢?如果亲自去实验的同学就会发现输出0,1,2,3,3,3...。
什么鬼?为毛最后一个定时器没被删除。说实话,我在这里也想了很久,为何最后一个定时器没被删除。后来我为了调试方便把i<4改为了i<2并把触发时间改为3s,在浏览器中单步调试,发现3s后第一次触发回调函数执行的时候tc的值是undefined第二次触发的时候有值了。这个时候我顿悟,这和程序的执行顺序有关。我们知道js正常情况下是从上到下,从右到左执行的。
所以这里每次循环先设置定时器,然后把定时器的返回值赋值给tc。在第一次循环的时候tc并没有被赋值,所以是undefined,在第二次循环的时候,定时器其实清理的是上一个循环的定时器。所以导致每次循环都是清理上一次的定时器,而最后一次循环的定时器没被清理,导致一直输出3。

第三个问题

这题很明显,考察函数的柯里化,函数的柯里化还不懂是啥的童鞋可以看这里
这题我的解题思路可能会有点愚笨,不过为了抛砖引玉,还是硬着头皮把我的方法写上来吧,欢迎大家在下面评论给意见。
按照题目的要求需要把fn作为第一个参数传进去,而且给出结果刚好是fn运算后给出的结果。
所以我的思路是要有一个函数将fn函数所需参数全部集中到一个数组上,集中完毕后调用fn函数,我的代码如下:

var fn = function(a,b,c) {
    return a+b+c;
}

function curry(fn) {
    var arr = [],
    mySlice = arr.slice
    fnLen = fn.length;

    function curring() {
        arr = arr.concat(mySlice.call(arguments));
        if(arr.length < fnLen) {
            return curring;
        }
        return fn.apply(this, arr);
    }
    return curring
}
curry(fn)(1)(2)(3);//6

第四题

这题主要考察对函数原型的理解。
相信大多数同学看到题目可能会一脸懵逼。(10)是什么鬼?函数调用?如果是函数调用你的函数名咧?
但是如果你多看两眼(10)不就是普通的10嘛,就是这个10在调用它原型下的add函数,然后后面一串链式调用你懂的!
如果搞清楚这点的话这题就简单了,直接在Number的原型下加方法:

Number.prototype.add=function(num){
    return this+num;
}
Number.prototype.reduce=function(num){
    return this-num;
}

说在最后的话

祝各位和我一样奋斗在春招一线的同学早日拿到心怡的offer,另外,我的博客还会持续更新关于面试题的一些技术文章,欢迎大家关注。
我的简历

参考

一个面试题衍生出来的问题推荐答案
JS中的柯里化
Web前端面试题,求解答

编辑于 2017-03-02

文章被以下专栏收录