前端实习面试汇总

Posted 2021-03-02 baimeishaoxia

最近一直在多看基础的书多码代码准备找实习，在网上也搜罗了不少面经，现在把搜罗到的实习生面试题自己整理一下。

题目来源：前端实习生面试总结
最近开始了几次面试，虽然还不知道结果如何，但是还是要记录下来进行一个总结，同样也希望对正在准备面实习生的童鞋们有所帮助~

javascript

1. addEventListener最后一个参数是做什么用的？
   答：规定事件是冒泡还是捕获。false表示在冒泡阶段调用事件处理程序，true表示在捕获阶段调用事件处理程序。（removeEventListener()一样的）

2. 什么是冒泡，什么是捕获 ？

   答：冒泡是当一个元素触发了一个事件之后就会像上层传递直至document（由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档））。捕获是不太具体的节点（文件document）更早接收到事件，而具体的节点最后接收到事件。

3. 所有的事件都可以冒泡么？
   答：不是，blur、focus、load、unload、abort不可冒泡（每个 event 都有一个event.bubbles属性，可以知道它可否冒泡。详情可看浏览器中有哪些事件会冒泡？）

4. 怎么取消事件冒泡
   答：我这儿的答案错了，谢谢大神指正，大家不要搞混啦
   eve.preventDefault(取消事件默认行为，若cancelable是true，则可以使用这个方法，cancelable属性表明是否可以取消事件的默认行为).eve.stopPropagation()用于取消事件的进一步捕获或冒泡，bubbles为true时，可以使用这个方法。

1. 怎么判断是不是数组

   答：a instanceof Array Array.isArray(a) 他问我还有么~
   所以我说试一下Array的内置函数，可以使用是Array不可以则不是，其实还有 Object.prototype.toString.call(a)=== ‘[object Array]‘

2. 怎么把一个类数组对象转化为数组
   答：Array.prototype.slice.call(arrayLike)；

3. 讲一下继承
   答：继承是代码重用的一种形式，可以显著得减少软件开发成本。在JavaScript中，继承有三种方法：类式继承（主要）、原型式继承（主要）和掺元类。
   类式继承：首先要创建一个构造函数，在构造函数中调用超类的构造函数，并把参数传递给它。下一步再设置原型链，手工将子类的 prototype 设置为超类的一个实例（Author.prototype = new Person()），然后把子类的 prototype 的 constructor 属性重新设为子类（Author.prototype.constructor = Author）。
   原型式继承：不需要用类来定义对象的结构，只需要直接创建一个原型对象，这个对象随后可以被新的对象重用。主要是对超类进行一个浅负责或者说是克隆，这个克隆函数如下

   functon clone(o){
       function F(){}
       F.prototype = o;
       return new F();
   }

   克隆超类后，就可以重定义该克隆中的方法和属性，可以修改超类中提供的默认值，也可以添加新的属性和方法 。但是这个方法对于从原型对象继承而来的成员，其读和写具有内在的不对等性。具体请参照JavaScript 继承

4. Array都有哪些方法呀？
   答：concat,join,pop,push,reverse,shift,slice,sort,splice,unshift.（《JavaScript语言精粹》一书中总结了数组、函数、数字、正则表达式、字符串常用的方法）

5. sort方法工作原理是什么样的？
   答：默认的比较函数把要排序的元素都视为字符串，在比较数字都时候，会把数字都转化为字符串再进行比较。

6. 那如果想要sort排序数字怎么办？
   答： n.sort(function (a,b) {return a-b;}) 升序

7. String有哪些方法呀？
   答：concat charAt slice substr substring 等等（其实现在觉得应该加一句说string是基本数据类型，没有方法，string的方法是String构造函数创建的引用类型的方法~）

8. 那replace方法怎么用的呀？
   答： string.repalce(searchValue,replaceValue)，对string进行查找和替换操作并返回一个新的字符串，参数searchValue可以是字符串或正则表达式对象，如果它是一个字符串，那么searchValue只会在第一次出现的地方被替换。如果searchValue是一个正则表达式并且带有g标识，则会替换所有匹配。

