JS一次前端面试经历记录

本文实例讲述了JS一次前端面试经历。分享给大家供大家参考，具体如下：

最近公司在做一些战略调整，部门有不少老员工前辈们都陆陆续续的离职或者被离职了。而我所在的团队——网易菠萝，也被归并到游戏运营中心了。因为产品策划还没有出来、暂时没什么需求做，闲得有点e-g-g疼的，每天从早到晚都是待在公司看看书、刷刷知乎等。我真是命途多舛啊，还没有真正步入社会，就见证了一个上百人的事业部说没落就没落。甚至已看破红尘，连参加省公务员考试的计划都做好了。这可不是开玩笑的哈，已经在报名费和复习资料上花了两三百块啦，只是因为思想觉悟比较低，始终还是对政治没有兴趣，那几本复习资料到现在还没翻过一页。几天前，一哥们儿说他们公司（CVTE）有个春季校园招聘，叫我可以去试试。这里先补脑一下CVTE是个怎么样的公司哈，它在广东这边也算是小有名气的，主要原因是它的薪酬比BAT还要高出不少，传说毕业生月薪已经15K左右，而且一年还有16-17薪。加上它的校招宣传非常给力，广东高校计算机专业的同学应该对它都有耳闻过，其他省份的同学可能就比较陌生，不过外界对这个公司的评价并不怎么好，有兴趣的可以自行到知乎看。因为CVTE的薪酬确实很吸引人，所以我也有点儿心动哈。不过当时已经过了笔试时间，而且还不能霸面。幸好我那哥们儿和HR姐姐还算熟，而且我的简历写着有NAT实习经历，也就顺利的获得了面试机会。


昨天（2月8号），我还是按照平时的时间8：00起床（因为公司9：30上班）。一打开手机，就看到了推荐我去CVTE的哥们儿在微信发了好多条信息，他说已经和HR说好了，让我8：30之前赶到黄村地铁站坐CVTE面试班车过去面试。我的天呐，我本来只是开玩笑啊，想不到这哥们儿是认真的。毕竟他也是好不容易才帮我争取到了面试机会，放他飞机可不太好啊啊。所以，七手八脚的穿上衣服、鞋子，没来得及刷牙洗脸就骑上ofo直奔地铁站去了。这几天的广州下着冷冷的春雨，早/上的气温也就10度左右。我当时只穿件衬衣，真是冷得发抖啊。
还好，8：25就到了黄村地铁站，然后从C出口一出去就看到了白色的CVTE班车。当时车上已经有10来个人。但是，后来因为要等一个睡过头的家伙，到了8：50老司机才开车。CVTE给我的感觉是挺人性化的，竟然愿意为了一个迟到的考生等待了20分钟。
大概坐了40分钟的车程，就到了广州罗岗CVTE园区了。一下车，眼前就是金碧辉煌的传说 中的CVTE大厦。不知道是因为这里的纬度比学校高、还是因为这里山比较多，反正气温真的比学校要低了好多，我全身都在颤抖。下车大概等待2分钟，HR姐姐就下来带我们到楼上去面试了。等候区和面试区是同一个会议室。当时有2位HR姐姐、6位面试官（4个一面的、2个是二面的）。刚刚坐下来，HR姐姐就说先上4个同学到前面来面试。我当时第一个上去的。尴尬的事情这时候发生的，面试官哥哥问了我手机尾号4位数字，然后他输入了几遍都找不到我资料。于是叫来了HR姐姐问是怎么回事，这时候HR姐姐才恍然想起来我是没有笔试、直接来面试的，赶紧把我拉到一个角落，叫了另外一个同学上去面试。她问我带简历了没有，我说没有。然后面对面加了微信，并把很久以前做的一份电子简历发给了她。然后就叫我回到座位去等待。

一面

大约过了30分钟，HR姐姐叫我上去第一轮面试。这时候因为太冷，我全身都在发抖啊。面试官好像看到我在发抖，然后就说不用紧张哈、放松点儿。大哥啊，我这是冷啊不是紧张 啊、没有看到我才穿一件衬衫吗。然后，他先让我做了简短的自我介绍。然后就开始进入正题了，下面是当时被问到的一些问题：

  1. JS有哪些手段可以实现继承？
  2. 说说JS的闭包？
  3. 用纯JS实现，点击一个列表时，输出对应的索引（不能用JQuery哦）
  4. CSS实现矩形按钮右边缘的中间有个往里凹的小半圆，如图：
  5. 为什么用vue而不用NG或者React？
  • 第1题，这可简单啦，JS主要有借用构造函继承和原型继承以及两者的组合。不懂的可以看看《JS高教》
  • 第2题，不懂的自行补脑去
  • 第3题，可能面试官的意图也是想考察我们能否熟练掌握闭包吧。如果有刷过面试题的同学可能一下子就会做出来，但是，如果经验不足的同学可能会写出如下的代码：
