关于第一天的前端面试经历总结.... ——当天被告知未通过

两日前，发了一篇吐槽，莫名的火了一把。经过大家的建议与鼓励，于是修改了简历，开始了重新投递，2天后接到第一份面试邀请。

此文为个人面试经历，QA问答过程与总结，不透露面试公司及面试人员，内容真实，如果有面试过我的大佬看到博客，欢迎指出问题，希望对一些找工作中的朋友有所帮助。

循序可能有点乱，没记太清。

1.面试时间 2017.2.30下午两点——公司薪资6K

  • Q：请先做一下自我介绍
  • A：barbarbar，然而顺便谈了下自己的学习经历，讲了下自己在写的项目啥的。
  • Q：谈谈你对闭包的理解。
  • A：关于闭包，我个人的理解用一句话概括就是：一个函数在父级函数执行完毕后，如果任然留有对父级函数内部变量（作用域）的引用，那么就会建立闭包，我个人对闭包就是这样的看法，如果有什么错误，请务必帮我订正....

原文出自js面对对象编程指南P88：如果一个函数会在其父级函数返回之后，留住对父级作用域的连接的话，相关闭包就会被创立起来

  • Q：谈谈你对ES6新的声明变量的方式的一些看法

  • A：关于这个问题，新的方式，比较有趣的就是所谓的暂时性死区什么的，简单的来讲吧。关于的第一个const，其实就是声明一个常量，不允许变更。另一个let，就是零时变量，或者说是局部变量（这两个都属于局部变量），能够由中括号直接产生一个零时的局部作用域了，而不必使用以前的立即执行匿名函数了，let非常适合在for循环之类的场景中使用，不再需要使用迭代函数就能获得当前的变量了，对比var来看，新的这两个变量声明都不会在执行时被提升，并且编译速度比var更快。

  • Q：你说const声明的是常量，不能被改变喽？

  • A：const声明的的确是常量，只不过是字面量常量不能被改变，如果是对象类型的话，是引用，对象的属性被改变是无法被检测到的，就像vue中，父子组件中通信，以及数据，如果是对象属性被改变，是无法被检测到的。

  • Q：你说Vue中如果对象属性被修改无法被检测到，那么你有什么解决方案？

  • A：这个，其实我觉得最好的解决方案就是严格遵守vue的理念，父子组件通信时不去修改什么对象属性，对象数据的属性，非要改动添加的话：使用（Object.assign() 或 _.extend()）面试时，没想起来单词怎么拼.....

