经过一周多的时间的面试，工作方面终于是尘埃落定，下面就简单总结一下今年面试的情况和经验。

简历的亮点

简历中的亮点是十分重要的，它直接决定面试官是否有话可问，也直接反应了最近几年我们的工作质量。如果每天都仅仅是完成自己的开发任务，我觉得是远远不够的。

我记得两年之前我的简历亮点是：阅读过XXX框架的源码，但是很多相关的问题在实际面试的时候没有回答出来，导致所谓的“亮点”起到了反作用。

今年的面试，简历里的亮点的主要有这几个，也是受到提问最多的几点：

  1. 带领团队进行 Code Review

Code Review，这个是确实存在的，只不过没有我回答得那么深，但是也差不了多少。我主要是从三个层面回答这个问题：

  • 对于提交规范的检查，因为很多人喜欢在提交代码的时候，非常随意地把一天写的代码一股脑提交上去，这样在后面定位问题的时候，很难找到我们修改的部分。因此，我们制定了一个规范，就是每次提交的时候，按bug单号提交修改的部分，提交信息包括修改的bug单号、修复的版本号、修改内容。后续有面试官提出，可以写一个Git的钩子，让机器去检查。不过后来我也想过，如果是机器检查，也很难完全查出来规范。

  • 对于代码书写规范的检查，这个一般都是使用ESLint工具进行检查，我后面加了一点内容，就是把这个规范放到自动化编译平台上面去，这样每次打包的时候，如果代码不符合规范，就会打包出错。事实上，我的第一家公司就是这么操作的。

  • 对于代码文档、注释方面的规范，这个是需要把每个人写的代码投影出来，主要检查一些方法的注释是否规范，一些复杂的业务逻辑是否画了流程图，一些需求文档的地址是否写在README里面，等等。

    这个问题我个人觉得自己的发挥还是不错的，算是一个加分项。

  1. 负责维护前端组件库

    • 是否是从零开始开发

    • 开发一个公共组件的思路和注意事项

    事实上，我不太清楚面试官问的重点和目的在哪

  2. 负责招聘面试

    • 面试的时候主要关注哪些点

    这个只有少部分的面试官问到了这个问题

基础知识的掌握

  1. 闭包以及闭包的作用

    • 直到这次面试官问这个问题之前，我都不是很确定这个问题到底要如何回答。这次面试官问了这个问题之后，我又查了一些资料，进行了更深层次的理解，终于有所收获。

    • 关于闭包，网上有一句话值得我深思：如果你觉得一个概念很难理解，那一定是因为你理解错了。

  2. JS有哪些数据类型，如何进行类型判断

    • 这个问题基本上都是必考题或者基础题，一旦出错，基本上就要告别这次面试了。

    • 后来问了一个Object.prototype.toString.call 这个方法判断数据类型的原理是什么，这个打得我措手不及。

  3. 为什么数字、字符串可以像对象那样去访问属性或者调用方法？

    • 包装对象，貌似《你不知道的JavaScript》中有这个概念

  4. 普通函数和箭头函数有什么区别

    • this指向

    • 后来补充一个，arguments对象

一些代码题

  1. 深拷贝和浅拷贝，以及如何实现一个深拷贝

    • 貌似第一场就问到了这个问题，但是当时我没有任何准备，所以惨败。后来仔细地看了相关方案，发现没有我想象中那么简单。其实不仅仅是要解决问题，更是要说好问题出现的原因和解决问题的过程。

    • 例如，我们平时工作中，可能就只是简单地先stringify再parse，就可以解决项目中99.99%的问题，但是作为面试题，不能仅仅这么回答就完了，我们需要一步一步朝着完美方案去靠近。比如，我们之前的方案，一些特殊类型的数据，例如数组、日期，就会在转换的时候就会出问题，为了解决这个问题，我们需要换个思路，比如使用遍历对象的方式，如果待遍历的数据是个对象，就递归调用这个方法，否则，就把这个属性进行赋值操作。其实递归调用一般我们也都能想到，但是还有一个问题就是循环引用，比如对象的一个属性值是这个原始对象本身，我们如果不处理这样的情况，就会出现递归死循环的情况，所以我们需要一个空间，把拷贝过的对象存起来，每次拷贝对象之前，看看这个对象有没有存过，可以使用ES6的Map或者WeakMap。

    • 其实面试官在问我深拷贝之前，还问了ES6的Map数据结构，没想到这两个问题是有一定联系的。

  2. flat 数组扁平化

    • 这个问题在一次视频面试中被要求现场手写代码，当时也没有看，所以又惨败。

    • 其实实现的思想就是递归，不过也有其他的思路，比如转成字符串，然后把所有的方括号都清除，然后再在左右拼接一个括号，再转成数组。

  3. 数组去重的思路

    • 这个问题我有特意准备过，因为之前的公司有一道笔试题就是这个。当时大多数人都写了用ES6的Set去进行转换，但是我觉得这应该是个算法题，不是方法题。

    • Set 数据结构

    • 循环数组，把数组push到一个临时数组里，push之前需要判断一下当前数据是否已经存在于临时数组里

    • 循环数组，判断每一项第一次出现的位置是否等于当前的位置，如果不等于，就需要剔除这条数据。

    • 利用对象的key是唯一的这个特性，把数组的每一项都变成一个空对象的key，但是这种方式也有局限性，就是对象的key只能是字符串，因此我们为了解决这个问题，需要去使用ES6的Map数据结构，使得其他类型的数据也可以作为Map的key，并且是唯一的，这样就实现了去重。

  4. CSS 实现子元素相对于父元素水平垂直居中

    • 这个也是我平时喜欢问的问题，所以就没有问题。

