2019-个人前端面试题

2019的5月9号，离发工资还有1天的时候，个人领导亲切把我叫到办公室跟我说：'阿郭，咱们公司要倒闭了，钱是没有的啦，为了避免耽误你，你赶忙出去找工做吧'。听到这话，我虎躯一震，这已是第2个月没工资了。

公司真尼玛黑，明天就要发工资，今天才告诉我说你要倒闭。领导难道是今天突然想起来要倒闭吗？

算了，也没其余办法了。因而才工做半年的我，又填写了简历，开始了默默的找工做之旅。

我是从5月中旬开始找工做的，到如今半个月了。先说下我面试状况，我一共面试了10家公司。其中4家公司肯定拿到了offer。还有一家公司1面经过了，邀约我参加2面。可是面试了这么久挺累的，就拒绝了。

如下是我面试过程当中遇到的一些面试题，我整理出来。每一个问题也附上相关的资料，方便本身使用。若是对大家有帮助的，也但愿点个赞吧。

html篇

在我面试的众多公司里，只有58同城的1面问到相关问题，其余公司压根没问。

1.html4和html5的DOCTYPE有什么区别，以及他们的做用？

答案：HTML <!DOCTYPE> 声明

css篇

问css的公司也不多，只有那些须要作h5的公司才问下。

1.你用过flex布局吗？你简单说几个flex的属性？好比左对齐的属性是啥？右对齐的属性是啥？

flex是个很简单的知识点，花5分钟时间把教程看一遍，确定就没问题了。

Flex 布局语法教程

2.css3实现动画的方式有那些？

个人回答：有transition tranform animation。 这样回答已经没问题了，历来没有人再追问了。若是你须要更深刻了解能够点击如下教程查看.

CSS3的动画属性

3.你移动端是如何作适配的？

个人回答：早期的时候我是经过计算设计稿和屏幕的比例，动态的设置device-width和initial-scale，再经过px定位来实现移动端适配。后来改用rem，淘宝的flexbile出来以后，我就用flexbile。如今都是用css新的单位vw适配的。

这样回答，基本上就没问题了，也没有追问。感兴趣能够看下这两个教程

移动端适配问题解决方案

移动端适配总结

4.如何实现垂直居中

个人回答：若是是行内元素的话，就设置父类的text-align和子类的vertical-align(实际应用中vertical-align并不怎么有效)。我我的比较经常使用的设置父元素为相对定位，再设置子元素绝对定位，top和left为50%，transform为-50% -50%。有时候也用flex。

这样回答，我我的感受就好了。没那么多花里胡哨的东西。如下是知识点的补充，刚兴趣的能够看下，这个大佬的教程。

Vertical-Align，你应该知道的一切

16种方法实现水平居中垂直居中

5.盒装模型和怪异模型有什么区别，如何在现代浏览器中实现怪异模型？

个人回答：盒装模型的宽度等于content-width，不包括边框和padding。怪异模型的宽度等于内容宽度+padding+边框。在现代浏览器中设置box-sizing为border-box 就能够实现怪异模型。

标准模式与怪异模式对于渲染页面的影响

6.如何实现圣杯布局？

css经典布局——圣杯布局

7. 简单说下bfc是啥,以及如何造成一个bfc

学习 BFC (Block Formatting Context)

总结:面试中关于css的问题很是少，常问的也就1-4。5,6,7只被问过一次。

js篇

1.说下es6里你经常使用的功能？

这问题10个公司面试，10个公司的人都问。我都不知道问这些有啥意义。

个人回答：我先说我经常使用的啊，定义变量的时候用let、const，定义函数用箭头函数，数组新增了一些方法，好比from、of、includes。字符串新增了一些方法padStart、padEnd、includes。扩展运算符、解构赋值。接下里就是最经常使用的promise和async和await。不怎么经常使用的是set、map、weekset、weekmap、Symbol、proxy等。

ECMAScript 6 入门

2.说一说let、const和var的区别？

我就不写本身的答案了，有更好的问题，我就给大家推荐更好的文章。

let 和 var的区别

3.数组foreach和map的区别？

个人回答：foreach是直接修改原数组的，map是修改以后返回一个新的修改过数组，原数组不变。

4.call、apply、bind的区别？

this、apply、call、bind

