前端面试被问到的一些面试题总结

2020年10月10日
1.css中隐藏元素的方法：
opacity 设为 0：该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用
注意：该属性是兼容IE9以上的浏览器，IE8 以及更早的版本支持替代的 filter 属性，例如： filter:Alpha(opacity=50)
visibility 设为 hidden：该属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。
display 设为 none：该属性才是真正意义上的隐藏元素,当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。
注意：1.任何的版本的 Internet Explorer （包括 IE8）都不支持 “inherit” 和 “collapse” 属性值。
position 设为 absolute 然后将位置设到不可见区域：该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可是页面。
注意：你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。这个方法在创建自定义复选框和单选按钮时经常被使用。
结论：
这里介绍了5中方法，每种方法之间都是存在区别的，到底要用哪一种的话，就要视情况而定。

2.vue中隐藏元素的方法：
v-show和v-if
v-if控制 DOM的删除和添加，不同于v-show对DOM的显示和隐藏

3.定位有哪几种方式：
Position：absolute绝对定位，relative相对定位，fixed 固定定位，static 静态定位
这几种定位方式分别是基于什么定位的？

4.轮播图的实现：
原生JS无缝轮播图（左右切换、导航图标）
功能：
1、实现轮播图的左右无缝切换
2、实现导航图标的跟随显示、点击切换
3、使用定时器进行无缝轮播
轮播图有很多种实现方式

5.状态码有哪些？
HTTP状态码的英文为HTTP Status Code。下面是常见的HTTP状态码：
200 – 请求成功
301 – 资源(网页等)被永久转移到其它URL
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误
HTTP状态码的分类

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：
分类分类描述
1信息，服务器收到请求，需要请求者继续执行操作
2成功，操作被成功接收并处理
3重定向，需要进一步的操作以完成请求
4客户端错误，请求包含语法错误或无法完成请求
5**服务器错误，服务器在处理请求的过程中发生了错误

6.http和HTTPS的区别：
http协议和https协议的区别：传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同
一、传输信息安全性不同
1、http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
2、https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。
二、连接方式不同
1、http协议：http的连接很简单，是无状态的。
2、https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。
三、端口不同
1、http协议：使用的端口是80。
2、https协议：使用的端口是443．
四、证书申请方式不同
1、http协议：免费申请。
2、https协议：需要到ca申请证书，一般免费证书很少，需要交费。

7.Vue的传值方法？除了父子和兄弟组件还有什么方法？vuex怎么用的？路由是怎么传值的？
1、 使用$router.push 拼接参数传参
2、 使用name来确定匹配的路由，通过params来传递参数
3、 使用path来匹配路由，然后通过query来传递参数
注意path不能与params一起使用，需要通过path来匹配路由的时候，使用query来传参。
query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this.route.query.name和this.route.params.name。
query更加类似于我们ajax中get传参，params则类似于post，前者在浏览器地址栏中显示参数，后者则不显示

8.axios中哪些方法：

9.get和post的区别除了安全方面还有什么区别？

2020.10.16
1.Es6有哪些新特性？
（重点是要理解每一个特性）
Let和const关键字

变量的解构赋值

字符串，数值的扩展

数组，对象的扩展

函数的扩展

for…of

2.路由导航守卫是什么？如果有五个路由其中两个要通过登录，其中三个不用登录可以直接访问这个怎么实现？
全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

3.一个盒子水平垂直居中的方法
1.盒子没有固定的宽高
（1）transforms变形（IE8不支持，属性需要些浏览器厂商前缀）
（2）弹性盒子：
在父元素上加三句话：

/*只需要在父元素上加这三句*/
        justify-content: center; /*子元素水平居中*/
        align-items: center; /*子元素垂直居中*/
        display: -webkit-flex;

2.盒子有固定的宽高
（1）margin负间距（绝对定位+top:50%+left:50%+margin-top:-盒子的高度+margin:-盒子的宽度）
（2）绝对定位+margin：auto（该方法兼容ie8以上浏览器）
上下左右均0位置定位；margin: auto;

4.数组去重的方法
（1）第一种方式就是最简单的set去重(o(n))

var arr = [1,2,2,4,3,4,1,3,2,7,5,6,1]
var newArr = new Set(arr)

（2）2.第二种方式就是用indexOf来去重(o(n^3))
判断新数组中某个数字是否存在

function fn(arr){
 let newArr = []
 arr.forEach((val)=>{
     if(newArr.indexOf(val) == -1){
          newArr.push(val)
      }
 })    
 return newArr  
}

（3）第三种方式普通去重(o(n^3))

for(var i=0;i<arr.length;i++){
 for(var j=i+1;j<arr.length;j++){
    	 if(arr[i]==arr[j]){
          arr.splice(j,1)
     }
}
}

