记一次巨人网络的一面(二面稍后更新)
笔者最近也是因为一些个人问题选择了跳槽, 巨人网络的内推, 来了一面的视频面试, 面完了以后想着自己也想写个面试模块, 把自己的一些面试经历遇到的问题都总结一下, 也希望能够给大家提供一些帮助
基本上是真实对话还原, 所以字会比较多
面试官:
付金权你好, 我是巨人网络xx事业部的前端工程师,也是此次的一面面试官, 我叫xxx。
我:
你好。
面试官:
用三分钟简单介绍一下自己吧
我:
略
面试官:
好的, 收到, 这边我看你简历上有写道你熟悉vue全家桶和react全家桶, 那么你怎么看待这vue和react呢
我:
vue作为国内比较火热的框架, 他拥抱web标准, 利用html模板 + js + css进行组件化开发, vue的语法糖较多, 因此侵入性也较强, 不过好在是渐进式, vue在一定程度上简化了前端的开发方式, 但是也失去了一定的灵活性, 同时vue在之前的版本中并没有将core核心库剥离开来, 导致终端局限性比较大, react作为facebook提出的解决UI复杂度的库, 很多人说react是框架, 但是react官网其实宣传的非常的低调, 他们说自己是库, 我也就借花献佛了, react认为js具备更加灵活的操作能力, 所以他们提出了jsx模板语法, 甚至他们认为js, html, css都可以用js完成, 这增加了一定的学习成本, 但是灵活性确实是空前的强大, 包括react将react, react-dom, native等抽离开来, 我个人觉得在开发比较复杂的大型项目的时候, react更加的nice, 而中小型项目vue可能效率会高一些, 总之各有千秋, 针对不同的项目选择不同的技术就好
面试官:
好的, 了解, 如果要你做数组去重, 你有哪些方案呢?
我:
Array.from + Set, 或者自己写一个方法, 大概思路就是利用对象的特性将数组的每一项作为key放进对象, 因为对象不允许出现重复的key, 所以最后遍历对象就可以了, 还有一些其他的方法, 但是我目前能想到的就这两个了
面试官:
好的, 说说预编译和原型吧
我:
预编译是JS的一种特殊现象, 在函数中的预编译大概分为四个步骤: 1. 创建AO对象 2. 找形参和变量声明, 将形参和变量声明的名作为AO的属性名值为undefined 3. 将形参和实参相统一 4. 找函数声明, 将函数声明的函数名作为AO的属性名, 值为函数体, 在全局中创建的为GO对象, 而且并没有找形参这个过程, 其他都一致。 原型是构造函数构造出来的对象的公有祖先, 这个公有祖先上的属性和方法可以供该构造函数构造出来的对象使用, 原型组成的链条叫做原型链, 通过原型我们可以实现继承等方案, 同时大多数的对象最终的原型的都是Object.prototype, 但是也有例外, 就是Object.create(null)。
面试官:
嗯, 好的, 看你简历上有写到设计模式, 能说说你平时开发中常用的设计模式有哪些吗
我:
emm, 其实在近些时间开发中有了react + ts + antD + 其他插件和组件以后, 或者使用vue以后, 自身用到设计模式的概率就比较低了, 因为很多东西都已经是封装好了, 但是我给你举一些我以前的例子吧, 比如策略模式: 在开发中我们没有这么多UI组件库的时候, 我曾经帮公司封装过一个表单组件, 包括规则验证, 定义Validate构造函数, 然后用户想要验证什么要按照我指定的数据结构传递进来, 然后我内部会给出一个validate方法来进行校验, 同时我会内置一个策略对象供validate使用, 最后再提供一个extends方法扩展, 还有就是单例模式, 就是用在公司的广告上的时候, 有时候有些广告进一个新的组件就要创建一次, 这样不太好, 我们就用一个lock锁住, 只有第一次能够被创建, 剩下的全部返回第一次创建的那个实例, 还有就是观察者模式, 我记得之前我有个需求是要监测天气变成雨天, 但是那个天气是随机的, 然后我就给天气的变量设置了getter和setter就可以了, 还有就是装饰者模式, 高阶函数就用到啦,还有代理模式比如图片懒加载啥的, 不过现在确实用的比较少了, 因为库和组件太多了, 帮公司节约效率和时间就基本上都是用现成的npm包了
面试官:
了解, 说说你能够想的起来的操作数组的方法吧
我:
嗯, 好, ES6之前的话常用的大概有push, pop, shift, unshift, splice, sort, reverse, 这几个是都会改变原数组的, 还有就是slice, map, reduce, reduceRight, filter, forEach, every, some, join, ES6之后的话我想想, findIndex, includes, values, keys, entries, copyWithin, 应该差不多了
面试官:
说说箭头函数
我:
我知道的大概是这些: 1. 箭头函数没有this, 他的this取决于离他最近的父级2. 箭头函数不能当做构造函数 3. 箭头函数没有原型4. 箭头函数不能做generator函数
面试官:
OK, 我看你的vue项目也挺多的, 问你两个vue的问题, 先说说路由守卫吧
我:
好, 首先就是全局守卫,写法是router.beforeEach 一般是直接写在router.js中, 他是全局环境下发生任何的路由跳转都会触发他的拦截, 他接收from , to, next三个参数, 如果不用next就没办法跳转, from代表从哪里跳转的信息, to代表要去向哪个路由的信息, 我们一般在这里做是否有登录的校验, 然后还有就是路由独享守卫, 就是写在router的routes配置中的, beforeEnter, 功能和全局守卫差不多, 只是他只为配置了beforeEnter的组件生效, 还有就是路由内部守卫, beforeRouteEnter和beforeRouteUpdate, 还有一个beforeRouteLeave, 参数都是一样的, 一个是进入, 一个是更新, 一个是离开, 好像2.5以后还出了一个beforeResolve, 我还没怎么去看
面试官:
组件间的传值方式有哪些呢
我:
父组件像子组件传值的话可以用props啊, 子组件像父组件的话可以用$emit, 还有就是兄弟组件可以使用eventBus, 然后一些多处要共享的数据我们可以使用vuex, 根据需求来
面试官:
OK, 说说你知道的Css3新特性吧
我:
emm, 1. 新的选择器: 关系选择器如E > F, E + F等, 伪类选择器如: E:first-of-type, E:first-of-child等,伪元素选择器如E::selection, E::placeholder 2. 背景的新操作: 如径向渐变和线性渐变, backgorund-origin等, 3. 边框的新操作: 如border-radius, border-image等, 4. 阴影: box-shadow, 5. 文字处理: 如text-shadow, white-space, text-overflow等 6. 动画过渡: 如transition, animation等 7. 变幻: transform的rotate, scale, translate等, 8. 3D: perspective景深, transform-style等 9. 响应式布局啥的, 这会儿可能比较紧张, 能想起来就这些了
面试官:
OSI七层网络模型有了解吗
M：
以前看过, 但是印象不太深了, 数据链路层, 物理层, 应用层, 表示层, 传输层, 会话层, 网络层, 好像是这些, 但是具体的功能已经没啥印象了
面试官:
好的, 我看你简历上有提到你对web性能优化比较看重, 那么你在过去的项目中是如何提升项目性能的呢
我:
好, 1. 第一个就是编码优化, 在JS中我们访问一个越远的变量, 消耗的性能就越长, 比如就算在for循环中, 我也建议for(let i = 0, len = arr.length…), 这样先把length保存下来, 就不至于每次都去作用域链上找了, 还有一个就是要尽量减少对页面的重排, 比如就算Vue和React帮助我们进行了虚拟dom, 我们依然也要注意在控制频繁出现消失的组件的时候不要直接卸载而是用隐藏的方式, 包括一些细节就是避免用for…in因为他涉及到枚举这块, 还有就是动态加载组件和按需加载UI库, 还有就是避免直接操作dom和减少http请求之类的 2.就是实际的技术层面, 比如使用节流防抖, 事件委托, 或者懒加载预加载这类比较常用的技术来提高页面的性能 3. 就是构建优化如压缩, treeshaking等, 不过webpack已经帮助我们做过这些了4. 就是页面方面, 跟美工商量用上雪碧图啊, 使用webp格式的图片啊之类的都可以提升性能
面试官:
你知道的跨域手段有哪些？
我:
目前用的最常用的就是webpack代理跨域, 还有就是jsonp跨域, 其他的我以前看过, 但是不太记得了比如iframe, document.domain, websoket好像也说过跨域问题
面试官:
cookie, localStorage, sessionStorage有什么区别？
我:
cookie有存储的大小有限制大概4kb左右, localStorage是除非被清除否则是持久缓存, sessionStorage在关闭页面或者浏览器关闭就没有了, cookie一般是与服务器通信的时候用（比如保存用户登录状态）, 而另外两个基本都是由客户端保存
面试官:
在react中, 我在类组件中同时调用两次setState给一个number变量 + 1, 最后的结果是什么？ 为什么是这样？
我:
最后的结果是分情况的, 如果是通过事件或者异步调用的, 那么结果肯定是1, 如果是同步调用的, 结果是2, 因为setState在事件或者异步中会会异步执行, 如果想解决这个问题, 就永远不要相信setState, 可以在setState的第二个参数回调函数里进行第二次更改
面试官:
谈谈redux？
我:
redux是react社区出品的一个数据解决方案, 前身是flux, 他最主要的东西就是state和reducer, state为状态, reducer为处理函数, 我们并不能直接更改state, 比如通过reducer更改, 而调用reducer又必须使用dispatch来分发, dispatch是由redux提供的一个createStore的api来创建的store对象中附着的一个方法, 我们用dispatch触发reducer, reducer更改state的数据, reducer接收一个action作为参数, 而且action又必须是一个平面对象, redux也只能接收同步操作拒绝异步操作, 同时我们可以通过redux中间件来扩展redux的功能, 从源码上来讲, redux最基本的api有几个比较重要的api, 分别是createStore, bindActionCreator, combineReducers, applyMiddleWare, 如果您感兴趣的话, 我可以跟您交流一下关于这几个核心api的原理和思想
面试官:
以后会有机会的, 我还想问你最后一个问题, 说说你比较了解的数据结构和你了解的算法
我:
好, 数据结构的话队列(先进先出), 栈(先进后出), 数组, 链表, 树, 拓扑结构等, 我目前能够知道的算法的话, 冒泡排序, 选择排序, 快速排序, 树的广搜, 树的深搜, 链表的逆转, 链表遍历, 大概就这些了, 其他的不太记得清了, 算法确实是我的短板, 因为业务不太偏向于这边, 但是未来我希望自己的算法能够得到进一步的提升
面试官:
行, 咱今天就到这里, 如果过了的话两到三天会给你通知
我:
好, 感谢面试官