前端开发面试快速复盘，不标准的面试经验分享（二）

壹 ❀ 引

我在前端开发面试快速复盘，不标准的面试经验分享一文中，记录了之前两家公司的面试经历，并顺利拿到了其中一家offer；在上上周五早上（7月31号），我7点钟出门面了2家公司，很遗憾，都挂掉了。第一家面试比较荒诞，第二家是我比较看好的公司，但挂在了项目经验上；说在前面，本文并非大厂面经，我也只是一个三年前端的失败者，所以此文仅算自我面试总结，博君一笑，倘若有帮助更好，那么本文开始。

贰 ❀ 某小公司

我在前面说，第一家公司的面试比较荒诞，因为整体面试下来可以说毫无收获，简直是浪费我的时间，算是糟糕透顶的一次经历。早上九点到了该公司，结果发现只有零散的几台电脑分布桌子上，数了数大概就五六个人，但联系我的HR说这里是临时办公点，是否属实我也没太大兴趣考证了。

等到九点半左右HR与面试官拿着电脑来了，带我到放杂货的房间....你没听错，用柜子拼成的桌子对我进行面试，我此时已经是抱着走流程的心态来对面这场面试了，不管过不过，反正我绝对不去。我心里这样想着，不太看得上这家公司，没想到面试官全程把我轻视了一番....

整场面试下来技术面试官一共就问了两个跟前端有关的问题，如下：

面：怎么实现水平垂直居中？

我首先说了flex实现方式，之后对于元素是否有固定宽高说了其它可行方案（这个比较简单，大家自己复习）。

面：用ES6怎么去重数组？

这个就更简单了，用set不接受重复元素的特性与拓展运算符来做。

[...new Set([1, 1, 2, 3, 4, 4])];//[1, 2, 3, 4]

除此之外他就没问一个与技术相关的问题，一直在吐槽我之前公司技术多落后（公司技术落后我承认，但我不落后），我虽然学了这么多东西，估计也只会个皮毛啥的。

我当时就挺无语，我掌握什么程度你难道就不会用问题来检验我吗，当时也挺恼火的。

最后面试官问了一个让我相当无语的问题，以至于我主动把面试结束了。

面：你给自己定级的话，你觉得在什么水平？

我说高级我肯定不够（不然我也不会在你们杂货间坐着了），中高级之间这样吧，中级这样（之前拿offer的公司已经给我定级为中高级了，总不至于初级）。

然后面试官语出惊人....

面：中级？你连vue都不会用，感觉像初级的水平。

我确实是第一次遇到用会不会使用框架来评判一个的人能力的情况，也算符合自己最初对于这家公司的预期了，确实不值得来。所以我也不想多浪费口舌，我说没事，我面试机会特别多，就这样吧。走的时候那个联系我的HR感觉还挺不好意思的，说送我，进电梯前我对他说，你们这个面试官水平真的有点问题，一个有意义的问题都没问就给我下结论；当然HR肯定是站在他们那边的，怎么说都无所谓了，这场面试就这样收场了。反正一句话，找工作都是双向选择，谁也不欠谁的，你恶心我，我总不能让自己委屈。

叁 ❀ 某心仪公司

在经历了第一场糟心的面试后，我马上赶去第二家面试，这家公司算是我很看好的公司，第一距离我住的地方非常近....第二，有成熟的上线产品而且已经盈利，第三，团队人员很多都来自腾讯等大厂，有一定挑战性。虽然HR跟我说了公司大小周，但是本着技术提升的目的，单双休我都觉得不重要了。

公司面试分为两部分，笔试部分与面试部分，先说下笔试，一共十三道题，说难也不难，有些题我答的也不是很好，部分答案都是我当时自己组织的语言，所以并不是精准的答案，还请大家自己有针对的认真复习，题目如下：

1.请简述下CSS选择器的权重与优先规则。

这个没啥好说的，!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性。

2.promise与setTimeout的区别？

这题说到底考的是js事件机制，首先promise与setTimeout都是异步操作，promise表示一个承诺，有pending，fulfiller与rejected三种状态，且一旦状态转换就无法再次变更。setTimeout是一次性定时器，在等待固定时间后，将回调函数加入异步任务队列并等待同步任务结束后执行。就区别而论，promise回调属于微任务，而定时器属于宏任务，微任务执行优先级高于宏任务。

关于事件机制可以阅读博主这篇文章：JS执行机制详解，定时器时间间隔的真正含义

3.用css实现一个三角形。

这道题比较尴尬的是，我清晰记得实现思路，结果透明的单词忘记怎么拼写了....

原理是让一个元素没有宽高，但是给其边框设置足够的宽度，并让其中三条边框的背景色为透明transparent。

记好了，透明的单词是transparent，transparent，transparent，transparent，transparent：