这一类题目，只能平时慢慢积累了。

常用框架相关

  1. typeof JQuery/Vue/React 分别是什么

    • 这个是我遇到的最特别的问题，通过JQuery和Vue的使用方式，我知道它们的写法是和函数一样的，所以知道这两个是function，但是React我不是很确定。根据用法，我们一般都是写React.Component，所以应该是object。

    • 然后还问了一个class A{}，然后typeof A，我也不是很确定，最终尝试一下，是function，后来编译了一下class，最后确实是个function。

  2. 双向绑定和单项数据流

    • 其实对这两个的概念我一直都很模糊，直到有个面试官解答了这个问题。

    • 双向绑定和单项数据流，是两个不同的概念。

    • Vue、React中都有单项数据流，就是改变数据或者调用setState的时候，DOM也会跟着去更新。

    • 双向绑定，拿Vue来说，就是Vue提供了一个语法糖，用v-model的写法，使得我们在输入的时候，改变了DOM，同时也改变了数据，本质上，我们可以使用oninput去监听输入然后进行赋值操作。后来问到如果我们不想用oninput，要怎么做，这个因为平时我对此没有什么了解，所以惨败。

工程化

  1. Webpack相关

    • webpack里面有哪些接口

    • 如何减小代码压缩的体积

貌似只有最开始的一家公司问了好多关于Webpack的，我完全招架不住。

  1. 其他

    • 主要讲了一下自动化编译平台里面的一些东西

计算机网络

关于计算机网络，大部分都是第二轮 CTO 或者技术主管的面试会遇到。

  1. HTTP的状态码：304、401代表什么

    • 经过一次面试之后，我就把《图解HTTP》简单看了一遍，把一些比较关键的东西记了一下

  2. HTTP缓存有哪些方式，是否了解协商缓存

    • 第二轮面试经常会被问到的问题，也会和其他问题关联在一起，比如性能优化的方案，关于缓存，请求头等等

  3. HTTP请求头有哪些

  4. HTTP2.0 相比于 HTTP1.1 做了哪些优化

    • 也是图解HTTP里面可以找到的，只不过平时工作不会去注意这方面的东西。

  5. 项目部署的更新机制，增量更新，缓存入口等等

    • 这些其实都是和平时的工作密不可分的，要充分理解平时的工作内容，就算自己不参与平台的建设，也需要稍微了解一下。

简单总结

  1. 面试前的准备很重要，问的东西会比较全面，很多知识可能是盲区，但是也需要去了解一下，不要无话可说。

  2. 盲区之所以叫盲区，是因为我们自己意识不到。所以我们可以通过各种各样的面试练习去找到我们的盲区。

  3. 基础知识的积累很重要，有些非常底层的东西，如果深入了解，可能会有其他发现。

  4. 平时的工作，过程很重要，或许平时我们工作的时候注重的是结果，但是面试的时候，拼的是我们工作的过程。对过程的理解（不是了解），理解平时的一些操作的原因和原理。

  5. 心态很重要，我们可能会经历很多挫折，没有人喜欢失败，但是面试总会经历很多失败，有时候甚至会怀疑自己，但这些，都是磨炼，不是折磨，我们要正确面对和认识我们所有的经历，从中获得提高。