面试题汇总

HTML方面

什么是盒模型?

盒模型有四种东西组成,内容+内边距+边框+外边距

盒模型分为标准盒模型(也称w3c标准盒模型)，怪异盒模型（也称IE盒模型）

他们互相转化的方式:

IE盒模型 box-sizing: border-box ; 标准盒模型: box-sizing:content-box(默认)

什么是HTML

HTML是超文本标记语言，是网页的架子,表示的是我们结构层，他是我们前端的老大也就是说最为重要的.

HTML5

HTML5新增的标签

语义化标签,例如header,aside,footer等.

视频，音频等标签

你是怎么看待标签语义化

标签语义化就是让标签有意思，它能使得爬虫更好的读取你的标签,也让一些语义化浏览器渲染引擎更好的读取,也方便后期的维护

本地缓存

localstory，sessionstory,cookie

他们的区别就是

cookie比其他两者都要小，cookie只有4kb，而其他两者有5M

localstory是本地储存，除非主动删除不然一直都在

sessionstory是浏览器缓存,也称临时储存，关闭之前,数据仍然可以访问

cookie是后台提供的，在前端和服务器中来回传输

CSS方面

BFC是什么?

BFC又称块级格式上下文,简写为BFC,当盒子具备一定条件的时候,就能成为块级格式上下文,并且具备一定特性.

要具备什么条件才能成为BFC盒子呢?(满足以下其中一个就是块级格式上下文)

1.display:除了visable之外的属性

2.overfloat：auto,hidden

3.position:固定定位（fixed）,绝对定位(abouslate)

4.body的根元素

成为块级BFC盒子将会拥有哪些特性呢?（虽然有很多条，但是回答以下就可以了）

1.BFC是一个独立的渲染的区域,所以BFC中的元素不会影响外面的布局.

2.BFC不会被浮动盒子影响,也就是说不会塌陷

css选择器

引用css的方式:行内样式,内部样式,外部样式

他们的权重大小是行内样式>内部样式>外部样式

css四大选择器

id选择器,class选择器,标签选择器，属性选择器

他们权重大小是:id选择器>class选择器>属性选择器>标签选择器

用css画三角形

就是盒模型的宽高为0,然后设置它的边框的大小,这个时候会形成四个朝向内部的三角形,然后将任意的三个边框的颜色变为透明，一个有颜色，这个时候我们得到一个三角形

css3

新增属性:

盒子的阴影,盒子的边框背景，边框弧度等

属性选择器等一些属性

js方面

作用域和作用域链

作用域:当变量在一定范围内有效,我们称这个范围是这个变量的作用域.

但是当我们创建js的时候系统会自动给我们创建一个全局作用域

我们当创建函数的时候也会创建一个局部作用域(也称函数作用域)

有一个硬性的规则就是内可以访问外,外不能访问内意思就是说被包含的作用域能够访问包含作用域中的变量,儿反过来不行.

作用域链

就是多个作用域嵌套在一起用链来连接,我们称这个链为作用域链

当我们查找一个变量的时候,我们先从它最近的作用域中进行查找，然后沿着作用域链上连接的作用域上一个一个查找,直到全局作用域，当有就会返回结果,没有就会报错

什么是垃圾回收机制?

垃圾回收机制就是项目在运行过程中对一些无用的变量回收内存的一种重要机制。他不是实时的，因为垃圾回收机制每执行一次就会有非常大的损耗，所以垃圾回收机制是有周期性进行对无用变量的回收.

垃圾回收机制的两种方式:

(1).标记清除法

当变量超出了它自身的作用域的时候或者它的作用域销毁的时候,将会对其进行标记，当到了垃圾回收机制回收周期的时候，对标记的变量进行回收.

(2).引用计数法

将会跟踪项目中代码的变量,然后记录他们的引用次数，当到了垃圾回收机制周期的时候,这个时候将会对引用次数为0的变量将它视为可以回收的，然后对他进行回收.但是这样做的话,循环应用变量陷入死区.

面向对象和面向过程

面向过程:将解决事物问题的步骤分解成几个步骤，然后用函数实现,然后需要的时候调用即可

面向对象:将解决事物问题分为几个对象,对象的创建不是为了描述解决问题所需要的步骤,而是为了描述解决问题所需步骤的行为.

原型对象和原型链

原型对象

1.构造函数中的一个指针prototype指向的是它自身的原型对象.

2.构造函数所创建的实例对象中有一个“proto”指向的是构造函数的实例对象