transparent /trænsˈpærənt/ adj. 透明的；显然的；坦率的；易懂的

实现代码如下：

.border {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent transparent #d9534f;
}

更详细的解释可以阅读博主这篇文章：CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

4.JavaScript有几种类型的值？存储位置有什么不同，null和undefined有什么区别？

主要考数据类型，大致分为两类，基本数据类型包括Number，String，Boolean，Null，Undefined，Symbol；引用类型，也就是对象，包括函数，数组，正则，普通对象等等。

存储方面，基本类型存放在栈中，引用类型的key存放在栈中，vaule存放在堆中。这个区别可以看博主这篇文章开头的图解：【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法

null表示空，是一个空值，同时也是原型链的顶端；而undefined往往用来表示一个变量未定义。

5.[1,2,3].map(parseInt)输出什么？

上次面试已经遇到过了，常考点啊同学们，原因是啥我就不重复解释了，输出[1, NaN, NaN]。具体解释请看JS 20道概念虽老但也略有收获的JS基础题，快速做题，高效复习，不妨试试？第一题的题解。

6.实现数组随机排序

这题想了一会，感觉是要用随机数来实现，最后还是没能做出来，最让我头大的是两年前我收藏过洗牌算法与随机排序的文章，但是当时一直不重视算法，所以一直没怎么看，没想到2年后自己笔试遇到了：

function shuffle(A) {
    for (var i = A.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var t = A[i]; A[i] = A[j]; A[j] = t;
    }
};
let arr = [1,2,3,4,5,6,7,8,9,10];
shuffle(arr);

与其本人在这班门弄斧解释一通，不如推荐大家阅读一篇算法大佬的文章：10809 一种错误的洗牌算法，以及乱排常数 (1)

7.请写出输出结果

var a = b = c = {};
a.val = 1;
b.val = 2;
console.log(a.val);
console.log(b.val);
console.log(c.val);

var a = 1;
(function () {
    console.log(a);
    var a = 2;
    a++;
})();

挺简单的两题，第一题输出3个2，代码等同于：

c = {};
b = c;
var a = b;
a.val = 1;
b.val = 2;

由于对象属于引用类型数据，所以b与c都是保存的对象c的地址引用，不管谁改，都会影响的同一个对象，最后一次操作将val改为了2，所以三个变量访问都是输出2。

第二题的代码考的是变量提升，输出undefined等同于如下代码：

var a = 1;
(function () {
    var a;
    console.log(a);
    a = 2;
    a++;
})();

变量声明提升到当前作用域的顶部，所以此时a并没有复制，于是输出undefined。

8.请介绍一下JS事件节流与防抖，并手写一个节流或者防抖函数。

这个不难理解，节流就像控制一个水阀，在你不断触发的过程中，固定一个时间执行一次事件，有固定的频率，像监听滚动条事件就可以使用节流。而防抖是一直操作触发事件一直不执行，而是等你停止操作等待多少秒后才执行，像input输入只有用户停止输入比如1S后我们才检验输入是否合法，这样有利于监听优化。

当时脑抽，只对防抖有点印象，所以写了简单的防抖实现：

function debounce(fn, wait) {
    // 借用闭包保存定时器ID
    let timer = null
    // 触发事件回调时执行这个返回函数
    return function (...args) {
        // 如果已经设定过定时器就清空上一次的定时器
        if (timer) {
            clearTimeout(timer)
        };
        // 开始设定一个新的定时器
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, wait);
    };
};

后面我会整理一篇关于节流防抖的文章，以及其它常见手写代码题型整理。

9.现有格式为YYYY-MM-DD的日期数组，['2013-08-09','2014-05-01','2012-11-22','2013-08-09']，实现数组去重并升序排列数组。

说下我的思路，我想的是第一步利用filter去重，之后利用sort排序，大致实现如下：

function fn(arr) {
    return arr.filter((item, index, arr) => {
        return arr.indexOf(item) === index;
    }).sort((a, b) => {
        let a_ = a.split("-")[0],
            b_ = b.split("-")[0];
        return a_ - b_;
    });
};
fn(['2013-08-09', '2014-05-01', '2012-11-22', '2013-08-09']); //["2012-11-22", "2013-08-09", "2014-05-01"]

大家如果有更好的做法请在评论区留言，欢迎讨论。

10.什么是跨域，如何解决跨域问题（三种以上）

跨域是指浏览器会限制执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制，域名，端口，协议不同都会造成跨域。常见解决方案有nginx反向代理，jsonp，window.name结合iframe等等。后面我会整理一篇关于跨域的文章，留个坑。

11.什么是ajax?浏览器是怎样完成一次ajax请求并执行回调函数的？

ajax遇到2次了，也是常考题型啊，ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。关于后面的问题，我是站在创建XHR对象，向服务器发送请求，判断status状态，对应处理回调。

