2019-我的前端面试题

摘要：先说下我面试情况，我一共面试了家公司。篇在我面试的众多公司里，只有同城的面问到相关问题，其他公司压根没问。我自己回答的是自己开发组件面临的问题。完全不用担心对方到时候打电话核对的问题。

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

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

算了，也没其他办法了。于是才工作半年的我，又填写了简历，开始了默默的找工作之旅。

我是从5月中旬开始找工作的，到现在半个月了。先说下我面试情况，我一共面试了10家公司。其中4家公司确定拿到了offer。还有一家公司1面通过了，邀约我参加2面。但是面试了这么久挺累的，就拒绝了。

以下是我面试过程中遇到的一些面试题，我整理出来。每个问题也附上相关的资料，方便自己使用。如果对你们有帮助的，也希望点个赞吧。

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

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

答案：HTML 声明

问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只被问过一次。

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？

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

你能手写一个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是重中之重，面试必问。

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几年了，这个你知道强调你用的很熟就可以了。

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也是面试中的重点。

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对你的作用就1个——剥削你。

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

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

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

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

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

看准网

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

2.尽量不要996，人生还有许多其他事情可以做

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

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

在找工作的时候，运气比能力更重要，希望你有好的运气！！！