5.你是怎么实现js继承的，不使用class，写个你最经常使用的继承方式？

深刻JavaScript继承原理

6.js的原型链是啥？

JavaScript原型与原型链

7.说一说js的闭包是啥？手写一个闭包的案例

JavaScript 闭包

8.说一说promise是啥？

能够参考一下两篇文章：

面试精选之Promise

解读Promise内部实现原理

9.你能不能手写一个promise？

我感受这简直是变态题，这个是我一年前面试爱奇艺的时候，面试官要求的，我没写出来。

你能手写一个Promise吗？Yes I promise

10.谈一谈你对async和await的理解？

个人回答：async和await是对generator函数更优雅的实现，可以以同步的方式写异步的方法。async定义在函数前面，函数执行后返回一个promise。await后面只能跟一个promise函数。

更详细的问题参考下面教程

理解 async/await

11.手写一个冒泡排序或者快速排序

js数据结构和算法(9)-排序算法

12.手写一个js的单例模式，而且说下你都在哪些地方会用到？

JavaScript设计模式

13.如何把一个多维数组转为1维数组，好比[1,2,[3,[4,[5]]]]

JavaScript 学习笔记 - 多维数组变为一维数组

14.正则表达式的回溯是啥？

一年前爱奇艺面试题

你真的懂JavaScript的正则吗？

正则表达式回溯法原理

15.Object.create()和new object()和{}的区别？

58同城面试题

Object.create()和new object()和{}的区别

16.for in和Object.keys的区别？

JavaScript中in操做符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

17.箭头函数与普通函数的区别

详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

18.js的事件循环机制是啥？

Js 的事件循环(Event Loop)机制以及实例讲解

总结：我面试的话基本上问了这些问题，promise是重中之重，面试必问。

vue篇

1.vue数据双向绑定原理的原理是啥？

这问题都被问烂了。

面试题：你能写一个Vue的双向数据绑定吗

模拟 Vue 手写一个 MVVM

2.vue是如何传参的？

又是一个烂大街的问题

Vue 组件间通讯六种方式（完整版）

3.说下vuex是什么？

Vuex Demo 讲解

4.vue-router是怎么实现路由的？路由守卫是什么？

前端路由简介以及vue-router实现原理

Vue的钩子函数-路由导航守卫、keep-alive、生命周期钩子

5.你经常使用的element-ui的组件有那些？

个人回答：表单，tab，日历，布局，列表，分页，树形结构，弹层等。

Element

6.vue中权限是怎么设置的？

手摸手，带你用vue撸后台 系列二(登陆权限篇)

7.在vue开发中你遇到过什么难题？你又是怎么解决的？

这个是个开放式的问题，常常被问道，可是又很差回答。我本身回答的是本身开发vue组件面临的问题。模模糊糊的说过去了，对方我也不知道他听懂没听懂。反正胡乱回答过去以后，他就没有再问了。

vue插件开发、文档书写、github发布、npm包发布一波流

8.vue是如何编译模板的？

模拟 Vue 手写一个 MVVM

9.请你说下vue的生命周期是啥？以及每一个生命周期都作了啥事？

vue生命周期详解

10.在你作过的那么多项目里，说一个你最有成就感的项目？

这个必问。这个必定要想好，能够从技术、沟通、业务紧急度等方面选一个最让你自豪的项目说下。

总结：关于vue其实没多少考点，可是又常常被问。对了还有，每次也都会问你开发vue几年了，这个你知道强调你用的很熟就能够了。

webpack篇

1.webpack是什么？说下你经常使用的webpack的loader和plugin是啥？

webpack4介绍与总结

2.webpack的loader和plugin的区别是啥？

webpack loader和plugin编写

webpack中loader和plugin的概念理解

3.webpack如何打包多页应用？

webpack4 多页面，多环境配置

4.如何作webpack优化？

Webpack4优化之路

5.如何使用webpack实现增量打包？

webpack增量打包多页应用

6.commonjs和amd的区别？

前端模块化：CommonJS,AMD,CMD,ES6

总结：关于webpack的面试题，也就这些了。不少面试官都喜欢问webpack，webpack也是面试中的重点。

http相关

1.你是怎么解决跨域问题的？

烂大街的问题。

前端跨域整理