<body>
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
    <li>test6</li>
    <li>test7</li>
    <li>test8</li>
    <li>test9</li>
    <li>test10</li>
  </ul>
  <script>
    var lis = document.querySelectorAll('ul li');
    for(var i = 0, len = lis.length; i < len; i++) {
      lis[i].addEventListener('click', function () {
        console.log(i);
      }, false);
    }
  </script>
</body>

你运行一下代码会发现，无论你点击哪个列表，控制台都是输出10。这是因为var声明的变量是函数作用域的，而不是块级作用域的。也就是说，for循环10次，每次都是改变同一个i，所以它的值会从0一直加到10。还有个问题是闭包导致的，闭包保存的是外部变量的引用，而不是值。也就是说，循环10次监听器创建了10 个闭包，它们里面的i引用的是同一个啊。所以全部都指向了10.
要解决这个问题有两种方法。一种是使用ES6的let来替代 var i = 0 里面的var， 因为let支持块级作用域。改成如下就正常了。

    for(let i = 0, len = lis.length; i < len; i++) {
      lis[i].addEventListener('click', function () {
        console.log(i);
      }, false);
    }

还有一种方法，就是很多经典书本都提到的，使用立即执行函数来切断闭包对外部变量i的引用：

    for(var i = 0, len = lis.length; i < len; i++) {
      (function (i) {
        lis[i].addEventListener('click', function () {
          console.log(i);
        }, false);
      })(i)
    }

当然啦，如果对闭包不是很熟练，还可以通过事件委托来避开这个陷阱哈，代码如下：

    var ul = document.querySelector('ul');
    var lis = document.querySelectorAll('ul li');
    ul.addEventListener('click', function (e) {
      var target = e.target;
      if(target.nodeName.toLowerCase() === 'li') {
        console.log([].indexOf.call(lis, target));
      }
    }, false);

使用了事件委托，减少了监听器的绑定（只对列表的父亲元素监听），这种方法说不定还会加分呢。哈哈，我当时就是用这种方法来实现的，面试官可能觉得我的解法有点不寻常、顿时一脸蒙B，甚至还一度怀疑 console.log([].indexOf.call(lis, target)) 这段代码是不是有问题。直到后来我直接在他的笔记本跑了一遍，他才相信是正确的。

  • 第4题，因为面试官说要通过伪元素来实现，我的CSS本身就不咋滴，只知道好像用到了CSS3的border-radius，但是要使用伪未元素我还真心不会哇。所以当时就直接说不会做，现在也不会。请CSS大神在评论区发一下代码哈~
  • 第5题，主要谈框架相关的。因为目前的情况是，React才是主流，很多团队都在用React，CVTE也不例外。他似乎很关心我为什么要使用vue。我当时给出的理由是：NG1脏值检测性能太低并且相对过时，NG2目前又不够成熟，React的JSX语法个人不太喜欢，而vue比较轻量级、并且支持jade模板（ 我们旧项目是使用jade模板写的，迁移会相对容易）。然而，接下来便遭到了面试官的连续挑衅，说我用vue不会是因为它的中文文档比较齐全吧（鄙视我英文差？？？）。还说vue是不适合做大型项目。最后一句更狠：你们使用vue真是最愚蠢的选择。（我当时心里真的有一万只草泥马在奔腾）
    其实，我个人觉得，框架并没有好坏之分的，每个框架必然有它存在的理由。React也好，NG也行，Vue也罢，萝卜、荷兰豆各有所爱嘛。反正，面试官说的那些话我真的听得挺反感的。
    话又说回来。问完了第5个问题之后 ，面试官说面试就此结束，让我回到座位休息。
    CVTE对于考生的招待真的挺周到的，桌面上有水果、零食、饮料等等。因为当时手机快没有电了，所以，就坐在那里边吃水果边看其他人面试。

二面

