前端常见面试题

根据自己的面试经验整理出一些常见的问题，答案是自己写的, 有些不一定正确或存在疏漏, 仅供参考

1. promise相关

讲一讲你对promise的理解?

promise是ES6新增的语言标准,主要是为了解决异步执行的回调地狱('回调金字塔').

所谓回调地狱,就是:在原始的异步执行中,异步操作需要放在回调函数中,才能确保顺序执行,但如果有多个回调函数,会造成层层嵌套的情况,这就是回调地狱.

promise是一个对象,有三个状态:pending,fullfilled和rejected状态,提供了两个回调函数reslove和reject.

promise在es7中的新语法?

async function a(){
     await ......//一个promise对象
}

promise多个任务如何并发执行?

promise.all([promise对象1,promise对象2,promise对象3...])

2. vue的生命周期相关

简述一下vue的生命周期和钩子函数?

创建 beforeCreate created

挂载 beforeMount mounted

更新 beforeUpdate updated

删除 beforeDestory destoryed

你一般在哪个周期执行代码,为什么?

略

3. 深拷贝与浅拷贝

深拷贝与浅拷贝的区别?如何实现?

浅拷贝和直接赋值还是有区别的;

针对引用类型来说,直接赋值是直接将整个obj对象的地址赋值给新的obj,当原obj中的属性发生变化时,被复制的对象也会被修改;

浅拷贝是遍历原obj中的每个值,并将其赋值给新obj,修改原obj中的基本类型属性,新obj的属性不会被改变.修改原obj中的引用类型属性,新obj的属性值会发生改变.浅拷贝有四种实现方法:

a.obj.assign()

b.遍历

c.数组api concat和splice

d.剩余参数 var arr2=[...arr1]

深拷贝

原obj发生改变时,复制的obj不会发生任何变化.深拷贝有以下实现方式:

a.json.stringify

b.递归遍历

4. es6新特性相关

你知道哪些es6新特性?

let,const和块级作用域;
箭头函数
模板字符串
arguments
promise
数组的新的api
数组解构与参数解构

你用过哪些es6新特性?

略

5. 组件传参

组件传参的方式有哪些?能介绍一下吗?

props
路由传参
commits
bus
vuex
ref

6. 路由守卫

路由守卫有哪几类?

三类:全局守卫(beforeEach,beforeReslove,afterEach),组件内守卫(beforeRouteEnter,beforeRouteUpdate,beforeRouteleave)和路由独享守卫(beforeEnter)

路由守卫的触发顺序?

beforeEach -> beforeRouteEnter -> beforeReslove -> afterEach -> beforeRouteLeave

7. vue双向绑定的原理

什么是mvvm模型?

mvvm模式是一种对前端代码重新进行划分的模式,即

模型model:数据模型,包括了数据和方法

视图view:即增强的html和css,可以实现分支和循环

视图模型viewmodel:能自动将视图中的对象与模型中的数据与方法进行同步.

vue实现双向绑定的原理是什么?

vue中,数据改变控制视图改变主要通过数据劫持,即访问者和观察者模式,视图改变控制视图改变主要通过事件监听来实现.

8. 闭包相关

谈一谈你对闭包的理解?
闭包是一种现象,具体写法就是通过将内层函数和内层函数所需要全局变量包裹在一个外层函数中,通过调用外层函数返回出来,从而达到避免全局污染的效果.

闭包有哪些运用场景呢?

闭包可以用来防止全局污染;
闭包可以用来维持变量,比如函数轲里化

9. Vuex

谈一谈你对vuex的了解?

a.vuex是......

vuex有哪些属性和方法?分别是做什么用的?

states:vuex中存储数据的地方,相当于data

mutations:对数据进行操作的地方,相当于methods

getters:vuex中的计算属性,相当于computed

actions:处理异步函数发送请求的地方

modules:扩展类的东西

10. Token

谈一谈你对token的理解?你在项目中使用过token吗?

token可以理解为加密的cookies,主要用来验证用户登录状态,在服务器中生成加密token,跟随网络请求在前后端传递,在客户端存储在webstroage中

11. 箭头函数

箭头函数和匿名函数有什么区别?

箭头函数的this指向上下文,匿名函数的this指向上下文;
箭头函数的参数使用...res,匿名函数的参数使用arguments;
箭头函数的原型不是function.

12. 数组去重

说一说数组去重的方法

数组遍历去重;
Set()对象;
对象去重.

13. js判断数据类型

谈一谈js中有哪些判断数据类型的方法

typeof
instance of
Object.prototype.toString().call(obj)

14. 原型链相关

谈谈你对原型链的理解

15. flex相关

flex的后面的参数是什么,分别有什么含义?

flex:flex-grow flex-shrink flex-basis;
/*     增长        减少     基宽    */

flex项目如何垂直居中?