2.强缓存是什么?协议缓存是什么？

HTTP----HTTP缓存机制

总结：关于http的面试题就这两个，面试前准备下就行了

其余

1.先作下自我介绍吧

（必问）这个环节是很是重要的，我之前都不怎么准备，想到哪说到哪，后来我才意识到这是不对的，由于这是每一个面试都必问的。因此很是有必要，搞一个标准答案出来。其次，你的简历一般都是好几页，里面都是密密麻麻的问题，想让面试官从简历里了解你有多优秀，那是痴心妄想。因此这时候，自我介绍就很是重要了。

自我介绍时长：大概2-5分钟左右。

1.须要介绍你的地点和学校，由于不少公司很看重这两项，

2.介绍你的亮点，好比我，我大学拿过好几个奖学金，这就是亮点。工做里，我擅长写文档，带过团队这也是个人亮点。

3.介绍你用过的技术，擅长什么。

4.介绍你之前的公司和工做内容。

5.介绍你的性格和优势。

其余的尽可能不要多说，言多必失

2.为何你要离职？

（必问）这个很考察你的情商，你千万不要说跟上一家公司领导有问题，也不要说你身体很差。这个问题也是面试必问的，你必定要找个好的理由，或者编一个好的理由。不要让人以为你很不稳定，很很差相处。

若是你以前是个大公司，你能够说职业瓶颈，你想进步，可是发现工做中用到的技术就那么多，怎么都突破不了，因此你想换个工做。或者说官僚主义严重等等。若是是个小公司，你就能够说拖欠工资，公司倒闭等等。这个你能够好好想一想。（哎，我就是公司倒闭，拖欠了3个月工资）

3.你上一家公司的薪资待遇？

（必问）。有些公司是须要打印上一家公司的银行流水的，因此回答这个问题要慎重。

若是不须要打印流水，你报上一家公司工资的时候，比你理想工资低1-2k就行了，不用说实话。彻底不用担忧对方到时候打电话核对的问题。你上一家公司的hr若是不是蠢到家了，他是不会说你实际工资的。

若是须要打印流水,你先找下你朋友里有没有工资比较高的，有的话，就按他的工资报。打印流水的时候就让他打印一份给你。打印流水是不须要银行签名的，因此你随便搞就好了。若是你没有这样的朋友，那就老实写实际工资吧。

需不须要打印流水，面试的时候填来访登记表的时候，上面都有写明的，注意看就好了。

顺便说下背景调查的事，写你上一家公司的领导或者同事的时候，若是你有关系比较好的同事，就写你同事名字。若是没有你就写你好朋友或者亲人的就能够。对方查不出来的。

4.上一家工做中遇到过什么难题？

这个不算很常问，可是最好也先想下。跟hr聊的时候，尽可能说技术上的难题。跟技术聊的时候，尽可能说沟通问题。没有问题，你最好也要提早编一个问题。不建议现场编，很容易圆不过来。

5.将来职业规划

（必问）这个你只须要回答5年内的规划就能够了，再远了，你就说太远了，如今制定也不理想，须要日后不断完善。5年规划，你也要有个目标，通常的模式是前2年精研技术，好比精研webpack原理，学习数据结构和算法等等，要说出点东西。后3年要学习管理，好比研究架构，学习团队管理等。要点是，要明确，既有技术又有管理，让别人知道你是个有理想的人。

个人回答：我想找一个稳定的有前途的公司，先用1-2年的时候，巩固下技术。我如今学了不少工具，每一个工具都用得很熟，可是我对原理的东西比较模糊，都是零星的了解。因此将来1-2年打算把技术好好研究一下。2年后我但愿能转到管理岗位，可以作更大的更多的事情。将来几年我也会坚持写博客，坚持作开源插件，但愿能帮助更多的人，结交更多的朋友，也但愿能树立本身的品牌，成为某一方面的大牛。

6.业余时间干什么？

这个很少问，可是最好仍是准备下。看书、参加团建都是比较好的回答。不要老说本身很宅。

7.你对996/加班怎么看？

我以为加班都是为了更好的完成公司的工做，是为了给公司带来更好的业绩。公司业绩好，那么咱们员工天然也会更好。固然了，从我的角度讲，加班也是一种锻炼，能够多挣点钱。因此我以为须要加班的时候就加班，以公司的义务为重。

