前端面试汇总

1、水平垂直居中的方式

第一种，用纯flex布局吧。

直接给对应的父盒子加一个display：flex开启布局。然后使用主轴居中;侧轴居中。（两者都是添加给父盒子的。）

第二种，用flex+margin的方式。

还是同样的先给父盒子添加一个display：flex开启布局，然后给子盒子添加一个margin：auto就可以水平垂直居中了。

第三种，用定位+margin的方式

首先根据子绝父相的方式进行定位，然后子盒子的绝对定位是top：50%，left：50%，但由于这里的50%都是以盒子的左上角为中心点的，所以需要用margin来返回自身宽高的一半，也就是margin-top：负的子盒子高度的一半。margin-left：负的子盒子宽度的一半。

第四种，用定位+transform的位移操作

这种方法可以说是上一种方法的改进，他省略了我们自己计算盒子宽高一半的过程。因为transform的位移，可以使用百分比的方式，并且百分比的对象就是盒子本身。也就是在子绝父相的情况下，直接使用transform：translate（-50%，-50%）即可。

第五种，用定位+margin的方式

在子绝父相的情况下，给子盒子添加上下左右都设置为0，最后再给子盒子添加一个margin：auto，就可以达到水平垂直居中的效果。

像很多人都会说直接采用margin：auto的方式，但是当盒子没有高度的情况下，这样的方式是不可取的。所以基本不会采用。

2、盒模型

盒模型由四个部分组成，分别是内容、内边距、外边距和边框

盒模型的分类有两种，content-box和border-box，可以通过box-sizing来设置。默认值是content-box。

两者的区别主要是对盒子的大小计算方式不同。

content-box又被称为w3c标准盒模型。

width设置的是内容的宽度
实际宽度=padding+border+width

border-box又被称为c3模型/ie盒模型等

width设置的是实际的宽度
width=内容+padding+border

3、关于flex：1

flex其实是flex-grow、flex-grow：用来增大盒子。当父盒子有剩余空间的时候，可以利用flex-grow来设置盒子增大的比例。比如，有两个子盒子，剩余200，盒子a的flex-grow=1，盒子b的flex-grow=3，那么盒子a在原有的基础上加50，盒子b在原有的基础上加150.

flex-shrink：用来缩小盒子。当总数超过父盒子的时候，可以利用flex-shrink来设置盒子缩小的比例。比如，有两个子盒子，超出200，盒子a的flex-shrink为1，盒子b的flex-shrink为3，那么盒子a在原有的基础上减去50，盒子b在原有的基础上减去150.

flex-basis：用来设置盒子的基础宽度。（如果存在，会覆盖原本的width）直接用px设置大小。

flex：1表示1,1,0% 可扩大可缩小，一般为平均分

flex：auto表示1,1，auto 可扩大可缩小，根据内容的大小来分

flex：0表示0，1,0% 不可扩大，可缩小，最小内容宽度（一般为一个字的宽度）

flex：none表示0,0，auto 不可扩大，不可缩小，一般为内容本身的宽度

auto表示的是容器原本的大小，0%表示为零尺寸的。

4、css3的新特性

css3的新特性，那太多了。我讲几个常用的吧

（1）选择器

新增了属性选择器，伪类选择器等等，最常用的应该是

：hover鼠标移动到元素上面
：nth-child（n）某个元素的第n个子元素
：last-child 某个元素的最后一个子元素
：first-child 某个元素的第一个子元素

（2）新样式

边框方面

border-radius：圆角边框,如果设置50%则表示为圆形
box-shadow：添加阴影

背景方面

background-size图片的缩放，cover表示要铺满整个盒子，contain表示宽高有一个铺满就结束

颜色方面

rgba（），hsla（）以及opacity的透明度

（3）转换transform

主要是位移translate、旋转rotate、缩放scale几个技能

（4）过渡动画transition

CSS属性，花费时间，运动曲线（默认ease)，延迟时间(默认0)

