一年前端面试打怪升级之路(一)

15,838 阅读11分钟

个人背景介绍

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^)/~