重点面试题2

1.axios

axios是基于promise用于浏览器和node.js的一个http客户端，主要用于向后端发起异步请求，还有就是在请求中做一些事情

axios fetch ajajx的区别

前两者都是支持promise语法 后者默认是使用callback方式

fetch本质上脱离的xhr 是最新的语法（有自己的特性，默认不传cookie）

2.Vuex的流程

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态

解决多组件之间数据共享问题，将组件与组件之间的关系进行解耦，强调集中式的管理，将组件与组建之间的关系变成了组件与仓库之间的关系

流程

1vue组件中，通过this.$store.dispatch来触发vuex中actions来提交数据的更改

2.再通过actions的context.commit来触发mutations里具体的方法来修改state中的数据

3.mutations接收到commit的请求，就会自动通过Mutate来修改state里面的数据

4.最后由store触发每一个调用它的组件的更新

vuex的核心属性‘

1.store 类似于一个容器，一个页面只能有一个store，

2.state 在里面定义状态

3.mutations 在里面写更改自己状态的方法，改变状态的唯一途径就是提交mutations

4.actions 在里面可以进行异步操作

5.getters 可以对state里面的数据进行计算操作，它就是state的计算属性。

6.modules 模块化Vuex 将store分割成不同的模块

vuex数据持久化

使用vuex-persistedstate这个插件

3.本地存储与会话存储

lcoalstorage(本地存储)是以文件的形式储存在本地，永久的保存

sessionstorage（会话存储）是临时保存

4.vue中的通讯方式

(1)父子通讯

1.子组件通过props接收父组件传递来的数据

（2）子父通讯

1.子组件通过props接收父组件传递来的change方法

2.子组件绑定一个自定义事件，通过this.$emit来调用父组件的改变数据的方法

3.关系链

4.ref链

（3）兄弟之间通讯

1.关系链

2.ref链 给弟弟属性设置ref属性，通过$.refs来完成

3.bus事件总线

创建一个公共的vue实例对象

绑定一个事件等待触发 两个参数（“自定义事件名”，“执行的回调函数”）

通过$emit来触发自定义事件

5.Vue中的双向数据绑定原理

vue中是通过数据的劫持的方式来进行数据绑定的，内部的核心方法就是通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，达到监听数据变动的目的

6.Vue中Key的作用

1.主要就是为了高效的更新虚拟DOM，原理是通过key可以判断两个节点是否是同一个，从而避免频繁操作更新不同的元素，减少DOM操作量，提高性能

2.如果不设置会在列表更新时引发一些隐蔽的bug

7.Vue中的生命周期钩子函数

1、beforeCreate():组件实例刚刚被创建 (el 和 data 并未初始

化)

2、created():组件创建完成,属性已绑定,但 DOM 还未生成,$el

属性还不存在(完成 data 数据的初始化)

3、beforeMount():模板编译/挂载之前(完成了 el 和 data 初始

化)

4、Mounted():模板编译/挂载之后(完成挂载)

5、beforeUpdate():组件更新之前

6、updated()：组件更新之后

7、beforedestroy():组件销毁之前

8、destroyed():组件销毁之后

8.自定义指令钩子函数

1.bind

2.inserted

3.update

4.componentupdated

5.unbind

9.计算属性和watch的区别

1.watch的监听只是单个监听，每次监听只能监听一个变量的修改，不能监听多个变量的同时修改 而计算属性可监听多个数据的变化，而且只跟他所依赖项进行关联

2.如果需要数据变化时指向异步或者开销较大的操作时，只能选择使用watch去实现

10.Vue中路由守卫

1.全局的路由守卫

beforeEach （前置路由守卫） 在开发中用的比较多，里面的三个参数 from：从哪个路径过来的 to：即将进入的哪一个路径 next() 必须加 让代码继续往下执行

afterEach （后置路由守卫）

2.单个路由守卫

beforeEnter()

3.组件内路由守卫

beforeRouteEnter

beforeRouteLeave

beforeRouteUpadta //使用场景 路由改变时组件被复用时 eg：动态的改变id

11.Keep-alive

将组件持久化，使组件的状态维持不变，在下一个展示时也不会重新初始化

keep-alive中两个钩子函数

activated 当keep-alive包含的组件再次渲染时触发