（4）键值去重(o(n^3))
根据键值是唯一的来去重

	function fn(arr){

   let arr1 = [],
     arr2 = []
 arr.forEach((val)=>{
     arr1[val]=val
 })
 //arr1数组会存在空的情况
 //所以返回arr2
 arr1.forEach((val)=>{
    if(!!val){
        arr2.push(val)
    }
 })
 return arr2
}

（5）sort排序后去重（o(n^2)）
只比set复杂度低

function fn(arr){
let newArr = []
 arr.sort((a,b)=>{
   return a-b
 })
 arr.forEach((val,index)=>{
   if(val != arr[index+1]){
        newArr.push(val)
   }
   })
  return newArr
}

5.vue框架的优点和缺点
vue是一个构建数据驱动的web界面的渐进式MVVM框架

vue有什么好处呢？
性能好
简单易用
前后端分离
单页面应用用户体验好
but
它不适于seo优化，而且封装的比较厉害，报错不明显，适合单人开发，适合中小型项目

6.对于原型链的理解？
（1）原型对象和构造函数有何关系？
在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象。
当函数经过new调用时，这个函数就成为了构造函数，返回一个全新的实例对象，这个实例对象有一个__proto__属性，指向构造函数的原型对象。

（2）能不能描述一下原型链？
JavaScript对象通过prototype指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条, 即原型链。

对象的hasOwnProperty()来检查对象自身中是否含有该属性
使用in检查对象中是否含有某个属性时，如果对象中没有但是原型链中有，也会返回true

7.行内元素和块级元素的区别？
1.行内元素与块级函数可以相互bai转换，通过修改display属性du值来切换块级元zhi素和行内元素，行内元素display：inline，块级元素display：block。
2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
Img标签是个例外，它虽然是行内标签，但是可以设置宽高

8.谈谈你对setTimeout的理解？setTimeout(0)是什么意思？
（1）setTimeout(fun,time);//fun为一个函数，time为等待的时间。
等待time时间后，把要执行的任务(fun)加入到Event Queue中，又因为是单线程任务要一个一个执行，如果前面的任务需要的时间太久，那么只能等着，导致真正的延迟时间远远大于time。
setTimeout设置的时间，不是等主线程执行完开始计时，而是当执行到这条语句时就开始计时了
（2）如果代码中设定了一个 setTimeout，那么浏览器便会在合适的时间，将代码插入任务队列，如果这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。所以setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
settimeout(0)就起到了一个将事件加入到队列中，待执行的一个功能效果！

2020年10月19日上午
1.数组去重的方法
重点：ES6的set方法有两种写法去重
（1）let array = […new Set(arr)]
（2）Array.from(new Set(arr))
set有一个缺点就是不能去掉空对象{ }
其他的方法的话前面都总结了（面试中常问的）

2.生命周期什么时候能拿到实例data，页面渲染完成在生命周期什么时候
是在beforecreate之后created之前
根实例的加载相关的生命周期（beforeCreate、created、beforeMount、mounted）

组件实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)

全局路由勾子(router.beforeEach)

组件路由勾子(beforeRouteEnter)

组件路由勾子的next里的回调(beforeRouteEnter)

指令的周期(bind,inserted)

nextTick方法的回调

3.iframe的优缺点？
iframe 创建包含另外一个文档的内联框架(即行内框架)，简而言之，iframe标签是框架的一种形式，一般用来包含别的页面。
优点:

1.iframe能够把嵌入的网页原样展现出来；

2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

6.方便制作导航栏。

缺点:

1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；

2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；

3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；

4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去；

5.产生多个页面，不易管理；

6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

4.怎么在css中设置盒模型？
设置box-sizing:boder-box/content-box
这个时候可能还会问到关于IE盒模型与W3C盒模型的区别

5.data-自定义属性的作用？
data- 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

（1） 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
（2）属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。

2020年10月19日下午
1.vue生命周期？
同上答案
2.ES6有哪些新特性？
同上答案
3.如果开发一个项目怎么着手去开发？
面试官说的是：首先要分析这个项目具体有哪些功能，这些功能有哪些是必要的和能够做出来的，有哪些是不必要的和无法做出来的，在正对于这些功能看能够具体的通过哪些技术能够实现，在进行项目的搭建以及开发写代码。
网上的答案的话参考这篇文章：
如何开始接手一个项目

4.如果两个人合作开发一个功能怎么去开发？

------解决方案--------------------
起码的配置管理工具得有啊

肯定都是更新同一个工作区

而且最开始做的时候要统一风格和标准

开始做的东西要找老大们评审，确认一下这样做行不行，别闷头往下做，很容易做的越多错的越多，到头来返工
------解决方案--------------------
两人的水平接近的话，一起开发各自负责的模块，然后交叉测试