12.请写出react的组件声明周期函数名称，并说明发出异步请求应该在哪个函数内进行，为什么？

13.react内如何实现组件内的通信。

由于我只会angularjs，看了一部分vue，所以这两道题没回答上来，其实也无关要紧了。

笔试结束后便进入了面试环节，面试过程中也补充性问了一些问题，比如meta标签有哪些属性，比如this指向问题，这个在上面文章我也解释过。再比如问我能否手写一个bind函数，这个我讲了大致实现思路，具体文章可看js 手动实现bind方法，超详细思路分析！。

其余都是在闲聊，问我未来规划，一些项目细节问题，这里就不赘述了。总体来说，我觉得笔试面试问题算是不大的，但是很遗憾，对方目前想招聘一个对于移动端有丰富开发经验的同学，并对canvas有一定要求，所以我的项目经验就难以符合了- -。

在后面的沟通中，我也问了一些关于我职业发展建议的问题，所以说嘛，好的公司，面试官沟通都舒服很多，对于我想转全栈的想法，让我除了关心nodejs以外，可以看看go语言。对于我后面的面试，他的建议是，如果我想考虑国内公司，可以多关注vue，虽然他觉得vue较为简单不适合用于考虑一个开发者的能力（我当时就想到了第上一家面试官的气人话），如果我想去的公司主要针对海外市场，则可以多关注react，对于大型项目react还是要火一点。大致聊到这，我也知道没戏了，所以厚着脸皮把我做的笔试题要回来了，不管怎么说，总得有所收获，不是吗？

肆 ❀ 总

我与之前拿到offer的公司人事有约好，周五给他答案是否去上班，所以到下午我和他通话时，深思熟虑后还是拒绝掉了。

其实心里还是害怕，怕这个offer拒绝了之后就找不到更好的了，可是内心也不甘心于此，与他沟通的过程中我也直说了这些想法，我说我年纪真的不小了，如果再年轻点，一定很乐意去贵公司（半外包性质）上班，薪资福利也还不错，是个非常不错的选择，可我心里偏偏装了个大厂梦，现在进不去，也得在这次找到一个技术型公司磨练自己。我说我心里真的有个坎，我跨不过去，我不想就这么平凡下去，可能我真的就很普通，只是自己不愿意承认罢了。

没想到他听完便对我说很理解我，他很清晰的知道我想要什么，想得到什么，其实他那边面试的这一个月的人选，确实发现只有我的沟通，想法以及技术是他最能接受的，我不能去真的很可惜，但如果我后面真的没找到满意的工作，让我再联系他，他再安排其它部门的机会让我再试试；说真的，听到这些，原本恐慌的内心有了些许慰藉，还是挺感谢这个人事。

这篇文章是我上上周星期五的面试，拖了这么久是因为上周一直在忙其它重要的事，所以也没面试，也没复习- -。从本周开始，我算是正式离职，真正投入找工作人群了，我对于未来也会迷茫，不知道自己的结果会怎样，不过仔细一想，要是人生有剧本那也确实没什么意思，后面我还会不断分享面试经历与知识点整理相关的文章，同时也期待自己最终能有一个好的结果，对自己说一声，请继续加油！

番外一

今天早上去公司办理了离职手续，可以说从今天起真正自由了。在签离职表格时与人事闲聊谈到了对于外包的看法，她的意思也是千万别去外包，我上家公司虽然不算很好（也是个上市公司），但是没想到她说招聘第一步会刷掉有外包经历的简历....理由是要价高，没创造力，沟通基本都不行，这已经在她心中形成刻板印象了；同时她也强调面试回答问题一定要有拓展性，别对方问一句说一句，搞得跟审问似得，生怕自己的才能被对方发现了。我笑着说这点你不用担心，我回答问题都是问A回答ABC的人，特别主动，因为迫切想着向对方证明自己，证明自己有一定才能。

对于外包，我之前也与抖音的同学聊过，大厂很看重你的出生背景，比如之前腾讯的猎头就跟我聊到，今年大厂卡简历很严格，简历没大厂经验的一律刷掉，说的过分一点，外包经历对于好点的公司就像一个人生污点，所以如果你对于未来的职业有所期盼，还是尽力让自己的工作经验丰富多彩一点，这对于日后换工作都会有极大的帮助。当然说了这么多，我也不是看轻外包的意思，只是自己年轻还是多打拼，多提升自己。

番外二

之前推掉的offer的人事又在今天早上联系我了（确实是挺好一个人事），意思还是想问我有没有找到工作，想我去他们公司，一番对话下来对我也算莫大的鼓励了，至少自己也不是很差，心里稍微又有了一些勇气和自信。

所以请继续加油，期待一个好的结果。