deactivated 当keep-alive包含的组件销毁时触发

总结

keep-alive是一个抽象组件，缓存虚拟dom，缓存的组件不会被mounted，为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数

12.ES6新增的数组方法

1.forEach

forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.

2.map

map()的主要作用, 其实是创建一个新的数组, map()的参数和forEach()是一样的

map()和forEach()有什么区别?, 使用map()遍历数组, 可以返回一个新数组, 并且不会改变原数组里的内容

3.filter

filter()参数和forEach()也是一样的, filter()主要是过滤的, 用来过滤数组中不满足条件的元素, 把满足条件的元素放到新的数组里, 并且不会改变原数组.

4.every

every()的作用, 它会遍历数组, 在循环体内写条件, 如果每一项都是true, 就会返回true, 只要有一个是false, 就会返回false

5.some

遍历数组的每一项, 然后根据循环体内的条件去判断, 只要有一个是true, 就会停止循环.

6.reduce

13.数组去重的几种方法

1.Set去重 （ES6中最常用）

2.for 循环嵌套for循环，然后splice去重（ES5最常用）

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

3.利用indexOf去重

function unique (arr) {
    var array = []
    for(var i = 0; i < arr.length; i++){
        if(array.indexOf(arr[i]) === -1){
            array.push(arr[i])
        }
    }
    return array
}

14.css动画有几种？

1.transition ： 平衡过渡

2.animation： 动画

animation 一般通过@keyframes 规则，创建动画。

animation一般通过@keframes关键帧的规则来创建动画，可以通过关键字"from"和“to”,或者通过自己定义的百分比进行动画 0%是开始100%是结束

3.transform： 改变元素的大小、位置

translate：移动

translate（x,y） 定义2D空间

translate（x,y,z） 定义3D空间

scale：放大

scale（数值）定义图片放几倍大（0为不显示,1则是图片原本的大小）

rotate：旋转

rotate(x,y) 定义2D空间

rotate(x,y,z) 定义3D空间

skew ：倾斜（扭曲）

skew(x,y) 定义2D空间

skew(x,y,z) 定义3D空间

15.JS中的事件冒泡是什么意思？如何来阻止？你在什么地方用过？

事件冒泡就是子节点向父节点去触发同名事件

​ 事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
​ 事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

阻止事件冒泡 e.stopPropagation()

给异步请求的添加dom元素添加事件时，无法添加事件，可以给他的父节点添加该事件，从而使子节点也可以触发该事件

16.深拷贝/浅拷贝 js中如何实现 两者的区别

• Object.assign()实现浅拷贝及一层的深拷贝

• 递归实现深拷贝

• 使用JSON.stringify和JSON.parse实现深拷贝：JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象；

• jquery实现深拷贝
  jquery 提供一个$.extend可以用来做深拷贝；

• 用slice实现对数组的深拷贝

  • // 当数组里面的值是基本数据类型，比如String，Number，Boolean时，属于深拷贝
    // 当数组里面的值是引用数据类型，比如Object，Array时，属于浅拷贝
    

  · 用concat实现对数组的深拷贝

区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制；

17.Vue和Jquery的区别

1.vue是通过vue对象将数据和view完全分离开的，对数据操作不在引用相应的DOM对象；主要是操作数据。2.jQuery是使用选择器（$）选取DOM对象，并对其进行赋值、取值、事件绑定等操作；主要是操作DOM。

18.浏览器兼容问题

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽

var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高
var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//左卷的距离

event事件问题

阻止事件传播
if (e.stopPropagation) {
            e.stopPropagation();//W3C标准
        }else{
            e.cancelBubble=true;//IE....
        }

阻止默认事件：
//js阻止默认事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue='false';//IE..
        }
    }

关于event事件中的target
    document.onmouseover=function(e){
        var e=e||window.event;
        var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE
        var from=e.relatedTarget||e.formElement;//鼠标来的地方，同样后面的为IE...
        var to=e.relatedTarget||e.toElement;//鼠标去的地方
    }

19.css中的元素居中问题

1.用css将一个200x200的div在不同分辨率的屏幕上下左右居中

div{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-100px;
   margin-left:-100px;
    /*此时宽和高都要固定*/
    width:200px;
    height:200px;

}