9. 鼠标滑过一个元素出现一个弹出层
   答：就dom 0级来举例子的话是 onmouseover dispaly:block

10. 鼠标滑的快不让他出现怎么办
    答：设置一个setTimeout 当鼠标在上面停留的时间小于设定的时间的话他还没有出来事件就被取消掉了

11. 那setTimeout应该设置多久的时间呢? 这个我不知道有什么约定俗成的时间设置，如果是我的话，应该回去试一下，看那个时间合适

12. 现在我想要这个元素在页面下方是弹出层在上方显示，元素在上方时弹出层在下方显示？ 判断元素距离页面底端的位置，位置大于弹出层的高度的话就在下方弹出，否则在上方弹出

13. 如果我现在想把他做成一个工具给别人用要怎么做？ 呃~首先使用模块化，注意不要和其他的方法什么的有冲突，然后子啊里面设置方法出入所需的参数，比如那个元素，什么事件，弹出层的大小等等

14. 那想做一个好的工具参数肯定很多，你怎么能方便别人使用呢？毕竟参数这么多别人会记不住的 呃~我可能会设置成一个对象，传入对象的属性，这样就方便记住了。

15. 事件代理
    答：详情见JavaScript 事件代理和委托

16. 什么是冒泡什么是捕获
    答：详情见JavaScript 事件代理和委托

17. C++

18. jQuery取到的元素和原生Js取到的元素有什么区别
    jQuery获取到的元素返回的是一个jQuery对象，它是一个类数组对象，属性0,1,2...中存着查找到的DOM对象，这个jQuery对象有length属性，表示查到的DOM的数量。js取到的元素是DOM元素。

19. Doctype的作用
    答：<!DOCTYPE>是声明文档的解析类型（document.compatMode），指示web浏览器关于页面使用哪个html版本进行编写的指令，避免浏览器的怪异模式。详情见：关于DOCTYPE

20. 响应式 我只答了@media

21. setTimeout 和setInterval的区别
    详情见：setTimeout() 和 setInterval()

22. setTimeout时间设为0是否立即执行，为什么？
    不一定，因为JavaScript是一个单线程的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。setTimeout时间设为0，是告诉JavaScript在0毫秒后把当前任务添加到任务队列中。如果队列是空的，则添加的代码会立即执行；如果队列不是空的，则它要等前面的代码执行完后再执行。

23. 构造函数的运行机制

24. this的绑定

25. call()和apply()的区别

26. Js继承有哪些？原型继承是什么样的

27. 解释一下模块化，举例模块化的方法

28. GET和POST的区别

29. 函数声明和函数字面量的区别

30. jQuery的联级有什么好处

31. 渐进增强 优雅降级

CSS：

1. float高度塌陷解决方案：
   clearfix:after{clear:both;content:".";height:0;display:block;visibility:hidden;}(给自己挖了个坑after是伪元素不是伪类，我说错了~)

2. line-height像素单位和百分比的单位的计算方法： length 设置固定的行间距。单位em，px，pt等等。百分比%
   ，基于当前字体尺寸的百分比行间距。（我觉得我答得是对的，但是他有重复了一遍：我说的是line-height）