个人心里倒是草泥马，老子才不加班。可是不能说，以先拿offer为准，有了offer你就有信心，再面试你就没那么怕了。

总结：面试官常问的问题就那么几个，就不要临场发挥了，多准备下吧。

8.说下你有什么优势和缺点？

尽可能积极健康向上吧。

个人回答：

1.我以为我是蛮努力的人，从初中到高中包括大学我都很努力的学习。大学时很努力的学习功课，业余时间都是泡在图书馆里，学习各类知识，努力了解这个世界。如今工做了，也常常看各类书记和教程，不断的丰富本身，提升的本身的技能和经验。

2.我以为我也是个挺有想法的人，在我工做过的公司，有不少项目都是我提出来的。好比项目代码优化，好比搞工做流，好比搞培训，我还贡献过开源项目。我不由有想法，还很努力的把本身的想法付诸行动。

3.最后我以为我仍是一个挺负责的人。工做里我愿意多承担事情，很想把全部的事情都作好。好比最近，虽然我离职了，可是上一家公司有些项目须要我修改，我还在积极的帮他们改。

谈下你的缺点：

个人缺点大部分都是跟我我的有关的。

1.宅一点，空闲时间我更喜欢在家看电影看书，或者去图书馆。很偶尔才会约朋友出去玩，除了谈事情，我也不太喜欢常常找别人闲聊天。

2.还有一点是焦虑吧，如今前端技术发展很快，涉及的东西又特别多。我有时候会紧张，以为本身进步的太慢，进步的也不够。另外没工做的时候，我也会紧张，我会以为对不起公司，好像在白占公司便宜。

薪资

我单独着重说下薪资。

薪资不等于工资！！！

薪资不等于工资！！！

薪资不等于工资！！！

重要的事说3遍。

薪资=工资+年终奖+x薪+公积金+社保。

在你报工资的时候，请先问清楚是多少薪，有没有年终奖，社保是多少。

在你报工资的时候，请先问清楚是多少薪，有没有年终奖，社保是多少。

在你报工资的时候，请先问清楚是多少薪，有没有年终奖，社保是多少。

重要的事情又说了3遍。你不问，hr是刻意给你隐瞒的。

hr让你填的是工资。好比你在ab两家公司都填20k，a公司是12薪，b公司是13薪，这一年就差了2w块钱。还有公积金，有的公积金只有几百，有的是工资的5%，有的是工资的12%。你若是每一个公司都要价相同，实际到手的钱可能差异很大。因此要慎重。

另一点，谈工资的时候必定要自信，必定要自信，必定要自信。等到谈工资的时候，90%，你已是他们心中的理想人选了，因此不用担忧再被刷掉了。

hr问题

为何我要着重谈下hr问题呢。由于我对hr有偏见，长期的工做经验，我发现hr真是一个很是不值得信任的人群。

hr对你的做用就1个——剥削你。

在我10次面试里有2次是被hr哄骗过去的。面试前hr说不是996，你要的薪资是没问题的。可是一面试，面试官就会说咱们是996，你能接受不？你要的薪资过高的，咱们这边可能知足不了你。真的很浪费时间，很让人气愤。

其次是薪资问题。我很不理解，工资又不是hr的，hr却老是想法设法压低你的工资，为了压低你的工资，他们打击你或者恐吓你。毫无原则压低你工资。

最后交友问题，当你入职一家公司后，有时候hr会忽然跟你走得很近，找你聊天啊，跟你开玩笑啊。别信，要不就是有活动须要你帮忙了，要不就是他们想从你口中获得一些其余员工的情况。别当真。

固然我这样说，也不要一棒子打死。也许有些hr很好吧。要跟hr保持适度的距离，不要交心。

看准网

推荐一个网站，看准网，这个网站是不收费的。去面试前最好查下你要面试的公司，若是评论不好，你就不要去了，浪费时间。

看准网

几个小建议

1.不作去小公司，不要去小公司，不要去小公司

2.尽可能不要996，人生还有许多其余事情能够作

3.多拿offer，多看看，不要有心理负担

4.谈工资的时候，必定要自信。

在找工做的时候，运气比能力更重要，但愿你有好的运气！！！