2.绝对定位实现水平垂直居中，使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

3.css3弹性盒实现元素水平垂直居中，通过使用 display:flex; align-items: center; justify-content: center;

20.单页应用的原理

根据地址栏的改变进行组件之间的切换，整个页面是没有进行刷新的，只是组件与组件之间的卸载与装载过程

21.Vue.use的原理

调用插件里面的Install方法

22.路由懒加载

懒加载就是在需要加载的时候进行加载，在单页应用中，如果没有应用懒加载，运用webpack打包后的文件会异常的大，造成进入页面需要加载很多的内容，会造成页面加载事件过长，不利于用户体验，所以利用懒加载将页面进行划分，在需要的时候加载页面，有效的分担加载压力，优化用户体验

23.路由(vue-router)两种模式

1，hash模式 原理 触发window.onhashchange事件

2，history模式 原理：利用history.pushState相关的API 没有丑陋的#。不过需要后端的配置支持。

24.开发中遇到的问题

1.使用swiper搭建轮播图时，图片无法滚动，需要把轮播图的实例化放在this.$nextTick这个回调函数里 或者是 mounted这个钩子函数里，直接在created里实例化无法实现。

通过axios请求后端的数据（数组的形式）对请求的数组进行map遍历，结果无法遍历 需要先判断这个数组是否有空的情况

25.vue中的插槽

匿名插槽 具名插槽 作用域插槽

实现内容分发

26.Vue全局API

vue.extend

Vue.nextTick

​ Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

Vue.set

Vue.delete

Vue.directive

Vue.filter

Vue.component

Vue.use

Vue.minxi

Vue.comple

Vue.observable

Vue.version

27.Gulp 和 webpack 的了解

相同点 都是前端自动化构建工具

不同点

Gulp 是强调工作流程 内部是通过task 方法 来设置一个个任务 例如文件压缩，文件合并，启动我们的 server 对模块化并没有进行强调 只是规范了前端的开发流程

Webpack 是前端模块化开发的解决方案 强调我们的模块化
包括压缩合并 预处理 等都是它所支持的 更侧重模块的打包 我们可以把开发中所有的资源 图片资源 js文件css资源还有一些别的资源 通过loader（加载器）和plugins（插件）对资源进行处理，然后打包成符合生产环境部署的前端资源

28.用jqery 实现过什么效果 及步骤

轮播图效果

购物车

图片放大镜效果

选项卡

29.跨域请求有多少种方法 项目中如何使用

jsonp script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。只能get 无法post

配置代理的方式

后端配置

30.svn

31.组件开发优点

组件化开发：就是把一类功能的元素组合到一起，将css（样式）/js（功能）/html（结构）包装到一起，供后续复用

• 组件更加清晰直观
• 组件关系更加清晰
• 结果可以预测

32.组件开发需要注意什么

​ 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项

1.data必须是函数，并且返回一个对象

2.template必须只有一个根元素包裹

3.template优先用模板字符串

4.组件在命名时使用大驼峰命名法

5.组件内不可以使用父组件中的data数据 需要父组件传递

33.如何防止组件开发样式 数据 冲突 (包括原生js, 各框架)

scoped

34.Null和Undefined的区别

1通过typeof判断 null是object undefined是undefined

2变量定义了却没有赋值就是undefined null是赋给变量一个空值，

35.set去重的原理

set数据解构要求数据是唯一的，有相同的数据会被筛选出去

36.Vuex和本地存储的区别

vuex只是存在内存里 不是永久性存储 一旦浏览器刷新，vuex中的数据会不存在

本地存储是永久存储的 除非手动的删除

37.拦截器

interceptors.request 前端像后端发送请求的时候拦截，可以添加请求头等

interceptors.response 后端向前端返回状态的时候拦截 ，可以判断后端传递来的状态码来给用户信息

38.Vuex中的辅助函数

mapState 获取vuex中的state 在计算属性computed:{} 中定义 …mapState(“模块名”，[“状态名”])

mapGetters 获取vuex中的getters 在计算属性computed:{}中定义 …mapGetters (“模块名”，[“方法名”])

modules 划分模块

mapActions 获取vuex中的异步请求数据 在组件的methods中定义 …mapActions(“模块名”，[“方法名”])

