前端面试题 + 面试翻车原因分析_前端面试翻车-CSDN博客

本文链接：https://blog.csdn.net/wuyxinu/article/details/103863983

文章目录

首先，直接来一套面试题冷静一下

笔试题目

1、怎么实现居中效果？ [分值：6]
您的回答：（简答题需要人工评分）

2、请描述一下cookies，sessionStorage和localStorage的区别？ [分值：6]
您的回答：（简答题需要人工评分）

3、简单的描述下盒子模型。 [分值：6]
您的回答：（简答题需要人工评分）

4、HTTP协议中常用的报文头 [分值：6]
您的回答：（简答题需要人工评分）

5、前端页面由哪三层构成，分别是什么？作用是什么？ [分值：6]
您的回答：（简答题需要人工评分）

6、谈谈你对渐进增强和优雅降级的理解和它们的不同之处。 [分值：6]
您的回答：（简答题需要人工评分）

7、解释一下 JavaScript中的“变量提升”。 [分值：6]
您的回答：（简答题需要人工评分）

8、描述下JavaScript 中的 “事件冒泡” 和 “事件捕获”。 [分值：6]
您的回答：(空) （简答题需要人工评分）

9、JavaScript 中的call 和apply 有什么异同之处？ [分值：6]
您的回答：（简答题需要人工评分）

10、JavaScript 中 for 循环与forEach 里面return 的区别 [分值：6]
您的回答：(空) （简答题需要人工评分）

11、JavaScript中深拷贝和浅拷贝的区别，如何实现数组深拷贝？ [分值：6]
您的回答：（简答题需要人工评分）

12、常见的内存泄漏原因有哪些，如何解决？ [分值：6]
您的回答：（简答题需要人工评分）

13、请简单描述下Vue与React的区别 [分值：6]
您的回答：（简答题需要人工评分）

14、谈谈AJAX的缓存机制,如何禁止缓存 [分值：6]
您的回答：(空) （简答题需要人工评分）

15、常用的设计模式有哪些，如何实现单例模式 [分值：6]
您的回答：(空) （简答题需要人工评分）

之后自己Google，百度，知乎得到的答案

1、怎么实现居中效果？ [分值：6]

您的回答：1、定位居中（father:position:relative, children:position:fixed）
2、负边距居中（margin-top，margin-left）
3、display:flex, align-items:center （简答题需要人工评分）

2、请描述一下cookies，sessionStorage和localStorage的区别？ [分值：6]

您的回答：（1）存储大小；
cookie 数据大小不能超过4k，其余的两个虽然也有大小限制，但是比cookie 大得多
（2）有效时间；
localStorage 存储持久数据，除非主动删除数据，否则数据不会轻易丢失
sessionStorage 数据在浏览器关闭后消失
cookie 有过期时间
（3）data与服务器的交互方式
cookie 会自动传递数据到服务器，服务器也可以写cookie
其余两个只保存在本地，不会自动发送数据（简答题需要人工评分）

3、简单的描述下盒子模型。 [分值：6]

您的回答：所有页面中的元素都可以看成是一个盒子，并且占据着一定的页面空间。一个页面由很多这样的盒子组成，这些盒子之间会相互影响。
盒子模型是由content、padding、margin、border这四个属性组成的。其中还有width和height进行辅助描述（简答题需要人工评分）

4、HTTP协议中常用的报文头 [分值：6]

您的回答：报文头的属性有：

Accept
请求报文可通过一个“accept”报文头属性告诉服务端客户端接收什么类型的响应。
如下报文头相当于告诉服务端，它能接收的响应类型为纯文本数据。
Accept属性的值可以为一个或多个MIME类型的值（描述消息内容类型的因特网标准，消息能包含文本、图像、音频视频以及其他应用程序专用的数据）

Accept：text/plain
cookie
客户端的cookie就是通过这个报文头属性传给服务器
Cookie: $Version=1; Skin=new;jsessionid=5F4771183629C9834F8382E23
服务端是怎么知道客户端的多个请求是隶属于一个Session呢？注意到后台的那个jsessionid = 5F4771183629C9834F8382E23木有？原来就是通过HTTP请求报文头的Cookie属性的jsessionid的值关联起来的！（当然也可以通过重写URL的方式将会话ID附带在每个URL的后面哦）。

referer
表示这个请求时从哪个URL过来的，假如你通过Google搜索出一个商家的广告页面，你对这个页面广告感兴趣，鼠标一点发送这个请求报文到商家的网站，这个请求报文的referer报文头属性值就是http://www.google.com

cache-control
对缓存进行控制，如一个请求希望响应返回的内容在客户端要被缓存一年，或不希望被缓存就可以通过这个报文头达到目的（简答题需要人工评分）
丢分原因： 对HTTP不熟悉，然后写的面试题不多，脑子一乱就乱写了。
解决方案： 找到一本叫做《图解HTTP》的书，准备将它干掉

5、前端页面由哪三层构成，分别是什么？作用是什么？ [分值：6]

您的回答：结构层、表式层、行为层
HTML、CSS、JavaScript
使用HTML去搭建文档的结构、CSS搭载表现效果、JavaScript实现行为（简答题需要人工评分）

6、谈谈你对渐进增强和优雅降级的理解和它们的不同之处。 [分值：6]

您的回答：渐进增加，可以理解为向上兼容版本，针对较低版本的浏览器来构建页面，保证所有基本功能点都能实现。再根据高版本追加功能
优雅降级，可以理解为向下兼容版本，先针对高版本实现功能，再对低版本进行兼容补充
区别：一个是慢慢加，一个是慢慢减（简答题需要人工评分）