（5）自定义动画animation，和transition差不多，最大的区别就是自定义动画不需要触发，定义了就会有动画
（6）flex布局

5、BFC

BFC就是块级格式上下文，它是一种属性，可以让渲染区域独立，并且渲染区域中的布局不会影响外界。

BFC的触发情况有很多种，像overflow,float,position,display等等，最常用的应该是overflow：hidden，position：absolute吧。

BFC解决的问题有很多。

情况一：兄弟上下重叠

当上下两个盒子同时拥有上下间距，不是取两个间距之和，而是取最大值。

解决方式就是给盒子添加一个父盒子，并且给父盒子开启BFC。

情况二：外边距塌陷

就是父盒子不存在boder或者是padding的时候，子盒子有一个margin-top，那么父盒子也会对这个指令进行生效。解决方式是给父盒子开启BFC模式，当然，可以给父盒子加一个border或者padding，但是这样容易改变原本的样式，不可取。

情况三：左右布局问题

当A盒子浮动，B盒子不浮动的时候，两者就会产生覆盖。解决的方式就是给非浮动的盒子添加一个BFC模式。一定是给没有浮动的盒子进行添加。

情况四：清除浮动

在父盒子没有设置高度的时候，高度是由内容撑开的，所以子盒子浮动以后，父盒子就会没有高度。只要给父盒子添加BFC布局即可。

6、rem适配原理，响应式布局

rem是相对长度单位，相对于根元素的fomt-size计算值的大小。

1rem=根节点的字体大小

原理：在不同的屏幕下，修改根节点的字体大小。

在项目中：下载一个flexible包，即可动态更改html的字体大小

7、重绘和回流(重排)

重排和重绘是浏览器关键渲染路径上的两个节点，浏览器的关键渲染路径就是 DOM 和 CSSOM 生成渲染树，然后根据渲染树通过一个布局步骤来确定页面上所有内容的大小和位置，确定布局后，将像素绘制到屏幕上。

其中重排就是当元素的位置发生变动的时候，浏览器重新执行布局这个步骤，来重新确定页面上内容的大小和位置，确定完之后就会进行重新绘制到屏幕上，所以重排一定会导致重绘。

如果元素位置没有发生变动，仅仅只是样式发生变动，这个时候浏览器重新渲染的时候会跳过布局步骤，直接进入绘制步骤，这就是重绘，所以重绘不一定会导致重排。

8、状态码 3

200；请求成功

201：请求成功，但是逻辑有问题

204：请求正常处理，但是没有数据可以返回

304：协商缓存

400：传的参数出现问题

401：一般都是登录过期

404：资源不存在

500：服务器出错

3XX表示重定向，表明浏览器需要执行某些特殊的处理以正确处理请求。

301永久移动，302临时移动

303和302状态码有着相同的功能，但303明确表示客户端应当采用get方法获取资源，这点与302状态码有区别。

9、浏览器的缓存机制

浏览器会将请求后的资源进行存贮为离线资源，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求。

--作用：

减少了不必要数据的传输、降低服务器的压力
加快了客户端访问速度
增强用户体验

缓存机制分为强缓存和协商缓存

--强缓存：

概念：不向服务端发送请求，强制使用缓存数据

实现方式：后端在响应头中返回 Expires 和 Cache-Control

Expires ：http 协议 1.0 的字段，缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点

缺点：浏览器使用 expires 到期时间和本地时间进行对比，如果本地时间被修改或者和服务器时间差距较大，造成不准确的问题

Cache-Control： HTTP 1.1 的字段，约定过期时间的相对时间。

！当 cache-control 和 expires 同时存在 cache-control 的优先级会比 expires 高。

--协商缓存：

当强缓存失效后，会使用协商缓存

协商缓存由服务器决定是否使用缓存

向服务器发送请求资源并携带标识

Etag 字段：表示请求资源在服务器的唯一标识，浏览器可以根据 ETag 值缓存数据，下次请求的时候以 If-None-Match 字段请求
Last-Modified 字段：用于标记请求资源的最后一次修改时间