关于对象属性的的修改的方法，有兴趣的可以了解下，Object.defineProperty（vue好像就是基于它实现的双向数据绑定，还没读源码，不清楚楚），Object.assign是把属性添加到对象的方法。

  • Q：关于数组去重复你用什么方法？

  • A：因为目前我自己都是使用ES6 + Webapck2的方式写的代码，所以用的是Array.from(new Set(arr)或者[...new Set(arr)]的方式去重，原理是，用了set类型，允许重复的值得特性，然后使用from方法或者解构的方法来得到数组，关于其他的方法的话，有太多了，比如什么循环去重，什么迭代（reduce）啥的，我就懒得讲了，因为真的太多了。

  • Q：你提到了Set类型，那你讲下对Es6里 Map 类型的看法。

  • A：关于这个Map啊...（犹豫了一下）说实话，我没怎么去使用这个新的类型，毕竟怎么说好呢，目前我是将Map当成一个嵌套数组看待，毕竟Map和对象相比，只是比对象多提供了一个迭代用的接口，并且据说速度会比对象访问属性更快一点，现在来说，实在是没有什么使用场景，常用的一些工具函数，比如下划线.js和lodash.js(不知道单词是否拼错)，暂时都还没有提供对map的方法，但对象却有千千万的各类方法，并且，map能够实现的对象类型也能够实现，比如迭代对象可以用for (let [k, v] of Object.entries(obj)) ，哦，最后一点差异就是允许key使用数字。不知道你有啥其他的看法嘛，或者知道map的一些使用场景，可以和我分享一下。

楼主只用过下划线.js...对于loadsh.js没提供是猜测的。另外对象迭代这里出自，阮一峰大神写的ES6入门指南，对象篇。完整的是：

let obj = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj)) {
  console.log(
    `${JSON.stringify(k)}: ${JSON.stringify(v)}`
  );
}
// "one": 1
// "two": 2

  • Q：关于new一个对象，你讲一下，具体是怎么实现的？

  • A： 什么？new一个对象，额，这个不就是一个构造函数，然后new一个新的对象嘛，还能有什么流程嘛。不太清楚，你具体问的内容哈，你是问，构造函数内容的执行逻辑原理还是啥？

  • Q：那你谈一下对于原型的理解

  • A：原型啊，从哪里开始讲呢，我之前好像写过篇关于原型的博文，要不看看博文？毕竟在我看来，这方面内容太广了，一定要讲的话，可以说，（比面试时稍微把逻辑更通一点，面试时太紧张逻辑有点乱）原型自身就是一个对象，有自己的属性与方法，默认情况下是有一个指针指向原型的构造函数，构造函数也有个指针指向自己的prototype...然后由构造函数new出来的对象，在原型链上默认指向构造函数指着的原型。。。好吧，我编不下去了，说真的，这玩意我得有个图或者纸才好演示啊。。要不你给我张纸，我画个图？

廖雪峰大神写的教程非常棒，推介一下：http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014344997013405abfb7f0e1904a04ba6898a384b1e925000

  • Q：既然你原型不懂，那就谈谈原型链吧？

  • A: (心里活动：原型我得有纸才能演示，原型链，不得更需要纸吗)，啊，原型链啊，我之前真的自己写过篇关于原型链的整理，能给你看下博客吗？...你让我凭空讲...好吧，大概原型链就是...说实话，我现在用的都是Es6的class方法，虽然class也是基于原型链的语法糖，但是简单方便啊，所以我这段时间都都没怎么关心原型链的，毕竟原型链继承在js面对对象编程指南里写了十几种方法啊...我这人，有时候喜欢简单高效的东西，就像数组去重，我都用set，只有遇到一些相关问题，我才回去找新的解决方案。（后面把十几种方法拍张照给大家观摩观摩，虽然有些不是基于原型的）

  • Q：你说你都是遇到问题再去解决，那你谈谈移动端一像素问题你是怎么解决的？

  • A：移动端一像素啊，简单来讲，就是设置个伪类，然后响应下屏幕的dpr，用css3的缩放进行解决。用一些预处理器写个mixin函数就能解决。

  • Q：有其他的解决方案吗？

  • A：这个老实说，还真没研究过，在前面我提过，很多东西我都是遇到问题然后去解决的，如果目前有最优解决方案，我为啥要去用其他的，比如目前移动布局我用的就是flex布局，我感觉兼容性也不差。。。当然，主要原因也在于我没啥工作经验。

顺手再推一波阮一峰大神的flex教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

  • Q：你有使用过css预处理器吗？

  • A：目前在使用stylus，less也有接触过，stylus我主要喜欢无需括号，以及变量或者函数不用加什么奇怪的前缀

  • Q：对于手机应用你有过了解吗？

  • A：如果指的是混合开发的webapp手机应用，我最近研究过weex，就是阿里去年开源的那个类似react native的，目前正准备写点什么个人项目，但是因为时间缘故所以暂时还是只计划。

  • Q：对于性能优化，你有什么方案？

  • A：性能优化啊，说实话，我目前因为主要都是自己的作品，没遇到过什么特别徐亚哟优化的地方，如果一定要讲的话。。。好吧，我简单讲一下吧，比如不要使用全局变量，因为相比局部变量，全局变量被索引时的速度最慢；不要过多使用闭包，闭包会占用内存；要对闭包中需要递归的地方进行尾递归优化不然容易导致内存泄漏（主要好像是ie下，没有实际测试过），对script标签进行合并，毕竟页面遇到script标签就会停止渲染（主要是因为浏览器不能确定script标签会不会改动dom），在使用ajax时，对一些内容尽量使用get（get默认会保留缓存），额...还有的话，说实话，我来面试前忘了去找份面试指南背，很多东西由于我没有实际的遇到过我并没有太过深入。如果是我遇到过得问题，我详细我应该能够了解。说起来之前拜读过一本叫做js函数式编程指南的..因为内容有点深，就只看了部分。