7、解释一下 JavaScript中的“变量提升”。 [分值：6]

您的回答：在JavaScript中，函数、变量的声明都会被提升（hoisting）到该函数或变量所在的scope的顶部。即——JavaScript的变量提升。

javascript中一个名字(name)以四种方式进入作用域(scope)，其优先级顺序如下：

语言内置：所有的作用域中都有 this 和 arguments 关键字;
形式参数：函数的参数在函数作用域中都是有效的;
函数声明：形如function foo() {};
变量声明：形如var bar;
名字声明的优先级如上所示。也就是说如果一个变量的名字与函数的名字相同，那么函数的名字会覆盖变量的名字，无论其在代码中的顺序如何。但名字的初始化却是按其在代码中书写的顺序进行的，不受以上优先级的影响。（简答题需要人工评分）
丢分原因： 没来得及写，害。等自己水完几道乱七八糟的题的时候，已经没时间写了。而且自己对这部分概念也并不是特别的熟悉。
解决方案： 重新复习一遍JavaScript基础，然后再深入学习一下JavaScript高级

8、描述下JavaScript 中的 “事件冒泡” 和 “事件捕获”。 [分值：6]

您的回答：事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

用图示表示如下：

在这里插入图片描述

1、冒泡事件：

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父div的onclick事件同样会被触发。 (空) （简答题需要人工评分）

2.阻止事件冒泡：

给div3的绑定事件改为。ev.canceBubble=true;

3、事件捕获：

从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

丢分原因： 不吹不黑，这个真的不知道。所以还是菜
解决方案： 来这里做笔记

9、JavaScript 中的call 和apply 有什么异同之处？ [分值：6]

您的回答：

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。

bind 除了返回是函数以外，它的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数、 object 等等！（简答题需要人工评分）

丢分原因： 这里错得简直太憨批了，之前就踩过这个坑，还在自己博客里面做过笔记，结果现在还是错了一次。[https://blog.csdn.net/wuyxinu/article/details/103465920]
解决方案： 以后多翻笔记。。

10、JavaScript 中 for 循环与forEach 里面return 的区别 [分值：6]

您的回答：for 使用return 、 break，是跳出了整个循环。
forEach 使用return只是跳出了当前的循环，使用break报语法错误。
for 循环里面 return 可以直接终止跳出循环
forEach 是中断本次循环直接下一个循环 forEach想要取到值之后直接跳出循环可以用 try catch（简答题需要人工评分）

丢分原因： 基础不行，还真的没有注意过这方面的区别
解决方案： 来这里记笔记

11、JavaScript中深拷贝和浅拷贝的区别，如何实现数组深拷贝？ [分值：6]

您的回答：如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

浅拷贝：复制一份引用，所有引用对象都指向一份数据，并且都可以修改这份数据。

深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。可以使用slice和concat方法。

一维数组深拷贝slice和concat方法

slice()

slice()语法：arrayObj.slice(start,[end])；

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1指最后一个元素，-2 指倒数第二个元素，以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值:返回一个新的数组，包含从start 到 end （不包括该元素）的arrayObject 中的元素（如果 end 未被规定，那么slice() 方法会选取从 start 到数组结尾的所有元素）。

2.concat()方法

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法：arrayObject.concat(arrayX,arrayX,…,arrayX)

说明：返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

（简答题需要人工评分）
丢分原因： 很惨，自己是知道这道题的大致答案的，但是就是无法通过自己的语言写出来
解决方案： 还是需要多刷一些面试题

12、常见的内存泄漏原因有哪些，如何解决？ [分值：6]

您的回答：一：什么是内存泄露
内存泄露是指：内存泄漏也称作"存储渗漏"，用动态存储分配函数动态开辟的空间，在使用完毕后未释放，结果导致一直占据该内存单元。直到程序结束。(其实说白了就是该内存空间使用完毕之后未回收)即所谓内存泄漏。

二：常见的内存泄露造成的原因
1、单例造成的内存泄漏
由于单例的静态特性使得其生命周期和应用的生命周期一样长，如果一个对象已经不再需要使用了，而单例对象还持有该对象的引用，就会使得该对象不能被正常回收，从而导致了内存泄漏。
2、非静态内部类创建静态实例造成的内存泄漏
3、Handler造成的内存泄漏
4、线程造成的内存泄漏
5、资源未关闭造成的内存泄漏
6、使用ListView时造成的内存泄漏
7、集合容器中的内存泄露
8、WebView造成的泄露

三：如何避免内存泄漏？
1、平常养成良好的代码书写习惯，该销毁的对象要销毁比如destory啊广播啊，涉及到要用到content上下文的优先考虑全局上线文对象。

丢分原因： 这个是真的记不清。学的东西太少了
解决方案： 还是需要多刷一些面试题

13、请简单描述下Vue与React的区别 [分值：6]

您的回答：相同点：

1.都支持服务器端渲染

2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

3.数据驱动视图

4.都有支持native的方案,React的React native,Vue的weex

5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

不同点：

   1.React严格上只针对MVC的view层,Vue则是MVVM模式

   2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.

       而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

   3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';

       Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

   4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

   5.state对象在react应用中不可变的,需要使用setState方法更新状态;

     在vue中,state对象不是必须的,数据由data属性在vue对象中管理； （简答题需要人工评分）

丢分原因： 这个是真的记不清。学的东西太少了
解决方案： 还是需要多刷一些面试题