服务器会进行判断浏览器缓存的资源是否真的失效（也就是是否更新）

服务端已经更新，返回 200，重新返回最新资源和缓存标识
浏览器再次存入缓存
后续再次从强缓存开始

缓存时间到了，但是资源没更新，就还使用本地的，直接返回 304

10、slice，substr，substring

三者都是截取的意思。都可以截取字符串，slice可以截取数组。

第一个参数为开始位置，substr的第二个参数是个数，其他两个第二参数表示结束位置。

第一个参数大于第二个参数时，substring会自动调换顺序，slice会在第一参数大于第二参数时返回空，substr不在乎两者的比较

参数<0，substring无效，slice会给负数加上数据长度，substr第一参数为负数也会加上数据长度，第二参数不可为负数。

11、slice，splice，split

splice

可以进行增删改
修改原数组，返回修改的内容
第一个参数为起始索引，第二个参数是个数，第三个参数开始是添加或修改的值

var arr1 = ['a', 'b', 'c', 'd', 'e', 'f'];
// 删除
arr1.splice(1); //从index为1的位置开始，到最后的全部删除
arr2.splice(-2); //负数可以加上长度
arr3.splice(1, 3); //从index为1的位置开始删除元素,一共删除三个元素
// 增加系列
arr4.splice(1,0,'g','h') //纯增加情况，删除0个，增加2个
//先删除再增加，即替换
arr4.splice(1, 3, 'js', 'vue');//删除+增加 == 更改

slice

进行截取
原数组不变，返回截取的内容
第一个参数为起始索引（包括），第二个参数为截止索引（不包括）

start (可选)

如果start为负数，则加上数组长度

如果start被省略，则从索引 0 开始。

如果start超出原数组的索引范围，则会返回空数组。

end (可选)

如果 end 被省略，则 slice 会一直提取到原数组末尾。

如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

如果end小于start，则会返回空数组。

split：字符串 => 数组

字符串的方法，不是数组的方法。
返回一个字符串数组。
str.split(分隔符)

12、数据类型，检测数据类型 3

简单数据类型和复杂数据类型。

简单数据类型有number数字，boolen布尔值，string字符串，null，undefined，还有es6新增的symbol唯一值。

复杂数据类型有object对象，array数组，function函数以及特殊对象正则和日期。

第一种，typeof，不常用，因为只能检测简单数据类型，函数，其他的对象，数组以及null都会被检测为object。

第二种instance of，用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

写法就是：某个实例对象A instanceof 某个构造函数B。

第三种toString.call()，toString是Object原型对象上的一个方法，必须通过Object.prototype.toString.call来获取。因为从原型链的角度讲，所有的对象最终都会指向object。但大部分的对象，本身也可能有toString的方法，这样就会导致没有查到object的toString方法就会被自身的发放给终止掉。所以需要用call来强制执行，确保执行的是object上的toString方法。

第四种是根据对象的contructor（con s jua k t）判断，检测的是由字面量方式创建出来的数据类型。

13、递增递减

x++ 先返回值后递增

++x 先递增后返回值

undefined++ = NaN

14、作用域

作用域就是所作用的一个范围。作用域和函数的定义有关。而和函数的调用有关的是this的指向

作用有全局作用域和局部作用域两种。

全局作用域是作用于所有代码执行的环境，局部作用域是作用于函数内部的代码环境。

相对应的还有全局变量和局部变量。

全局变量可以在任何一个地方使用，只有在浏览器关闭的时候才会被销毁，比较占内存。

这里有一个特殊就是，如果在函数内部，没有声明直接赋值的变量，也属于全局变量。

局部变量是在函数内部使用的，只有所在函数被执行，才会初始化，函数执行结束，就会被销毁。因此比较节省内存空间。

这里还有一个作用域链

内部函数访问外部函数的变量，采取的就是链式查找的方式

站在目标角度出发，一层一层往外找，并追求就近原则

15、预解析

JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行.

预解析会把变量和函数的声明在代码执行之前执行完成。

预解析有两种，变量预解析和函数预解析

变量预解析，也就是变量的提升，变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。（只提升声明，不提升赋值，提升的是var的，和let，const无关）

函数预解析，函数的声明会被提升到当前作用域最上面，但是不会调用函数

16、new的过程 3

内存中创建一个空对象
将这个空对象的__proto__ 指向了构造函数的Prototype属性

obj.__proto__=Person.prototype

构造函数内部的this被赋值为这个新对象（即this指向新对象）。
调用构造函数，执行构造函数内部的代码（给新对象添加属性和方法）
构造函数默认返回return，也就是this的实例化对象

如果写了return，那么看return后面的数据类型
如果是简单数据类型，忽略return简单数据类型，return this
如果是复杂数据类型，忽略return this，return复杂数据类型

17、静态成员和实例成员

实例成员就是构造函数通过this添加的成员，只能够通过实例化的对象来访问

静态成员就是在构造函数本身上添加的成员，只能够通过构造函数来访问

18、关于原型链、构造函数

构造函数的prototype和其实例的__proto__是等价的，都指向原型对象。

构造函数就是可以用来new的函数。（箭头函数不能当做构造函数）

也是在new的过程中，将实例.__proto__指向了对应的构造函数的prototype

1、每个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数所拥有的。

（通过构造函数创建的实例，实例再去访问属性的时候，自身没有就会去构造函数的prototype上面寻找。我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。也可以解决构造函数方法浪费内存的问题。）

2、每一个对象（除了null）都会有一个__proto__属性，指向构造函数的prototype。

（之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 的存在。 __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype。）

3、每个原型对象都有一个constructor 属性，指向构造函数。

（constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。）

原型链的底层基础，首先是创建一个构造函数，然后new得到一个实例。构造函数的prototype和其实例的__proto__都指向原型对象。这就形成了一个三角形。并且原型对象的constructor指回构造函数本身。又因为原型对象也是一个对象，也有__proto__属性，这样一层一层往上就形成了原型链。原型链的最上面一层是Object的原型对象。再往上就指向了null。

实例对象在查找属性的时候，如果找不到，就会沿着__proto__去与对象关联的原型上查找，如果还查不到，就去找原型的原型，直至查到顶层的Object.prototype，这也就是原型链的概念。或者也可以说顶层是Object.prototype.__proto__,也就是null。

19、继承有哪几种方式 3

继承和多态、封装共为面向对象的三个基本特征。继承可以使子类具有父类的属性和方法。

第一种原型链继承

关键核心：让父类的实例作为子类的原型。

将子类共有的方法，创建在父类的原型对象上。

将子类共有的属性，创建在父类的构造函数内。

缺点：一、创建子类的时候无法传递参数，就算传递了参数，也无法传递给父类。二、如果属性值是复杂数据类型，那么该属性会被所有的实例共享。

第二种借用构造函数继承

关键核心：在子类构造函数中使用call（）调用父类构造函数

让父类的this指向子类的实例，在子类的构造函数中,用call改变this的指向

缺点：只能实现属性的继承，不能继承方法

第三种组合式继承

关键核心：使用 call() 调用父类的属性，使用 new 获取父类原型上的方法

通俗的讲，就是将原型链继承中的方法继承和借用构造函数继承中的属性继承进行组合

缺点：多次调用了父类构造函数。原型链继承方法的时候，会创建一个没有用的父类构造函数，比较浪费。

第四种寄生式组合继承

关键核心：使用 Object.create() 来解决多次调用父类构造函数问题

用Object.create（参数），作用是创建出来一个新对象，他的原型对象是括号内的参数。

子类的prototype=Object.create(父类的prototype)，

也就是新对象的原型对象为父类的prototype，而实例的原型对象指向了新对象，也就是实例的原型对象的原型对象为父类的prototype

第五种es6类继承

使用class 父类，并且用extends使子类继承父类。