3.原型对象有一个构造器指向的是构造函数

4.实例和构造函数都能使用原型对象的属性和方法

原型链

构造函数中的一个指针prototype指向的是构造函数的原型对象,实例对象中的——proto__指向的是构造函数的实例对象.

然后当实例的原型对象是另一类型的原型对象的实例,这个但是上述关系仍然成立,实例与原型对象的链接,我们称这个链接为原型链.

继承

原型继承

构造函数模式继承

组合继承

寄生式继承

ES6继承

ajax

是异步的,他是通过XMLHTTPresponent构造一个对象,明确放松请求的方式和URL，然后发送一个请求（send），动态监听（onraedstatuy）服务器发送过来的数据,好处就是能够实现不整体刷新的情况下，实现部分地方进行数据的更改.

跨域

为什么需要跨域？

因为浏览器存在同源策略，同源是指“域名”,“端口号”,"协议名"三者都相同的时候，称为同源,其中一项不同的时候，我们称为跨域。

我们前端和服务器是分开部署的，所以我们要请求它的接口需要跨域,

我们页面中嵌套其他的页面

为什么存在同源策略，有什么意义呢？

同源策略限制了同一源加载的文件与另外源加载的文件的文件进行交互，这个是隔离潜在恶意文件的一种重要的安全机制.

异步和同步

同步：一次只做一件事。

异步就是同一时间可以做多件事.

单线程和多线程

单线程:同一时间只做完成一个事情

多线程:同一时间可以做多个事情

异步执行机制(异步轮询机制)

同步任务在主线程上执行,形成执行栈.

除了主线程外，还有一个任务对列,当异步任务有了结果就会返回一个事件在任务队列上进行排队等待执行

当执行栈中的任务都执行完了,将会把任务队列中的事件都放入到主线程上,然后让着些事件依次执行.

创建对象的方式

1.字面量创建对象

2.构造函数创建对象

3.工厂模式创建对象

什么是发布-订阅者模式

打个比方:一家书舍，我觉得非常好我订阅了这家的书舍,一有新书我就知道,另外还有一人也订阅了.这个时候书舍刚好就发送了到了一批新书，我们都会收到通知.

换句话说就是两个观察者(代码)同时（监听）观察同一事物

this的指向

一定要记住,this绝对是指向函数运行时的对象，而不是函数创建时的对象

一般函数，this指向的是调用者.

除了匿名函数和对象中的函数,this指向的是window

构造函数不适用new操作符,this指向的是调用者也就是window.使用new操作符的时候，this指向的是构造函数创建的对象

构造函数使用apply,bind,call会改变this指向,使用他们的时候,this指向的是他们所传的第一个参数

箭头函数没有this，它的this是它所在上下文中的this,把它们拿过来给自己使用.

apply、call和bind的区别

apply与call的最大区别就是传参方式的不一样

apply它传参的方式是数组形式传参，call传参方式是普通形式传参

bind

bind与都不一样的是，上面的方法都可以直接运行函数

bind不能立即执行函数，会返回一个新的函数

get和post的区别

一、使用的方式不一样

get一般是用来获取数据的

post一般是用来发送数据的

二、传递参数

get传递参数是将参数放在URL地址栏中进行发送，因为浏览器对地址栏的大小有限制，所以get传输参数有大小限制

post传递参数时将参数放入请求体中，因为浏览器对请求体没有限制，所以post传输参数没有大小限制

三、安全性

post相对与get来说相对安全点

四、缓存(了解)

get会走缓存

post不会走缓存

es6新特性

数组新增的方法:

filter（过滤），foreach，map等

字符串的方法：

split,slice等

变量的解构

let和const以及与var的区别

var能变量提升,var不受跨块级作用域的影响,能够重新赋值且重复申明

let不能变量提升，受块级作用域的影响,不能重复声明,能重新赋值

const不能变量提升，并且申明的时候必须赋值,且不能重新赋值不能重复申明

map,set方法

map能够将二位数组转化为对象

set数组去重

提出了一个新的基本引用数据类型symble

箭头函数

Promise

它的中文意思就是承诺的意思

他有三种状态，分别是

进行时pedding

成功reject

失败remove

当状态一旦确认下来，就无法发生改变.

使用方法:

返回一个pormise对象，其对象中有两个参数，这两个参数都是函数,当我们代码成功执行完我们就调用第一个参数表示成功的回调

当我们运行失败,我们就直接调用第二个参数，表示失败的回调

async await和promise的区别

async和promise都是异步的方法

