一年前端面试打怪升级之路（一）

我的背景介绍

2017年本科毕业生，坐标杭州，前端程序媛一枚。

在17年4月之前是个UI软妹子，自我定位想要成为一个交互大神，热衷于研究产品用户体验。

17年3月以UI设计实习生的身份进入如今的公司以后，因为UI发展前景不明，通过一段时间的深思熟虑（一拍脑门）决定转岗前端，自学一段时间后跟经理提出需求，随后逐渐往前端方向发展，6月转为正式员工，岗位为前端工程师。

一年前端经验，且以前从未有过前端面试经历

正文开始

近期面试了很多公司，采起的战略是把最想去的公司放到最后，一开始积累经验，作足准备再奋起一搏。

从一开始的，彻底get不到面试官提问的点，只知道摇头说不知道，以后每次复盘总结，梳理不足。到如今面试成功率也算可观，目前收获了几个offer，大中小型公司也都齐了。虽然被最想去的DXY给虐的不轻，但自信心也逐渐创建起来，而且了解本身的不足之处，有了努力的方向。

贴上本身升级的过程。

篇幅较长，会分篇更新，敬请期待

传送门：

一年前端面试打怪升级之路（一）

一年前端面试打怪升级之路（二）

一年前端面试打怪升级之路（三）

第一次面试

没有经验，年轻的我连简历都没带（UI设计面试的时候都是准备线上做品集），毫无准备就兴冲冲地上了。

面完了才知道，面试和实际工做开发仍是不同的，面试更考察理论基础。因此平时不重视基本功的我固然笑嘻嘻地跪了。

后来回去浏览了下面试题，其实发现当初面试官问个人问题都是很是基础的题目，并且有些知识点平时不知不觉都有使用到，只不过没有创建起知识体系，以致于根本不理解面试官在问什么，一脸懵逼加答非所问。

从此次经验中吸收了教训，必定要重视理论基础，个人学习方式也从执着于制做酷炫的实战demo，转变为看面试题和理论书籍。

for循环setTimeout500ms打印出1-10

主要仍是考察闭包，而且结合异步

for(var i = 1;i < 11;i++){
    var a = function(){
        var j = i;
        setTimeout(function(){
            console.log(j);
        },500)
    }
    a();
}
复制代码

了解的跨域方法

工做中都是在同源服务器上请求数据，因此其实并无接触过实际的跨域操做。

可是，即便没见过猪跑，那也吃过猪肉吧，同源策略，jsonp，corse，我把我知道的都扯了一通。后来回来又参照阮老师的文章整理了一遍

文章见简书同源策略与跨域

css选择器+和 ~

+：选择相邻的后一个同级元素 ~：选择元素以后的全部的同级元素

关于css选择器在以后的面试中也一样有遇到，好比nth-of-type(n)和nth-of-child(n)的区别，因此也整理出了关于选择器的扩展 文章见简书css选择器

jq有哪些地方用到了闭包，或者说你平时见过哪些闭包？

面试前刚和一个同时聊过，也问到了他对闭包的见解，同事自信一挥手，闭包实际工做中用到的很少。

天真的我在面试中也这么说了，面试官内心必定狠狠地鄙视了我，因而跟我大谈JQ源码，历来没有看过源码的我暴风哭泣。

一样的问题也出如今了另外一家同行业（非互联网）的大公司，想来大公司的重点仍是放在框架的底层原理上。

其实jq中使用了大量的闭包，全部的方法和变量都经过闭包设为私有，并使用$在全局进行调用。

闭包就是使局部变量和方法常驻内存，能够在全局进行访问，从而防止全局重名的现象。

不过也正由于这个特性，闭包会占用大量的内存空间，因此使用的时候也要慎重。

数组的内建方法有哪些

依然是一个基础题，面试官让我知道多少说多少。后来回来也作了一个系统的整理

数组内建方法大全（一）

数组内建方法大全（二）

第一次面试历时1小时不到，主要仍是介绍本身的项目，如今来看上面的题目真的很基础，可是当时的我答的也并很差。

由于是熟人推荐，并且事先知道面试小姐姐是学姐，也加了微信，我也是天真无邪，小姐姐说过来聊一聊，我就真的啥都没带就跑过去，还真觉得是聊天，以致于面试官的问题都是想到哪问到哪，仍是比较吃亏的。

因此，此次面试收获经验

1. 简历很重要，不只仅是用于展现我的信息，并且还可让简历去引导面试官提问，这样才能作好有针对性的准备
2. 理论基础很重要，仅仅依靠项目实战学习，只能成为工具的使用机器，只有了解工具的底层原理，才能融会贯通，触类旁通

第二次出击

第二次请假，一天时间面了两家公司，运气比较好吧，都是很是干脆地直接给了offer。 一家作编程教育平台，进入A轮。人数大概30人左右。虽然规模不大，不过公司业务我是很是喜欢的，一直都有一个老师梦。

技术聊天过程很是愉快，没有涉及到基本的面试题。技术哥哥是校友，比较看重个人简历。着重提问了我在学校的项目，挑战杯，大创，分别都负责什么事情，为何要去作这件事，是否是负责人等等比较细节的问题。也很欣赏我组织前端分享会的经历。同时也和我详细地说明了公司的业务以及将来的发展规划。

并且让我比较感动的一点是，他们在面试我以前详细地看了个人博客和github，还能直接说出个人项目。让我有了份量很足的尊重感。

