前端面试题（持续更新中）

1、z-index用于设置标签的层级关系，需要同时设置position属性，标签z-index默认为0，可以设置为负数，值越大，位置越靠上

2、Scoped 用来设置css样式只对当前组件起作用

3、如何获取dom？

Ref=”domName”    用法：this.$refs.domName

4、vue中的指令

V-model 双向绑定            V-for 循环

V-if / V-show  隐藏/显示       V-on 事件                              V-once 只绑定一次

5、为什么使用key？

使用key来给每一个节点做一个唯一标识，为了更高效的更新渲染DOM。

6、V-model的使用

用于表单数据的双向绑定，其实他就是一个语法糖，这个背后做了两个操作：

V-bind绑定一个value属性

V-on给当前元素绑定input事件

7、清除浮动的方法

1. 添加一个空元素，设置css样式：clear：both属性

2. overflow：hidden  /  overflow：auto

3. 添加一个clearfix的class，给class添加一个伪类选择器，在伪类选择器后添加一个看不见的块级元素

4. 给浮动元素后面的元素添加一个clear属性

8、clear的值

Left左边不允许有浮动

Right右边不允许有浮动

Both左右两边都不允许有浮动

None左右两边允许有浮动

Inherit继承父级元素的clear属性

9、css选择器的优先级

!important > 行内样式>ID选择器（id） > 类选择器（class） > 元素标签选择器（div/p/span等） > 通配符选择器（*） > 继承选择器（div p） > 浏览器默认属性

10、伪类选择器

:first-child：第一个元素

:last-child：最后一个元素

:nth-child()：选中第几个元素

:not()：将符合条件的不做操作

11、伪元素选择器（W3C解释：单冒号用于css3伪类，双冒号用于css3伪元素）

::first-letter：表示第一个字母

::first-line：表示第一行

::selection：选中的内容

::before：元素开始位置

::after：元素结束位置

::before和::after注意事项：

1. 默认是display：inline
2. 必须设置content属性，且content后面一般设置空字符串
3. 默认user-select：none，内容无法被用户选中

12、px，em，rem的区别

Px是相对于屏幕分辨率的长度

Em是相对于当前元素文本的长度

Rem是相对于根目录html

1em=16px

13、标准盒子模型和怪异盒子模型

标准盒子模型：content + padding + border + margin

怪异盒子模型（IE）：content + margin

转为标准盒子模型：box-sizing：content-box

转为怪异盒子模型：box-sizing：border-box

14、position定位

Static：静态定位（默认值）

Absolute：绝对定位，相对于static之外的第一个父元素

Fixed：绝对定位，相对于浏览器窗口进行定位

Relactive：相对定位，原始位置会被保留

Inherit：继承父元素的position属性值

15、合并对象的方法

扩展运算符...  object.assgin（）  json.parse（） $extend   递归

16、监测数据类型的方法

type of：监测数据类型的运算符   

instance of：检测某一个实例是否属于某一个类  

constructor：与instanceof相似可以处理基本的数据类型检测

Object.prototype.toString.call()

17、定义变量的方法

Var   let   const   function   class  import

18、var、let、const的区别

1. let和const有块级作用域，var没有
2. var和let可以不设置初始值，const必须设置初始值
3. Var可以声明提前，let和const必须先声明后使用
4. Var可以重复声明，let和const不能重复声明
5. Var和let声明的值可以被修改，const声明的基本数据类型不能被修改，复合型数据类型一般可以被修改
6. Var不存在暂时性死区，let和const存在暂时性死区

19、数组的方法

Push / unshif ：在尾部 / 头部添加一个元素，返回数组长度（改变原数组）

Pop / shift ：删除末尾 / 头部第一个元素，返回删除的元素值（改变原数组）

Slice ：提取数组中的一部分（原数组不变）

Splice ：删除数组中的一部分元素（改变原数组）

Reverse ：将数组中的元素倒序放置（改变原数组）

Sort ：元素排序（改变原数组）

Join ：转化为一个字符串 默认分隔符是 ’，’

Concat ：连接两个或多个数组

Map / forEach ：遍历数组（map有返回值，用return返回）

Filter ：过滤数组（不改变原数组）

Some ：查询数组中是否有符合条件的某个元素，如果有返回true；没有返回false

Every ：查询数组中是否每个元素都符合条件，如果都符合返回true；有一个不符合返回false

20、对象方法

Object.assgin ：合并对象（浅拷贝）

