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

壹 ❀ 引

我在前端开发面试快速复盘，不标准的面试经验分享一文中，记录了以前两家公司的面试经历，并顺利拿到了其中一家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. 透明的；显然的；坦率的；易懂的

实现代码以下：

<div class="border"></div>

.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]。

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拒绝了以后就找不到更好的了，但是心里也不甘心于此，与他沟通的过程当中我也直说了这些想法，我说我年纪真的不小了，若是再年轻点，必定很乐意去贵公司（半外包性质）上班，薪资福利也还不错，是个很是不错的选择，可我内心恰恰装了个大厂梦，如今进不去，也得在此次找到一个技术型公司磨练本身。我说我内心真的有个坎，我跨不过去，我不想就这么平凡下去，可能我真的就很普通，只是本身不肯意认可罢了。

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

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