以后和CEO聊，他的重点是，我对本身的规划是否是和他们的发展一致。给个人感觉是，他们须要的不是只在技术金字塔的人，而是愿意和他们一块儿走下去的成员。

因为和前端相关的技术涉及很少，这家公司的描述就到此。

另外一家是作互联网旅游，办公地址就位于西溪景区之中，环境能够说是万里挑一了。下午3点一直到6点，最后hr姐姐还顺路送我到公交站。真的很感谢，两轮的技术面试官应该都是团队成员，都很是亲和。走的正常的笔试面试流程，不过问的内容相对也比较基础。只能说有惊无险了。

贴上过程

笔试

笔试题都比较简单，考察基本功，我写的比较顺利，涉及到同源和跨域、原型链、vue的基本使用、设计几个简单的函数，我就贴一下稍微印象深入的题目

1. vue和Jq的区别

vue：数据驱动渲染页面，不须要操做具体的dom，页面与js耦合性弱，易于维护

jquery：依赖于dom，页面逻辑和代码逻辑一致，页面和js耦合性高 二者的设计思想是彻底不一致的，应根据不一样场合和需求选择合适的框架

2. 设计一个函数，传入一个数字n，若n能够被3整除的返回1，能够被5整除返回2，能够被7整除返回3

恩？会不会太简单了。。第一反应是有诈。。

果真我在作的时候就以为有问题，若是一个数既能够被3整除又能够被5整除呢？应该返回多少？题目并无明确说明。想了半天也没发现有什么坑，我就猜想这多是要考察输入校验吧

function Ajust(num){
    if(typeof num != "number" || num == null){
       //排除输入为空，以及输入非数字数据
        return false;
    }else{
        if(num!=0){
           //排除0
            if(num%3 === 0){
                return 1;
            }else if(num%5 === 0){
                return 2;
            }else if(num%7 === 0){
                return 3;
            }
        }else{
            retrun num+"不能被3,5,7中任何一个数整除"
        }
    }
}
复制代码

面试的时候我提出了个人疑惑，面试官也一头雾水，因此我只能下结论是他们的题目有bug了（能不能专业点>_<）

3. 小狗（Dog）叫声“wang”，小猫（Cat）叫声"miao"，他们同属Animal。请用原型和对象的知识写出他们的关系

原题可能还要复杂点，记不太清了，考察原型链和对象

//构造函数
function Animal(){
   this.word = "";
   this.say = function(){
       return "say " + this.word;
   }
}

var Dog = new Animal();  // 实例Dog
var Cat = new Animal();   //实例Miao
Dog.word = "Wang";
Cat.word = "Miao";
复制代码

面试

1. 基本数据类型有哪些

null，string，boolean，undefined，number

2. http返回的请求有几种？分别表明什么含义

1xx：信息状态码

2xx：请求成功

3xx：重定向

4xx：客户端错误

5xx：服务器错误

4. 是否了解解构赋值

看过文档，主要包括赋值的模式和变量值，可使用数组或者对象的形式对给定的变量进行赋值。而后举了个例子

const {a,b,c} = {a:"1",b:"2",c:"3"}
复制代码

5. require和import有什么不一样

import用于引入外部模块。

require不只能够引用文件和模块，并且使用位置不受限制，能够在代码中使用

6. 是否了解promise

看过文档，在ES6中编写为原生标准。是一种异步编程的解决方案。Promise有三种状态，pending（进行中）,fulfilled（成功）,rejected（失败），后两种合称为resolve（已定型），一旦状态定下，就没法发生改变。

7. ajax请求如何把异步改成同步？

ajax方法中有一个控制异步的字段"async"，默认为true，表示异步。改成false以后就为同步

8. 函数中的This指向什么？

指向调用函数的对象。

面试官对我这个回答也并无说什么，不过以后的一次面试中，关于这个点又作了很多展开，我这个说法也并不严谨，关于this的指向又是一个能够长篇大论的点了。

我先贴上红宝书上的说法：this引用的是函数执行的环境对象

有更多的想法能够看相学长的这篇文章从这两套题，从新认识JS的this、做用域、闭包、对象

9. apply和call能够作什么？有什么区别

改变this指向。二者做用基本一致，区别在于接收参数的方式不同，apply用数组或类数组的形式接收参数

10. 左边定宽，右边自适应布局；中间定宽，两边自适应布局

• 左定宽，右自适应： 左部定宽，右部浮动，左外边距设为左部宽度
• 中间定宽，两边自适应： margin:0 auto

11.html5和css3有哪些新增特性

• html5：音频，视频，canvas，svg，等多的语义化标签等
• css3：圆角，动画，滤镜，transform等

后来二面的小哥哥问了不少JQ使用的问题，这是我强项了都答的不错

还问了关于vue的基本使用方法，也都能答上来

而后又和我谈起了我的规划，而后说若是我来的话应该是他带我，确定能学到不少东西的。不过呢，他再过一个月就要走了

我？？？？？

hr面

hr姐姐真是太亲和了，全程跟我聊旅游，去了哪些地方，有哪些好玩的好吃的。知道我是温州的，更是停不下来，说好久之前去过温州的一个岛，从岛上风土人情讲到本身的职业规划。我就在一边微笑点头。恩，对对，是的，没错

最后hr姐姐还顺路送我到公交站。真的很感谢。

二战还算顺利，给了我这个小菜鸟很充足的能量，让我以为我还不算太差吧(^o^)/~