Object.defineProperties ：直接在一个对象上定义新的属性或修改现有的属性，并返回该对象

Object.is :判断两个值是否相同

Object.values ：返回一个给定对象所有可枚举属性值的数组

Object.keys ：返回一个由给定对象的自身可枚举属性组成的数组

21、闭包

        是指有权访问另一个函数作用域中的局部变量的函数（也可以说把局部变量变为全局变量）

22、在浏览器地址栏键入URL，按下回车之后经历的流程

1. 浏览器解析该URL的IP地址
2. 与服务器建立TCP连接
3. 浏览器发送http请求以三次握手的方式把数据发送给服务器
4. 服务器做出响应，把对应的html文本发送给浏览器
5. 释放TCP连接
6. 浏览器显示对应的html文本内容

23、箭头函数和普通函数的区别

1. 写法不同   （=> / function）
2. this的指向不同  （箭头函数没有具体的this指向[他的this永远指向其定义环境]；普通函数谁定义this指向谁[如果没有定义是window或undefined]）
3. 箭头函数不能被new实例化，普通函数可以
4. 普通函数可以声明提前，箭头函数只能先声明后使用

24、history和hash的区别

1. url展示上，hash模式有#，histroy没有
2. 兼容性，hash可以支持低版本浏览器ie8，histroy支持ie10
3. 刷新页面时，hash模式可以正常加载到对应的页面，history没有处理的话会返回404，一般需要后端配置

25、简述MVVM模式

Model ：存储数据及对数据进行增删改查

View ：UI用户界面

View Model ：数据

Model和View是通过View Model进行交互的，Model和View之间没有联系，Model和View Model之间是双向交互的

26、vuex

Vuex是vue中的状态管理

在main.js文件中引入store，注入使用

使用场景：单页应用中，组件之间的状态，音乐播放，登录状态，加入购物车等

属性：1. Static 基本数据（数据源存放地）【定义初始值】

           2. Mutations 提交更改数据的方法，同步【修改数据】

           3. Actions 像一个装饰器包裹mutations，使之可以同步【获取数据，判断接口是否成功】

           4. Getter 从基本数据中派生出来的数据【简化】

           5. Modules 模块化vuex

27、$nextTick可以在下次dom更新循环结束之后执行延迟回调（在修改数据之后用这个方法可以获取更新后的dom）

28、Vue路由懒加载

整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。

写法一：companent:（）=>import（ '路径' ）

写法二：component: resolve => require([ '路径' ], resolve)

29、vue组件传值

父传子：props   refs  inject  attrs

子传父：emit  parent  listenters

兄弟之间：vuex   EventBus

30、vue的生命周期

beforeCreate       （可以在此阶段加loading事件，在加载实例时触发）

Created （初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用）

beforeMount        （挂载元素，获取到DOM节点）

Mounted              （Vue在mounted生命周期获取dom）

beforeUpdate

Updated              （如果对数据统一处理，在这里写上相应函数）

Beforedestroy      （可以做一个确认停止事件的确认框）

Destroyed

缓存组件的生命周期:

Activeted被keep-alive缓存的组件激活时调用

Deactiveted被keep-alive缓存的组件停用时调用

31、路由的生命周期==>导航守卫

router.beforeEach((to,from,next)=>{}) 全局前置钩子

router.afterEach((to,from)=>{}) 全局后置守卫

to:即将要进入的目标路由对象

from:当前导航要离开的路由

next:function : 进入下一个钩子

32、watch和computed的区别

1. watch是监听一个值得变化，computed是计算属性
2. watch中的函数是不需要调用的，Computed中的函数调用不需要加（）
3. Computed有缓存属性，watch没有缓存属性
4. Watch可以异步，computed不可以，靠的是返回值，computed可以完成的功能watch也可以完成

33、v-if和v-show的区别

1. v-show是通过display样式控制显示隐藏，v-if是通过添加 / 删除dom元素控制显示隐藏
2. V-show适合频繁切换，v-if适合切换频率较低的
3. V-show性能消耗低，v-if性能消耗大
4. V-show不支持<template>语法，v-if支持

34、cookie，localStorage，sessionStorage三者区别

