前端开发面试快速复盘，不标准的面试经验分享（二）
<div align="center"><img src="https://img2020.cnblogs.com/blog/1213309/202008/1213309-20200810004349722-1795419251.jpg"></div><h1 id="壹--引">壹 ❀ 引</h1>
<p>我在前端开发面试快速复盘，不标准的面试经验分享一文中，记录了之前两家公司的面试经历，并顺利拿到了其中一家offer；在上上周五早上（7月31号），我7点钟出门面了2家公司，很遗憾，都挂掉了。第一家面试比较荒诞，第二家是我比较看好的公司，但挂在了项目经验上；说在前面，本文并非大厂面经，我也只是一个三年前端的失败者，所以此文仅算自我面试总结，博君一笑，倘若有帮助更好，那么本文开始。</p>
<h1 id="贰--某小公司">贰 ❀ 某小公司</h1>
<p>我在前面说，第一家公司的面试比较荒诞，因为整体面试下来可以说毫无收获，简直是浪费我的时间，算是糟糕透顶的一次经历。早上九点到了该公司，结果发现只有零散的几台电脑分布桌子上，数了数大概就五六个人，但联系我的HR说这里是临时办公点，是否属实我也没太大兴趣考证了。</p>
<p>等到九点半左右HR与面试官拿着电脑来了，带我到放杂货的房间....你没听错，用柜子拼成的桌子对我进行面试，我此时已经是抱着走流程的心态来对面这场面试了，不管过不过，反正我绝对不去。我心里这样想着，不太看得上这家公司，没想到面试官全程把我轻视了一番....</p>
<p>整场面试下来技术面试官一共就问了两个跟前端有关的问题，如下：</p>
<blockquote>
<p>面：怎么实现水平垂直居中？</p>
</blockquote>
<p>我首先说了flex实现方式，之后对于元素是否有固定宽高说了其它可行方案（这个比较简单，大家自己复习）。</p>
<blockquote>
<p>面：用ES6怎么去重数组？</p>
</blockquote>
<p>这个就更简单了，用set不接受重复元素的特性与拓展运算符来做。</p>
<pre><code class="language-javascript">[...new Set()];//
</code></pre>
<p>除此之外他就没问一个与技术相关的问题，一直在吐槽我之前公司技术多落后（公司技术落后我承认，但我不落后），我虽然学了这么多东西，估计也只会个皮毛啥的。</p>
<p>我当时就挺无语，我掌握什么程度你难道就不会用问题来检验我吗，当时也挺恼火的。</p>
<p>最后面试官问了一个让我相当无语的问题，以至于我主动把面试结束了。</p>
<blockquote>
<p>面：你给自己定级的话，你觉得在什么水平？</p>
</blockquote>
<p>我说高级我肯定不够（不然我也不会在你们杂货间坐着了），中高级之间这样吧，中级这样（之前拿offer的公司已经给我定级为中高级了，总不至于初级）。</p>
<p>然后面试官语出惊人....</p>
<blockquote>
<p>面：中级？你连vue都不会用，感觉像初级的水平。</p>
</blockquote>
<p>我确实是第一次遇到用会不会使用框架来评判一个的人能力的情况，也算符合自己最初对于这家公司的预期了，确实不值得来。所以我也不想多浪费口舌，我说没事，我面试机会特别多，就这样吧。走的时候那个联系我的HR感觉还挺不好意思的，说送我，进电梯前我对他说，你们这个面试官水平真的有点问题，一个有意义的问题都没问就给我下结论；当然HR肯定是站在他们那边的，怎么说都无所谓了，这场面试就这样收场了。反正一句话，找工作都是双向选择，谁也不欠谁的，你恶心我，我总不能让自己委屈。</p>
<h1 id="叁--某心仪公司">叁 ❀ 某心仪公司</h1>
<p>在经历了第一场糟心的面试后，我马上赶去第二家面试，这家公司算是我很看好的公司，第一距离我住的地方非常近....第二，有成熟的上线产品而且已经盈利，第三，团队人员很多都来自腾讯等大厂，有一定挑战性。虽然HR跟我说了公司大小周，但是本着技术提升的目的，单双休我都觉得不重要了。</p>
<p>公司面试分为两部分，笔试部分与面试部分，先说下笔试，一共十三道题，说难也不难，有些题我答的也不是很好，部分答案都是我当时自己组织的语言，所以并不是精准的答案，还请大家自己有针对的认真复习，题目如下：</p>
<blockquote>
<h4 id="1请简述下css选择器的权重与优先规则">1.请简述下CSS选择器的权重与优先规则。</h4>
</blockquote>
<p>这个没啥好说的，!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性。</p>
<blockquote>
<h4 id="2promise与settimeout的区别">2.<code>promise</code>与<code>setTimeout</code>的区别？</h4>
</blockquote>
<p>这题说到底考的是js事件机制，首先<code>promise</code>与<code>setTimeout</code>都是异步操作，<code>promise</code>表示一个承诺，有<code>pending</code>，<code>fulfiller</code>与<code>rejected</code>三种状态，且一旦状态转换就无法再次变更。<code>setTimeout</code>是一次性定时器，在等待固定时间后，将回调函数加入异步任务队列并等待同步任务结束后执行。就区别而论，promise回调属于微任务，而定时器属于宏任务，微任务执行优先级高于宏任务。</p>
<p>关于事件机制可以阅读博主这篇文章：JS执行机制详解，定时器时间间隔的真正含义</p>
<blockquote>
<h4 id="3用css实现一个三角形">3.用css实现一个三角形。</h4>
</blockquote>
<p>这道题比较尴尬的是，我清晰记得实现思路，结果透明的单词忘记怎么拼写了....</p>
<p>原理是让一个元素没有宽高，但是给其边框设置足够的宽度，并让其中三条边框的背景色为透明transparent。</p>
<p>记好了，透明的单词是transparent，transparent，transparent，transparent，transparent：</p>
<blockquote>
<h6 id="transparent---trænsˈpærənt-----adj-透明的显然的坦率的易懂的">transparent /trænsˈpærənt/ adj. 透明的；显然的；坦率的；易懂的</h6>
</blockquote>
<p>实现代码如下：</p>
<pre><code class="language-html"><div class="border"></div>
</code></pre>
<pre><code class="language-css">.border {
width: 0;
height: 0;
border: 50px solid;
border-color: transparent transparent #d9534f;
}
</code></pre>
<p>更详细的解释可以阅读博主这篇文章：CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头</p>
<blockquote>
<h4 id="4javascript有几种类型的值存储位置有什么不同null和undefined有什么区别">4.JavaScript有几种类型的值？存储位置有什么不同，null和undefined有什么区别？</h4>
</blockquote>
<p>主要考数据类型，大致分为两类，基本数据类型包括<code>Number</code>，<code>String</code>，<code>Boolean</code>，<code>Null</code>，<code>Undefined</code>，<code>Symbol</code>；引用类型，也就是对象，包括函数，数组，正则，普通对象等等。</p>
<p>存储方面，基本类型存放在栈中，引用类型的key存放在栈中，vaule存放在堆中。这个区别可以看博主这篇文章开头的图解：【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法</p>
<p>null表示空，是一个空值，同时也是原型链的顶端；而undefined往往用来表示一个变量未定义。</p>
<blockquote>
<h3 id="5123mapparseint输出什么">5..map(parseInt)输出什么？</h3>
</blockquote>
<p>上次面试已经遇到过了，常考点啊同学们，原因是啥我就不重复解释了，输出<code></code>。具体解释请看JS 20道概念虽老但也略有收获的JS基础题，快速做题，高效复习，不妨试试？第一题的题解。</p>
<blockquote>
<h3 id="6实现数组随机排序">6.实现数组随机排序</h3>
</blockquote>
<p>这题想了一会，感觉是要用随机数来实现，最后还是没能做出来，最让我头大的是两年前我收藏过洗牌算法与随机排序的文章，但是当时一直不重视算法，所以一直没怎么看，没想到2年后自己笔试遇到了：</p>
<pre><code class="language-javascript">function shuffle(A) {
for (var i = A.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var t = A; A = A; A = t;
}
};
let arr = ;
shuffle(arr);
</code></pre>
<p>与其本人在这班门弄斧解释一通，不如推荐大家阅读一篇算法大佬的文章：10809 一种错误的洗牌算法，以及乱排常数 (1)</p>
<blockquote>
<h4 id="7请写出输出结果">7.请写出输出结果</h4>
<pre><code class="language-javascript">var a = b = c = {};
a.val = 1;
b.val = 2;
console.log(a.val);
console.log(b.val);
console.log(c.val);
</code></pre>
<pre><code class="language-javascript">var a = 1;
(function () {
console.log(a);
var a = 2;
a++;
})();
</code></pre>
</blockquote>
<p>挺简单的两题，第一题输出3个2，代码等同于：</p>
<pre><code class="language-javascript">c = {};
b = c;
var a = b;
a.val = 1;
b.val = 2;
</code></pre>
<p>由于对象属于引用类型数据，所以b与c都是保存的对象c的地址引用，不管谁改，都会影响的同一个对象，最后一次操作将val改为了2，所以三个变量访问都是输出2。</p>
<p>第二题的代码考的是变量提升，输出<code>undefined</code>等同于如下代码：</p>
<pre><code class="language-javascript">var a = 1;
(function () {
var a;
console.log(a);
a = 2;
a++;
})();
</code></pre>
<p>变量声明提升到当前作用域的顶部，所以此时a并没有复制，于是输出<code>undefined</code>。</p>
<blockquote>
<h4 id="8请介绍一下js事件节流与防抖并手写一个节流或者防抖函数">8.请介绍一下JS事件节流与防抖，并手写一个节流或者防抖函数。</h4>
</blockquote>
<p>这个不难理解，节流就像控制一个水阀，在你不断触发的过程中，固定一个时间执行一次事件，有固定的频率，像监听滚动条事件就可以使用节流。而防抖是一直操作触发事件一直不执行，而是等你停止操作等待多少秒后才执行，像input输入只有用户停止输入比如1S后我们才检验输入是否合法，这样有利于监听优化。</p>
<p>当时脑抽，只对防抖有点印象，所以写了简单的防抖实现：</p>
<pre><code class="language-javascript">function debounce(fn, wait) {
// 借用闭包保存定时器ID
let timer = null
// 触发事件回调时执行这个返回函数
return function (...args) {
// 如果已经设定过定时器就清空上一次的定时器
if (timer) {
clearTimeout(timer)
};
// 开始设定一个新的定时器
timer = setTimeout(() => {
fn.apply(this, args)
}, wait);
};
};
</code></pre>
<p>后面我会整理一篇关于节流防抖的文章，以及其它常见手写代码题型整理。</p>
<blockquote>
<h4 id="9现有格式为yyyy-mm-dd的日期数组2013-08-092014-05-012012-11-222013-08-09实现数组去重并升序排列数组">9.现有格式为YYYY-MM-DD的日期数组，<code>['2013-08-09','2014-05-01','2012-11-22','2013-08-09']</code>，实现数组去重并升序排列数组。</h4>
</blockquote>
<p>说下我的思路，我想的是第一步利用<code>filter</code>去重，之后利用<code>sort</code>排序，大致实现如下：</p>
<pre><code class="language-javascript">function fn(arr) {
return arr.filter((item, index, arr) => {
return arr.indexOf(item) === index;
}).sort((a, b) => {
let a_ = a.split("-"),
b_ = b.split("-");
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"]
</code></pre>
<p>大家如果有更好的做法请在评论区留言，欢迎讨论。</p>
<blockquote>
<h4 id="10什么是跨域如何解决跨域问题三种以上">10.什么是跨域，如何解决跨域问题（三种以上）</h4>
</blockquote>
<p>跨域是指浏览器会限制执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制，域名，端口，协议不同都会造成跨域。常见解决方案有nginx反向代理，jsonp，window.name结合iframe等等。后面我会整理一篇关于跨域的文章，留个坑。</p>
<blockquote>
<h4 id="11什么是ajax浏览器是怎样完成一次ajax请求并执行回调函数的">11.什么是ajax?浏览器是怎样完成一次ajax请求并执行回调函数的？</h4>
</blockquote>
<p><code>ajax</code>遇到2次了，也是常考题型啊，<code>ajax</code>是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。关于后面的问题，我是站在创建XHR对象，向服务器发送请求，判断status状态，对应处理回调。</p>
<blockquote>
<h4 id="12请写出react的组件声明周期函数名称并说明发出异步请求应该在哪个函数内进行为什么">12.请写出react的组件声明周期函数名称，并说明发出异步请求应该在哪个函数内进行，为什么？</h4>
<h4 id="13react内如何实现组件内的通信">13.react内如何实现组件内的通信。</h4>
</blockquote>
<p>由于我只会angularjs，看了一部分vue，所以这两道题没回答上来，其实也无关要紧了。</p>
<p>笔试结束后便进入了面试环节，面试过程中也补充性问了一些问题，比如meta标签有哪些属性，比如this指向问题，这个在上面文章我也解释过。再比如问我能否手写一个bind函数，这个我讲了大致实现思路，具体文章可看js 手动实现bind方法，超详细思路分析！。</p>
<p>其余都是在闲聊，问我未来规划，一些项目细节问题，这里就不赘述了。总体来说，我觉得笔试面试问题算是不大的，但是很遗憾，对方目前想招聘一个对于移动端有丰富开发经验的同学，并对canvas有一定要求，所以我的项目经验就难以符合了- -。</p>
<div align="center"><img src="https://img2020.cnblogs.com/blog/1213309/202008/1213309-20200810004652135-1803640769.jpg"></div>
<p>在后面的沟通中，我也问了一些关于我职业发展建议的问题，所以说嘛，好的公司，面试官沟通都舒服很多，对于我想转全栈的想法，让我除了关心nodejs以外，可以看看go语言。对于我后面的面试，他的建议是，如果我想考虑国内公司，可以多关注vue，虽然他觉得vue较为简单不适合用于考虑一个开发者的能力（我当时就想到了第上一家面试官的气人话），如果我想去的公司主要针对海外市场，则可以多关注react，对于大型项目react还是要火一点。大致聊到这，我也知道没戏了，所以厚着脸皮把我做的笔试题要回来了，不管怎么说，总得有所收获，不是吗？</p>
<h1 id="肆--总">肆 ❀ 总</h1>
<p>我与之前拿到offer的公司人事有约好，周五给他答案是否去上班，所以到下午我和他通话时，深思熟虑后还是拒绝掉了。</p>
<p>其实心里还是害怕，怕这个offer拒绝了之后就找不到更好的了，可是内心也不甘心于此，与他沟通的过程中我也直说了这些想法，我说我年纪真的不小了，如果再年轻点，一定很乐意去贵公司（半外包性质）上班，薪资福利也还不错，是个非常不错的选择，可我心里偏偏装了个大厂梦，现在进不去，也得在这次找到一个技术型公司磨练自己。我说我心里真的有个坎，我跨不过去，我不想就这么平凡下去，可能我真的就很普通，只是自己不愿意承认罢了。</p>
<p>没想到他听完便对我说很理解我，他很清晰的知道我想要什么，想得到什么，其实他那边面试的这一个月的人选，确实发现只有我的沟通，想法以及技术是他最能接受的，我不能去真的很可惜，但如果我后面真的没找到满意的工作，让我再联系他，他再安排其它部门的机会让我再试试；说真的，听到这些，原本恐慌的内心有了些许慰藉，还是挺感谢这个人事。</p>
<p>这篇文章是我上上周星期五的面试，拖了这么久是因为上周一直在忙其它重要的事，所以也没面试，也没复习- -。从本周开始，我算是正式离职，真正投入找工作人群了，我对于未来也会迷茫，不知道自己的结果会怎样，不过仔细一想，要是人生有剧本那也确实没什么意思，后面我还会不断分享面试经历与知识点整理相关的文章，同时也期待自己最终能有一个好的结果，对自己说一声，请继续加油！</p>
<h1 id="番外一">番外一</h1>
<p>今天早上去公司办理了离职手续，可以说从今天起真正自由了。在签离职表格时与人事闲聊谈到了对于外包的看法，她的意思也是千万别去外包，我上家公司虽然不算很好（也是个上市公司），但是没想到她说招聘第一步会刷掉有外包经历的简历....理由是要价高，没创造力，沟通基本都不行，这已经在她心中形成刻板印象了；同时她也强调面试回答问题一定要有拓展性，别对方问一句说一句，搞得跟审问似得，生怕自己的才能被对方发现了。我笑着说这点你不用担心，我回答问题都是问A回答ABC的人，特别主动，因为迫切想着向对方证明自己，证明自己有一定才能。</p>
<p>对于外包，我之前也与抖音的同学聊过，大厂很看重你的出生背景，比如之前腾讯的猎头就跟我聊到，今年大厂卡简历很严格，简历没大厂经验的一律刷掉，说的过分一点，外包经历对于好点的公司就像一个人生污点，所以如果你对于未来的职业有所期盼，还是尽力让自己的工作经验丰富多彩一点，这对于日后换工作都会有极大的帮助。当然说了这么多，我也不是看轻外包的意思，只是自己年轻还是多打拼，多提升自己。</p>
<h1 id="番外二">番外二</h1>
<p>之前推掉的offer的人事又在今天早上联系我了（确实是挺好一个人事），意思还是想问我有没有找到工作，想我去他们公司，一番对话下来对我也算莫大的鼓励了，至少自己也不是很差，心里稍微又有了一些勇气和自信。</p>
<div align="center"><img src="https://img2020.cnblogs.com/blog/1213309/202008/1213309-20200810122006649-1043359192.jpg"></div>
<p>所以请继续加油，期待一个好的结果。</p><br><br>
来源：https://www.cnblogs.com/echolun/p/13467365.html
頁:
[1]