2021前端面试题终结版

$1.如何实现⼀个div垂直居中（⾄少3种⽅法）$

答：其实实现水平垂直剧中方法有很多：
第一种：定位：

• 第一种思路：
  通过给div设置绝对定位，
  并且left,right,top,bottom设置为0,margin:auto即可 以水平垂直居中
• 第二种思路：
  通过给div设置绝对定位，.left为50%,top为50%,
  再给div设置距左是自身的一半 即：margin-left:自身宽度/2,margin-top:自身高度/2。
• 第三种思路：
  通过给div设置绝对定位，left为50%,top为50%，
  再给div设置跨左和跟上是自身 的一半：transform:translate3d(-50%,-50%,0)
• 第四种思路：
  flex布局:
  思路：有两个div，父级div和子级div，
  给父级div设置display:flex,并且设置父级div的水平 居中justify-content:center，并且给父级div设置垂直居中align-items:center即可

$2.rem和em的区别？$

答：rem和em都是相对单位，主要参考的标签不同：
rem:是相对于根字号，即相对于标签的font-size实现的，浏览器默认字号是font- size:16px
em:是相对于父元素标签的字号，和百分比%类似，%也是相对于父级的，只不过是%相对于父级 宽度的，而em相对于父级字号的

$3.Cookie，localStorage，sessionStorage三者的异同？$

$4.css3动画$
答：css3动画大致上包括两种：
第一种：过渡动画：主要通过transition来实现，通过设置过渡属性，运动时间，延迟时间 和运动速度实现。
第二种：关键帧动画：主要通过animation配合@keyframes实现 transition动画和animation动画的主要区别有两点:

• 第一点:transition动画需要事件来触发，animation不需要
• 第二点:transition只要开始结束两种状态，而animation可以实现多种状态，并且animation是 可以做循环次数甚至是无限运动

$5.原型及原型链理解？$

原型

• 函数都带有一个prototype 属性，这是属性是指向构造函数的原型对象，这个对象包含所有实例共享的属性和方法。
• 原型对象都有一个constructor 属性，这个属性指向所关联的构造函数。
• 每个对象都有一个__proto__ 属性[非标准的方法]，这个属性指向构造函数的原型 prototype

原型链

• 当访问实例对象的某个属性时，会先在这个对象本身的属性上查找，如果没有找到，则会 通过 proto 属性去原型上查找，如果还没有 找到则会在构造函数的原型的__ proto__中查 找， 这样一层层向上查找就会形成一个作用域链，称为原型链
  $6.new操作符做了这些事？$
• 它创建了一个全新的对象
• 它会被执行[[Prototype]]（也就是__proto__）链接
• 它使this指向新创建的对象
• 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上
• 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用将返回该对象引用

//模拟new
function objectFactory() {
  const obj = new Object();
  const Constructor = [].shift.call(arguments);

  obj.__proto__ = Constructor.prototype;

  const ret = Constructor.apply(obj, arguments);

  return typeof ret === "object" ? ret : obj;
}

$7.this指向的6种情况？$

全局中的函数和全局变量可以看作是window的方法和属性所以全局函数中的this指向window；方法中的this指向该方法所指的对象；
this指向函数运行时所属的对象 this不指函数本身，也不指函数所对的作用域，指向调用此函数的对象；

this指向分为六种情况：
1）全局函数中的this，在全局环境下调用的时候指向window
注意：如果全局函数内部是严格模式，则在全局环境下不指向window，指向undefined;
2）函数被赋值给某个事件时，指向对象所属的对象
3）this在对象方法中使用时，指向的是方法所属的对象
4）在闭包中this指向window;
5）在构造函数中以及构造函数的原型对象中的this，都指向构造函数的实例对象 var arr=new Array( ) Array是构造函数 arr实例对象
6）箭头函数中的this指向箭头函数所在（定义）的执行环境

$8.SPA单页面理解，以及优缺点？$

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和
CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI
与用户的交互，避免页面的重新加载。

优点：

• 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 基于上面一点，SPA 相对对服务器压力小；
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
  缺点：
• 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
• 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
• SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

$9.v-model的原理？$

我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件

<input v-model='something'> 
相当于
<input v-bind:value="something" v-on:input="something = $event.target.value">

$10.防抖和节流？$

• 防抖：
  设定一个特定的时间，让函数在特定的时间内执行一次，不会频繁执行。通过定时器实现
• 节流：
  延迟要执行的动作，若在延迟钱的这段时间内，再次触发，则取消之前开启的动作，重新计时。