1. 存储大小不同：cookie为4kb左右，localStorage和sessionStorage可以达到5M
2. 数据有效期不同：sessionStorage仅在同源窗口中有效，关闭窗口就消失了，cookie可以设置过期时间，localStorage长期有效
3. localStorage和sessionStorage有现成的API，cookie需要程序员手动封装
4. Cookie仅在同源的http请求中携带，即使不需要也在浏览器和服务器中来回传递；localStorage和sessionStorage仅在本地存储

35、css3新增属性

1. border-radius ：圆角边框
2. border-image ：图片边框
3. box-shadow ：盒子阴影
4. box-sizing ：盒子模型
5. transform ：动画效果
6. transition ：过渡效果
7. background-size ：背景尺寸
8. text-shadow ：文字阴影
9. animation ：动画

36、ES6中新增特性

1. let声明变量，const声明常量 两个都有块级作用域

2. 箭头函数 用()=>进行定义

3. 模板字符串（` `）

4. for of循环

5. ...扩展运算符

6. import（引入）和export（对外暴露）

7. promise对象

8. set数据结构，类似数组。所有数据都是唯一的。（构造函数）

9. class类的继承

10.解构赋值

37、diff算法

用于比较新旧两个虚拟dom之间差异的一种算法

38、vue常用的修饰符

.trim ：过滤首尾的空格

.number ：将值转化为数字

.stop ：阻止点击事件冒泡

.prevent ：阻止事件的默认行为

.once ：只触发一次

.native ：转化为原生事件

39、vue中date为什么必须是个函数

为了保证组件的独立性和可复用性。

如果date是个函数的话，每复用一次组件就会返回新的date，类似于给每个组件创建了一个私有的数组空间，保护各自的数据互不影响；如果date写成对象形式，会使得所有组件实例公用一个date，造成一个变全都会变得结果

40、重绘和回流的区别

重绘：页面中元素属性发生改变，而这些属性只影响元素的外观，风格，而不会影响布局的，比如：background-color。则称为重绘。（color、background、box-shadow）

回流：页面中元素的尺寸、布局、隐藏等发生改变而需要重新构造页面，就会引起回流。（width、height、display、top、clear、font-size）

回流必将引起重绘，重绘不一定会引起回流。

41、flex布局常见属性

1. flex-direction 用于指定flex主轴的方向。
2. justify-content 用于指定flex子项在主轴方向上的对齐方式
3. align-items 用于指定侧轴上flex子项的对齐方式
4. flex-wrap 用于指定flex子项是否换行
5. align-content 用于多行的对齐方式
6. align-self 用于单独指定某flex子项的对齐方式

 42、call、apply、bind的区别

相同点：都是改变this指向的。

区别：call和apply在函数调用时改变，bind在函数定义时改变，不会调用函数

call、apply、bind第一个参数都是指定的this，apply第二个参数是数组，call和bind第二个参数是依次排列的形式

43、lodash有什么功能

Lodash是一个javascript库，可以提供一致性，可以模块化、更高效。

_.cloneDeep ：深拷贝

_.isEmpty ：是否是空对象/空数组

_.debounce ：忽略频繁执行

_.chunk ：将数组进行切分

_.compact ：去除假值（将所有空值，0，NaN过滤掉）

44、vue双向绑定的原理

核心：Object.defineProperty()方法，

介绍这个方法：这个语法内有三个参数，分别是obj（要定义其上属性的对象）prop（要定义或修改的属性）descriptor（具体的改变方法）。

简单地说，就是用这个方法来定义一个值。当调用时使用了他里面的get方法，给这个属性赋值时，又用到了他里面的set方法。

45、节流和防抖

防抖是只执行最后一次操作，节流是一段时间内只执行一次。

应用场景：

防抖：用户点击按钮过快/多次、模糊搜索

节流：scroll事件，每隔几秒计算一次位置信息；浏览器播放时间，每隔几秒计算一次进度信息

46、Html5新特性

1. 语义化标签（header、main、footer、nav、section）
2. 增强型表单（type：email、number、date、time、color）
3. audio和video（视频和音频）
4. 数据存储：Cookie、localstorage、sessionStorage
5. Canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

47、宏任务和微任务

Js有两种任务的执行模式：同步模式和异步模式

异步模式下，创建异步任务主要分为宏任务和微任务；宏任务是由宿主（浏览器、Node）发起的，而微任务由Js自身发起。

宏任务：setTimeout、setInterval、script、MessageChannel、setimmediate（Node环境）、I/O，事件队列

微任务：async、await、 promise.[ then/catch/finally ]、process.nextTick（Node环境）、queueMicrotask