然后，等待了一个多小时，轮到了二面。面试官大概三十多岁，可能是前端组长或者技术总监之类的职位吧。
他主要是问到了下面的这些问题：

  1. 说说JS的内存机制及垃圾回收机制
  2. 下面的代码有内存泄漏吗
var user = {name: 'tom', age: 20, gender: 'male'}
var test = document.getElementByid('test')
test.onclick = function() {
 test.innerHTML = user.name;
}
// ...后面还有很多其他操作，最后把user对象释放掉
user = null; // 释放对象
  1. 实现一个算法，寻找字符串中出现次数最少的、并且首次出现位置最前的字符
    如"cbaacfdeaebb"，符合要求的是"f"，因为他只出现了一次（次数最少）。并且比其他只出现一次的字符（如"d"）首次出现的位置最靠前。
  2. http和tpc的关系，以及什么是https
  3. Node的特点（优点和缺点）
  4. 你在腾讯和网易实习期间学到的东西？
  5. 未来三年的职业规划

至于二面的问题都不是很难，下面简单的来看一下：

  • 第1题，基本类型（number, string, boolean, null, undefined, symbol）是在栈的，而其他的引用类型都是在堆的。垃圾回收是采用了计数引用法（如果两个对象之间存在循环引用时，会有内存泄漏，因为计数无法变为0 ）这里写错了，误导了大家，不好意思哈。JS使用的是标记清除法。原理可以看看《JS高教》第三版的78页。
  • 第2题，有内存泄漏，这是闭包本身的问题。完全消除闭包的内存泄漏是不现实的，但是，如果采用下面的方法可以减少内存泄漏：
var user = {name: 'tom', age: 20, gender: 'male'}
var test = document.getElementByid('test')
(function (name) {
  test.onclick = function() {
    test.innerHTML = name;
  }
})(user.name);
user = null;
  • 第3题算法题，也不很难，大家可以自己试试去实现 ，如果做不出来的再到评论求助啦，这里就不贴出代码了。
  • 第4题，考察了计算机网络的tcp三次握手以及http的请求头等。https是使用安全套接字进行加密的，可以说HTTPS = SSL + HTTP。
  • 第5题，Node的特点是异步非IO阻塞、适合高并发，但不适合密集型计算
  • 第6、7题都是主观题，可以随便吹一下水便好。

因为当时已经是饭点时间，面试官也有点急着去吃饭，就没有再问我问题了。


二面面完，已经是中午12点多了。我那哥们儿鹏哥已经在门口等着我一起去饭堂。CVTE的饭菜不错，自助餐，但是，那个碗有点小，没打多少就装满了。饭堂里，公司的人挺热情的，因为背着书包大家都知道我是来面试的，就会问我一些问题，或曰“你来面试什么岗位啦”，或曰“你是本科生还是研究生啦”。。。反正就是挺热情的嘛。打好饭菜刚刚坐下来，还没有吃几口饭，鹏哥说刚刚接到HR消息，班车马上就要开走了，要我快点吃。我下午还要回来公司上班，在这鸟不拉屎的地方如果错过了班车，后果有多严重可想而知的。于是我就干脆不吃了，直接把饭菜倒掉，直跑楼下坐班车。刚刚上车，司机就开车了，驶向香雪地铁站。再见了，CVTE！

后记