align-items:center;

你在项目中是如何使用flex的?

做页面适配时要用;

16. jsonp跨域

17. axios同步执行

如何让axios同步执行?

async await方法

18. dom优化

你在平时是如何优化DOM的?

查找元素优化,优先使用类选择器和类选择器
改变dom时,使用托盘
修改dom样式时,使用domobj.style.cssText=" ...一些样式 ";
批量修改DOM元素时,从文档流中摘除该元素
减少iframs的使用,因为会消耗大量时间,并阻塞下载
把js文件写在</body>中,<script>写在header中

19. css居中

css中有哪些方式可以给元素居中?

20. http缓存的两种方式

http缓存有哪些方式?分别是什么?

21. vue优化

你是如何优化你的vue项目的?

v-once;
懒加载;
为v-for添加key;

22. 组件封装

...

23. element-ui如何引入（全局引入和局部引入）

如何实现element的全局和局部引入?

24. 跨域

什么是跨域?

你在编程过程中有没有遇到过跨域问题,你是怎么解决的?有哪些方法可以解决跨域问题?

25. 高度坍塌

什么是高度坍塌?

子元素浮动脱离文档流,从而导致高度不能被撑开,称为高度坍塌

高度坍塌的解决方案?

使用:after伪类,设置清除浮动;
父元素定高;
父元素设置overflow;

26. h5新特性

27. c3新特性

28. let和var的区别

var 定义的变量会出现声明提前(变量提升),let不会.
var定义的变量没有块级作用域(大括号就是块级作用域),let具有块级作用域
var可以重复声明同一个变量,但let不可以

29. 数组遍历的方式

for(var i=0;i<arr.lrngth;i++)
for(var key in arr)
for(var elem of arr)
arr.foreach()
arr.reduce/every/some/map...

30. watch和computed的区别

返回值不同,computed返回的是一个属性,主要被当作属性来使用,watch保存的是操作,主要被当做方法来使用
操作不同,computed是藉其他的依赖值来计算目标值.而watch是监听目标值的变化而进行一系列操作
写法不同,computed中的目标值后面不需要加()来调用,而watch中的需要

31. v-if和v-show的区别

v-if控制的是元素是否存在,如果值为false,则该元素从DOM树上移除了;

v-show控制的是元素的display,如果值为false,则该元素的display成为none.

31. nexttick的使用场景

nexttick是异步任务的一种,属于异步任务的微任务,且优先级极高,所以如果你想在完成某些异步任务后立即执行操作,应该使用nexttick.

vue.nexttick有两种主要使用场景:

在created钩子函数中,DOM树还未构建完成,此时你若想对Dom树进行操作,应该使用nexttick以在DOM树加载完成之后立即执行;
因为vue的数据更新与视图更新是异步的,因此,若想对试图修改后的DOM元素进行立即操作,应使用nexttick.

33. bootstrap是css/scss还是less

scss

34. get和post的区别

get请求在URL中传送的参数是有长度限制的，而post没有;
对参数的数据类型，get只接受ASCII字符，而post没有限制;
get比post更不安全(不是说post安全)，因为参数直接暴露在URL上，所以不能用来传递敏感信息;
get参数通过URL传递，post放在request body中。

35. 数组解构与对象解构

36. 单页面应用的优缺点

优点:

用户浏览体验好;
前后端分离
减轻服务器压力
多个终端共用一套后台

缺点:

搜索引擎优化比较难
首页加载比较慢
前进后退需要自己写堆栈

37. vue自带组件

keep-alive 主要用于保留组件状态或避免重新渲染,包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
component 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。
transition 作为单个元素/组件的过渡效果
transition-group 作为多个元素/组件的过渡效果
slot 插槽

38. 事件修饰符?

<button @click.stop="inner">点击我(^_^)</button>

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次

39. v-for为什么不能和v-if同时使用?

v-for的优先级高于v-if,如果v-if为false的话,v-for扔会执行,这也就造成了不必要的内存损耗

40. v-for你一般用什么方法设置key,这有什么劣势?如何改进?

一般用index,但index在删除某个元素后,会自动变更,如原来有5个元素,删除3号后,便变为了1234,而我们的期望是1245,也就是说,index没有实现为每个元素添加唯一索引的目的,因此,我们常用的方法是维数组中的每个对象添加其特有的id属性,将其赋给key

41. 如果直接为data中的对象设置属性会怎么样?应该如何解决?

会无法实现数据绑定,需要使用vue中的$set方法,写法如下

this.$set(Object, key, value)
this.$set(Array, index, newValue)

42. 要求父元素div包裹两个子元素div,第一个子元素固定为100px;第二个子元素自动填充剩余元素,你要怎么才能写出一个兼容性佳的代码?

.parent {
    position: relative;
}
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    left: 100px;
}