关于全局变量被索引的速度最慢，出自高性能js...没有实际测试过，闭包内递归要使用尾递归优化，附送上连接，同样是阮一峰大神的：http://www.ruanyifeng.com/blog/2015/04/tail-call.html ，关于 js函数式编程指南连接：https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ （非常赞的一本免费电子书，不知为何，关注的人很少）

  • Q：你提到了ajax，那就谈下ajax吧。

  • A：ajax啊，这玩意其实很简单，主要就是异步的从后端获取数据嘛，搞来搞去也就那么些接口啥的，在初学js时，我为了能响应ajax还简单的学了php，就是后端提供接口，前端用get或者post或者其他方式去请求数据，不会让页面停止运行啥的，目前我在写的项目中接入了聊天机器人，由于跨域问题，就用node做了个中转层，用来转发对机器人api的请求，流程就是前端请求本地的服务器，服务器请求机器api...

  • Q：你对于跨域的解决方法了解多少？

  • A：前端跨域吗，最常用的应该是jsonp吧，后端动态生成script（能够执行的js函数），然后把数据发送过来。或者是用node做个中转层啥的，方法好像挺多，H5也有种新的方案，不过没深入研究。

  • Q：我们这边后端用的不是node，是java，你怎么使用jsonp。

  • A: 啊，java不能返回动态的script吗？我之前学过的php好像行，现在在学的python也行啊。

  • Q：python是什么？

  • A：python就是...它是一门编程语言，当初学node写爬虫时，发现node用模块模拟的多线程本质还是单线程，并且错误处理还麻烦，我还得用进程维护模块去启动...然后上网查，发现都说python好，于是就开始学了些python，把教程简单过了遍，后来因为些事情所以就没怎么碰了。。。。

安利下廖雪峰大神的python教程：http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000

  • Q：那你现在目前在做什么

  • A：目前，有个个人博客在写完成度太低，所以没有开源，后端使用koa2（优雅的async函数才是我的追求，express的嵌套，见鬼去）正考虑前端要不要上个react，毕竟我目前一直在深入Vue2，对同样是Mvvm的react好像没做过啥具体项目。

  • Q：其他对公司有什么想问的嘛？

  • A：barbarbarabr（问了些关于公司结构的问题）

  • 不知道为何，面试当天就被告知未通过，我在想，果然是因为没有背过前端面试题嘛。。。还是原型那里没回答出了问题，对于面试官，一直带着笑容，然而，一些反问的内容均未给出回复。。。全程笑眯眯。。年龄目测比我年长几岁的样子。。
  • 结论：背面试指南。

更新

  • 由于面试失败，并且文章是个人总结，所以总会带有个人色彩，但是实际面试中客气很多，文章中省略了很多礼貌用语.....添了些个人情绪。
  • 经过与一个前辈的聊天，自知自己所学的东西都只是入门，没有一样深入的，所以请不要误会以上内容为....会误会的自行脑补即可Q.o，真的只是实际总结，毕竟该学的东西远远没有学完，生命不息，学习不止。

更新于2017.4.2
目前已经找到了非常满意的前端实习工作，薪资100/天，成功解决房租问题。

posted @ 2017-03-30 21:43  蒋启钲  阅读(4966)  评论(44)  编辑  收藏  举报