48、CSS中的BFC（块级格式化上下文）

形成独立的渲染区域，内部元素的渲染不会影响外界

BFC解决高度塌陷, 外边距重叠，清除浮动问题

形成BFC常见的条件：

1. 浮动元素：float除none以外的值
2. 绝对定位元素：position（absolute、fixed）
3. overflow除了visible以外的值（hidden、auto、scroll）
4. display（inlink-block、table-cell、table-caption、flex）

BFC的特性：

1. 内部的Box会在垂直方向上一个接一个的位置
2. 垂直方向上的距离由margin决定
3. bfc的区域不会和float的元素区域重叠
4. 计算bfc的高度时，浮动元素也参与计算
5. bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素

49、定时器：

setTimeout（）只运行一次，达到设定的时间后就触发执行

setInterval（）循环执行的，真正的定时器

50、执行机制

JS的执行机制：同步任务 - 异步任务（微任务 - 宏任务）

异步执行机制：主线程 - 微任务 - 宏任务

51、JS中数组去重方法

方法一：通过Set对象进行过滤

Set类似于数组，但是成员的值都是唯一的，没有重复的值。
简单思路：用数组初始化一个Set对象set，然后通过Array.from( )再将其转化为数组即可去除数组中重复的元素。

方法二：双层for循环进行遍历数组

简单思路: 从数组第一个元素开始，每一次循环拿数组的下一个元素与其之后的每个元素都进行遍历比较，如果存在相同的元素，则通过splice()将其删除并从删除的索引位置开始继续比较(因为splice()删除后，后面元素往前移)。

方法三: 通过数组API indexOf()进行筛选

方法四: 通过数组API includes()进行筛选

方法五：利用数组的filter()+indexOf()

方法六：利用map(),结合has()和set()方法判断键是否重复。

方法七：利用对象

52、跨域问题产生原因及解决方式

产生原因：前端请求地址和后端服务器地址不同 如果二者: 域名,协议,端口号 有一个不相同,就会产生跨域问题 注意:本质上还是浏览器的同源策略(域名,协议,端口号 三者完全相同)

解决方式：

1、JSONP

<script src =”http://remoteserver.com/remote.js”> </script>

2、PHP端修改header（XHR2方式）

在php接口脚本中加入以下两句即可：

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

3、代理服务器（在vue中实现）

在vue.config.js 文件中devServer添加：

devServer: {

// ... 省略

// 代理配置

proxy: {

   // 如果请求地址以/api打头,就出触发代理机制

       '/api': {

       //这里用了本机的服务器,所以写localhost,如果用了其他服务器把localhost换掉就好

//比如:http://192.168.156.50:3000

         target: 'http://localhost:3000'

 // 我们要代理的真实接口地址

          }

       }

    }

53、get和post请求的区别

        1、get是请求数据，post是传递数据

        2、传递数据大小不同。get根据URL定义大小，post没有限制

        3、post比get的安全性强，因为post的参数不会保留在历史记录中

        4、get在浏览器回退时是无害的，而post会再次提交请求

54、ES6的新增数据类型

        1、set：类似于数组类型，不会存储重复的值

             用法：let  变量名  =  new set（ [ 数组1，数组2，数组3，...... ]）

        2、map：类似于对象数据类型

             用法：const 变量 = new Map( [ [ ' 键名 ' , ' 键值 ' ] , [ ' 键名 ' , ' 键值 ' ]  , ...... ] )

55、Git的基本语法

        Git init： 初始化仓库                                                  Git status：查看当前仓库的状态信息

        Git add 文件名：加入暂存区（一个文件）               Git add：全部文件加入暂存区

        Git commit -m 提交当前文件到仓库中                     Git log：查看日志（所有提交的记录）

        Git reset  文件名：撤回加入暂存区（在commit之前使用）  --hard：不保存所有变更

        --soft：保留变更且变更内容处于staged                --mixed：保留变更且变更内容处于Modified

        Git checkout -b <新分支名字>  <继承哪个分支> ：创建新分支

        Git branch：查看所有分支                                      Git checkout 分支名字：切换到指定分支

        Git merge 文件名：合并更改                                  Git clone 远程库地址：下载共享版本库

        Git config user.name  "用户名"：设置用户名          Git config user.email "邮箱"：设置邮箱 

        Git push：拿到更新后的代码（拉到本地）             Git branch -d 名字：删除本地分支

        Git push -d origin 名字：删除远程分支