3. 一个ul里有若干个li，想要每个li都有一个border-bottom，最后一个li不想要boder-bottom要怎么做：(ul:last-child{border-bottom:none;}或者给最后一个li加一个class选择器设置border:none;(他说还有，查了一下什么加载jQuery可之类的~)

4. css 选择器过长怎么判断他的优先级：行内样式1000 -- id100 -- 类、伪类、属性选择器10 --
   类型选择器、伪元素选择器1 通过相加计算大的优先级高，值相等的话后声明的优先级高。

5. 一个div怎么垂直居中呀？ 饿了么说过了~

6. css3你常用的属性有什么呀？ 动画的transform transmation border-radious box-sizing box-shadow

7. 很长一段话要进行截取，超过之后是三个点怎么做？ 不考虑兼容的话CSS3有 text-overflow：ellipsis 然后或者overfloww:hidden 再在边框前侧加入一个三个点的span 或者用伪元素：after{content:"..."}之类的吧

8. position 定位

9. dom操作元素

10. 两列布局

11. inline-block空隙怎么解决

12. 如何平铺一张背景图？ css方法：设置一张图片 {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1;} js方法： 判断浏览器高度，设置图片的高度

13. 如果让图片按比例放大缩小呢？ 用Js来判断宽高，然后按比例放大（面试官说屏幕壁板都是横屏，所以width设置为100%就可以了）

14. css hack

15. 条件注释

16. dispaly的值

17. css3动画的性能优化你知道什么？ 我只答了最好不要使用all

18. BFC，haslayout是什么，怎么触发

HTML

1. 什么是语义化

2. html5 语义化的标签

HTTP

1. http状态码都知道那些

算法（一个都没答上来）：

1. 优先队列

2. 堆

3. 快速排序

4. 数组去重

5. 怎么构造一棵树

6. 十进制数判断有多少位二进制码

项目

1. css3翻书是怎么做的呀？ 巴拉巴拉讲了一堆

2. 你这个翻页有个bug呀，什么原因怎么改呀？ z-index的问题，怎么改布吉岛~

3. canvas绘图怎么做的呀？ 巴拉巴拉讲了一堆

4. 你这个绘制有bug呀，什么原因怎么改呀？ 滚动条的问题，怎么改又布吉岛。。。（加上滚动条的距离，面试官告诉我的~）

版本控制

1. 了解版本控制器么？ 了解一些github

2. 基本操作会么？ 我都用的windows的图形界面进行操作的（面试官心中可能有一万只草泥马在奔腾....）

3. github的工作原理是什么呀？
   我把我的代码上传到github的仓库上，然后别人可以下载进行代码添加然后上传更新仓库，我可以再下载更新过的继续进行添加修改

4. 那如果你们两个修改同一份代码发生冲突怎么办？ 我知道的方法只有回滚，就是和队友交流看谁的代码更重要，然后进行一个回滚操作。

5. 只能这样么，必须有一个人牺牲么？
   我了解到github的功能其实非常强大，所以肯定有更好的方法吗，只是我现在对github的使用仅限于自己代码的存储以及一些小的修改，所以并不了解更好的方法。。。。

其他

1. 你常用的代码编写工具是什么？ sublime text

2. 你要修改很多相同的地方怎么办？ 选中一个 按Ctrl+D 选取多个 然后一起改

3. photoshop怎么样？ 可以进行简单的psd页面图的ps 不会人物风景的美化

4. 想要导出一个文件提及比较小的png怎么做 存储为web所用格式。。。（应该不对~）

5. 性能优化了解多少

项目（这里聊了很久）

1. 给我介绍一下你都做过哪些项目吧？ 巴拉巴拉一堆没有什么特定答案~

2. 你是怎么进行团队项目的合作呢？ 巴拉巴拉一堆没有什么特定答案~

3. 你现在在学些什么呀？ Linux下Qt开发~~巴拉巴拉~

4. 做前端有用不到C++，你学他有什么用呀？ 我不只是一个写前端的，我还是一个程序员，C和C++是这些语言的基础，所以巴拉巴拉~

5. 你最满意的C++程序讲一下？ Qt呀，类呀~什么的~

6. 你觉得淘宝首页有哪些技术优势？
   页面很大，要承载的东西也很多，但是可以让用户清晰明了的找到想要找的东西证明布局做的非常好，然后里面包括图片轮播呀个中点击事件呀什么的事件也很多，所以避免事件冲突也很腻害~

7. 那你觉的你用多久可以写出淘宝首页？ 呃~一个星期吧（这个可真的不知道什么样的答案合适）

8. 你为什么想来淘宝技术部？ 因为技术牛，而且有很多大牛在这个团队里，如果我有机会的成为其中一员的话就业可以学到更多的东西啦~

9. 你觉得你有什么优势可以来淘宝技术部？ 嘿嘿，就不告诉你我是怎么答得~~