mapMutation 获取vuex中的mutation方法 在组件的methods中定义 …mapMutation (“模块名”，[“方法名”])

39.Vuex的规则

1. 应用层级的状态应该集中在单个的store对象中
2. 提交mutation是唯一改变状态的方法 这个过程是同步的
3. 异步操作放在actions

40.开发中的组件库

vue中 Vant Element iView Vux Mint uni-app

41.页面布局

1.固定宽度布局：当前各大网站的页面都是固定宽度布局。

2.流体布局：优点：随着页面的变化，页面会依据比例跟着变化，但是这种会使页面中的内容变形

3.响应式布局，一种弹性的栅格布局，不同尺寸下弹性适应

4.双飞翼布局 经典三列布局，也叫做圣杯布局

5.弹性布局

6.瀑布流布局

42.简述正向代理反向代理的区别

正向代理即是客户端代理, 代理客户端, 服务端不知道实际发起请求的客户端

反向代理即是服务端代理, 代理服务端, 客户端不知道实际提供服务的服务端

43.如何创建一个对象

用new关键字创建

调用对象的clone方法

利用反射，调用Class类的或者是Constructor类的newInstance（）方法

用反序列化，调用ObjectInputStream类的readObject（）方法

44.对象的继承

A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属性和方法

大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript 语言的继承不通过class，而是通过“原型对象”（prototype）实现。

JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。

45.原型链的理解

1.函数必然有prototype和_proto_两个属性，所有的函数(包括自定义函数)都是Function实例的对象

2.对象必然有_proto_属性，但不一定有prototype；实例的对象通过_proto_属性连接到构造函数的prototype属性上。而原型链就是从这两者的关系开始一层一层往下找的关系

46.函数防抖和函数节流

函数防抖：函数防抖就是在一段时间触发或调用函数时,只执行一次; 也可以理解为触发n毫秒之后才会调用一次

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

优点: 优化系统性能

function debounce(method,delay) {
    let timer = null;
    return function () {
        let self = this,
        args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            method.apply(self,args);
        },delay);
    }
}

函数节流：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

function throttle(method, mustRunDelay) {
    let timer,
        args = arguments,
        start;
    return function loop() {
        let self = this;
        let now = Date.now();
        if(!start){
            start = now;
        }
        if(timer){
            clearTimeout(timer);
        }
        if(now - start >= mustRunDelay){
            method.apply(self, args);
            start = now;
        }else {
            timer = setTimeout(function () {
                loop.apply(self, args);
            }, 50);
        }
    }
}

47.es6的新特性

let声明作用域会限制在当前代码块，var没有限制 let声明的变量也没有声明提升

const 声明常量 const 声明的变量都必须在声明处初始化 与let相同具有块级作用域的特性 暂存性死区

数组的解构赋值

var [a, b, c] = [1, 2, 3];

Array.from 转数组

新数据类型symbol

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Proxy

Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）

通过class关键字，可以定义类

箭头函数 () => {} 箭头函数没this的指向 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

48.盒模型

标准盒模型 box-sizing值为content-box

怪异盒模型 box-sizing值为border-box

标准盒模型的width（height）=设置的content的宽高+padding+border+margin

怪异盒模型一个盒子的总宽度= width + margin(左右)

49.状态码

200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

400 - 客户端请求的语法错误，服务器无法理解

50.apply call bind 的区别

call 语法： foo.call(this, arg1,arg2, … ,argn );
apply 语法： foo.apply(this, [ arg1,arg2, … ,argn ] );
bind 语法： foo.bind(this);

call： 可以有n个参数，从第二个参数开始的所有参数都是原函数的参数。

apply：只有两个参数，并且第二个参数必须为数组，数组中的所有元素一一对应原函数的参数。

bind： 只有一个参数，即要绑定的this。

51.字符串方法

indexof 查找字符串

conact 字符串拼接

lastindexof 查找最后一次

52.Pomise.all的使用

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

53.熟练使用Eacharts ,HeigEcharts等图表库

使用过，Eacharts HighEcharts 等都使用过。数据是来自于后台接口，然后前端请求数据，获取到数据之后进行组装拼接，将数据整成图表需要的数据格式。最后的话通过setOption来将图表进行数据设置。

图表查阅百度echarts api文档，配置项，查阅具体配置，画点、图线位置。