首先说一下这次面试的水平吧，其实，从去年9月到现在，我已经有大半年没有参加过任何面试了，很多基础和面经宝典也忘记得差不多了。另外，本来并没有打算来面试的，只是和鹏哥开了个玩笑而已，结果弄假成真，他都已经帮我去找HR安排好了。所以也不好放人飞机嘛！如果不去这不是在搞人家吗？这是第一次面试CVTE，以前听人说CVTE对算法要求比较高、面试相对是比较难的。这次自己反而没有怎么被问到算法题目。面试题目还算正常、难度还可以接受。关于对CVTE的评价，就不好下结论，因为毕竟就只是去面了一个上午试而已，不够了解这是个什么样的公司。不过，总的来说，从有班车接送、到面试时有水果饮料、再到面完试带考生去饭堂吃饭，我觉得CVTE是个还不错的公司呢！至于面试结果，现在还没有出来哈。也许过了，也许挂了，谁又知道呢？

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 前端面试知识点锦集（JavaScript篇）

    前端面试知识点锦集（JavaScript篇）

    JavaScript部分 1.谈谈你对Ajax的理解?(概念.特点.作用) AJAX全称为"Asynchronous JavaScript And XML"(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效果. 优点 a.不需要插件支持 b.优秀的用户体验 c.提高Web程序的性能 d.减轻服务器和带宽的负担 缺点 a.浏览器对XMLHttpRequest对象的支持度不足,几乎所有浏览器现在都支持 b.破坏浏览器"前进&qu

  • 一道JS前端闭包面试题解析

    问题 代码A function fun(n,o){ console.log(o); return { fun:function(m){//[2] return fun(m,n);//[1] } } } var a=fun(0); a.fun(1); a.fun(2); a.fun(3); var b=fun(0).fun(1).fun(2).fun(3); var c=fun(0).fun(1); c.fun(2); c.fun(3); 求出程序输出 这是一个闭包测试题 转换为等价代码 retu

  • Javascript前端经典的面试题及答案

    前言 如果面试题按类型来分,主要涉及到"技术"与"非技术"两大类,技术类别下涉及到的子类别有: 移动 & PC端布局类 JavaScript 核心基础类 衍生框架类 项目应用类 这四大类别的面试题若按出现频率来划分,则面试时 100% 会问到的题型有:"移动端&PC端布局类.JavaScript 核心基础类".本次选择这两类中难度更高一些的 "JavaScript 核心基础类" 面试题,进行了分析和解答,供面试

  • 一道常被人轻视的web前端常见面试题(JS)

    一道常被人轻视的web前端常见面试题(JS)

    面试题是招聘公司和开发者都非常关心的话题,公司希望通过它了解开发者的真实水平和细节处理能力,而开发者希望能够最大程度地展示自己的水平(甚至超常发挥).本文提供了众多前端开发面试题,无论是招聘方还是应聘方都值得一看! 前言 年前刚刚离职了,分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过于轻视他. 题目如下: function Foo() { ge

  • js前端面试题及答案整理（一）

    Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function(){ var result = []; this.forEach(function(v){ if(result.indexOf(v) < 0){ result.push(v); } }); return result; } •利用hash表去重,这是一种空间换时间的方法 Array.prototyp

  • js前端面试之同步与异步问题详解

    js前端面试之同步与异步问题详解

    前言 我本来是打算写一篇co源码精读(为啥读co,因为它短),然鹅发现自己存在一系列基础问题没有搞透彻,打算写一个js基础系列文章,总结自己的理解(copy),希望与你在学习路上一同进步.首先问问自己当面试官问到js中的同步和异步,这个问题该怎么回答?理解一个问题无非是what-why-how js同步和异步问题是什么-->为什么会产生异步问题-->如何解决. 一.JavaScript起源 技术的出现,和应用场景密切相关的.JavaScript诞生于1995年.当时,它的主要目的是处理以前由服

  • 前端JS面试中常见的算法问题总结

    前端JS面试中常见的算法问题总结

    前言 学习数据结构与算法对于工程师去理解和分析问题都是有帮助的.如果将来当我们面对较为复杂的问题,这些基础知识的积累可以帮助我们更好的优化解决思路.下面罗列在前端面试中经常撞见的几个问题吧. Q1 判断一个单词是否是回文? 回文是指把相同的词汇或句子,在下文中调换位置或颠倒过来,产生首尾回环的情趣,叫做回文,也叫回环.比如 mamam redivider . 很多人拿到这样的题目非常容易想到用for 将字符串颠倒字母顺序然后匹配就行了.其实重要的考察的就是对于reverse的实现.其实我们可以利

  • 「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）

    「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）

    1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Prototype]](也就是__proto__)链接. 它使this指向新创建的对象.. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用将返回该对象引用. function New(func) { va

  • BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined, Null 引用数据类型:Object(Array,Da

  • JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

    JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

    本文实例讲述了JS前端面试必备--基本排序算法原理与实现方法.分享给大家供大家参考,具体如下: 排序算法是面试及笔试中必考点,本文通过动画方式演示,通过实例讲解,最后给出JavaScript版的排序算法 插入排序 算法描述: 1. 从第一个元素开始,该元素可以认为已经被排序 2. 取出下一个元素,在已经排序的元素序列中从后向前扫描 3. 如果该元素(已排序)大于新元素,将该元素移到下一位置 4. 重复步骤 3,直到找到已排序的元素小于或者等于新元素的位置 5. 将新元素插入到该位置后 6. 重复

随机推荐