async是promise的最终版

await是在async中使用的,当有两条输出结果，当有了一条输出结果，但是先不会输出，等了有了第二条输出结果的时候，这个时候就可输出

扩展运算符

模板字符串

Vue方面

什么是vue

vue是构建用户界面的渐进式框架，它主要关注的是视图层，它的主要核心是MVVM（又称是前端视图层开发思想）,M代表的是数据模型，保存数据的.v表示视图层，vm是M和v之间的调度者，当我们前端的数据产生相相应会发送一个信号给vm，vm会将这个信息给M，让M进行转变，然后发送给vm，vm将数据给V，V得到相应后就直接发生改变.

什么是vue-router

vue-router又称是vue路由，路由也称是路径，我们使用路由就是通过在项目中创建路由的配置文件,然后安装vue-router路由依赖，然后在我们的配置文件中将我们所创建的组件配置到我们的路由中去，然后导出路由，在我们的mian.js中引入并使用我们导出的路由，然后在我们APP.vue中书写路由出口，然后运行项目我们输入真确的路径即可看到我们的组件所显示的页面.

vue的生命周期钩子函数是什么

钩子函数：指的是我们系统中在创建到结束的一系列的事件，通常用函数来表示，这些函数不需要我们来调用，他们会自己调用,我们趁这个函数为钩子函数

vue生命周期分别为：

beforcreate：实例对象创建之前，这个时候内存中还没有数据.

created:实例对象创建完毕且数据已经在内存中加载好了,但是还没有挂载到页面中去.

beformount：挂载之前,这个时候数据还没有挂载数据到页面中去

mounted：挂载之后,这个时候我们已经将数据挂载到页面中去了,这个时候页面已经渲染完毕了

beforeUpdate:更新之前，这个时候数据还没有更新

Updated:跟新之后，数据更新之后

befordestroy：销毁之前，这个时候我们还可以访问数据

destroyed：销毁之后,我们不可以访问数据

为什么会出现闪烁问题

因为vue刚加载的时候还不能管理div，这个时候渲染的就会看到我们的代码,但是很快就消失，我们想要解决就可以直接设置css属性[v-cloak] { display: none; }。 如果没有彻底解决问题，则在根元素加上style=“display: none;” :style="{display: ‘block’}"

v-if和v-show的区别

v-if通过判断控制元素是否被创建,v-show通过判断并利用css属性来控制元素是否隐藏

他们的利用场景:

v-if利用于：切换较少的场景,我们通常使用在判断是否用户登录

v-show利用与，切换较多的场景.

什么是vuex

vuex就是一个本地库，他有不同的状态，分别为state定义状态，getters分派状态,mutution修改状态(同步的),action(修改状态 异步的),

moudle模块

vuex和本地储存的区别:

vuex一刷新数据就没了,本地储存localstory不会

解决vuex一刷新就将数据丢失的问题,我们一般通过vuex持久化

拿、存数据的方式不一样

什么是mixin

mixin其实就是一个对象，它于组件中的script标签中的代码很相似，分别有生命钩子函数，数据，方法等

mixin又称是混入当自身组件没有，且引入了mixin的时候就可以在mixin中拿出来使用。

路由传参的方式

传参的三种方式:

1.通过name+params传参

2.动态路由传参

3.通过path+query传参

nextTick

因为vue修改dom中的数据是异步的,我们通过nextTick来获取跟新后的dom中的数据.

为什么组件中的data是函数呢？

由于javascript特性所导致,因为data为函数每次运行的时候就会返回一个新的对象，相当于就是说我们每个组件都会有一个私有的数据空间，如果data是对象的话,我们的数据就是共享的会导致数据的不完整以及不合理.

什么是路由守卫

l路由守卫就是通过对路由跳转进行拦截，并且可以进行对其进行一些逻辑的处理,然后其核心的方法就是beforEach()其中三个参数form，to,next.分别表示当前路由，to表示将要跳转的路由,next表示可以通过

如何实现角色权限的管理

给路由开始分配普通的登录模块

然后按照不同角色给他们分配不同的模块并导出

然后在登录界面中通过后台传递过来的数据来进行判定不同角色,然后通过addRoute（）动态添加角色模块.

父子组件的传值

父传子，使用v-bind然后自定义属性来将数据传输过去,然后子通过props来进行父组件传递过来的数据

子传父,父组件在子组件上定义自定义事件,然后通过this.$emit来调用父组件自定义事件并传值,然后父组件通过接受参数的形式来获取数据