世界最新：【整理分享】48个前端高频面试题（附答案解析）

本篇文章给大家总结分享48个前端高频面试题（附答案解析），带你梳理vue、javascript等的基础知识，增强前端知识储备，值得收藏，快来看看吧！

1.vue双向数据绑定的原理？

mvvm场景：数据操作比较多的场景，需要大量使用DOM元素时，采用mvvm的开放方式，会更加便捷，让开发者更多的经历放在数据的变化上，解放繁琐的DOM元素

(资料图片仅供参考)

MVVM 模型，

M 数据从后台获取的商品数据

V 视图就是写好的页面，每一个div，每一个input 都是视图

VM 视图模型，

数据发生变化，通过视图模型会改变视图的显示，视图上的改变，也会通过视图模型进而影响数据的变化【相关推荐：vuejs视频教程、web前端开发】

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

2.vue的生命周期有哪些

beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

mounted 真实dom挂载完成 updated只要data数据被改变就会自动更新触发 destroy销毁全局计时器和自定义事件

如果使用了keep-alive会在多两个：activated、deactivated当组件初次加载会执行前4个生命周期，分别为： beforeCreate、created、beforeMount、mounted

3.v-if 和v-show有什么区别？

相同点:都可以控制dom元素的显示和隐藏

不同点:v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面

v-if直接将dom元素从页面删除，再次切换需要重新渲染页面

4.async await 是什么？它有哪些作用？

async await 是ES7的新增，async用于声明一个函数，await用于等待一个异步方法执行完成。async函数返回的是一个promise对象,可以用.then方法添加回调函数，在函数执行的中，一旦遇到await就回先返回,等到这个异步操作完成之后，它再进行函数体内后面的这个语句

5、数组常用的方法？哪些方法会改变原数组，哪些不会

会改变原数组：

pop (删除数组的最后一个元素并返回删除的元素)

push(向数组的末尾添加一个或更多元素，并返回新的长度)

shift(删除并返回数组的第一个元素）

unshift(向数组的开头添加一个或更多元素，并返回新的长度)

reverse(反转数组的元素顺序)

sort(对数组的元素进行排序)

splice(用于插入、删除或替换数组的元素)

不会改变原数组：

concat---连接两个或更多的数组，并返回结果。

every---检测数组元素的每个元素是否都符合条件。

some---检测数组元素中是否有元素符合指定条件。

filter---检测数组元素，并返回符合条件所有元素的数组。

indexOf---搜索数组中的元素，并返回它所在的位置。

join---把数组的所有元素放入一个字符串。

toString---把数组转换为字符串，并返回结果。

lastIndexOf---返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

map---通过指定函数处理数组的每个元素，并返回处理后的数组。

slice---选取数组的的一部分，并返回一个新数组。

valueOf---返回数组对象的原始值

6.什么是原型链？

每一个实例对象上有一个proto属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有proto属性，这样一层一层往上找的过程就形成了原型链。

7.什么是闭包？闭包有哪些优缺点？

概念：函数嵌套函数，内部变量能访问外部变量，这个变量称为自由变量解决的问题：保存变量带来的问题：会造成内存泄漏问题闭包的应用：防抖节流

8.es6有哪些新特性？

新增模板字符串箭头函数for-of（用来遍历数据—例如数组中的值。）ES6 将 Promise 对象纳入规范，提供了原生的 Promise 对象。增加了 let 和 const 命令，用来声明变量。还有就是引入 module 模块的概念

9.v-for 循环为什么一定要绑定key ?

给每个dom元素加上key作为唯一标识，diff算法可以正确的识别这个节点，使页面渲染更加迅速!

10.组件中的data为什么要定义成一个函数而不是一个对象？

每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他

11.常见的盒子垂直居中的方法有哪些请举例3种？

利用子绝父相定位方式来实现


登录后复制

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。


登录后复制

flex


登录后复制

12.js数据类型有哪些，区别是什么

基本类型：string，number，boolean，null，undefined，symbol，bigInt引用类型： object，array基本类型存储在栈中，空间小，操作频繁引用数据类型存放在堆中，它的地址在栈中，一般我们访问就是它的地址

13.什么是symbol

是es6引入新的原始数据类型Symbol，表示独一无二的值

14.什么是同源策略

所谓同源策略就是浏览器的一种安全机制，来限制不同源的网站不能通信（域名、协议、端口号相同）

15.promise是什么，有什么作用

promise 是一个对象，可以从改变对象获取异步操作信息他可以解决回调地狱的问题，也就是异步深层嵌套问题

16.什么是递归，递归有哪些优缺点？

递归：如果函数在内部可以调用其本身，那么整函数就是递归函数，简单理解：函数内部自己调用自己，这个函数就是递归函数，优点：机构清晰，可读性强缺点：效率低，调用站可能溢出，其实每一次函数调用会在内存栈中分配空间，而每个进程的栈的内容粮食有限的。当调用的层次太多时，就会超出栈的容量，从而导致栈溢出

17.let和const 的区别是什么

let 命令不存在变量提升，如果在 let 前使用，会导致报错如果块区中存在 let 和 const 命令，就会形成封闭作用域不允许重复声明const定义的是常量，不能修改，但是如果定义的是对象，可以修改对象内部的数据

18.vue性能优化

函数式组件路由懒加载v-for要绑定key key是虚拟dom唯一标志,能帮vue高效的动态渲染页面,渲染页面时会使用diff算法,会比较新旧dom,在比较时只比较同一级,不进行跨级比较,key发生变化节点进行销毁,并且是子节点先销毁。computed缓存数据和watch keep-alive缓存组件v-if和v-for不要同时使用,v-show是display,销毁是display-none.v-if为true创建.false销毁。设计vue响应式数据时不能设计太深.会做全量递归的计算.组件的颗粒度不能设计太细.合理划分.层级越深性能消耗越大防抖节流ui组件库按需引入

19..mvvm和mvc

m（数据层）v（视图层）vm（数据视图交互层）简化了大量dom操作 ,只用于单页面,通过数据来显示视图层而不是节点操作。mvc还需要获取dom,使页面渲染性能低且加载速度慢面试可以说的项目优化：设计vue响应式数据时不能设计太深.会做全量递归的计算.组件的颗粒度不能设计太细.合理划分.层级越深性能消耗越大

20.路由模式：hash和history

实现的功能：

改变url且不让浏览器向服务器发请求

检测url的变化

截获url地址并解析出需要的信息匹配路由规则

hash基于url传参会有体积限制,不会包括在http请求中对后端完全没有影响,改变hash不会重新加载页面; history可以在url里放参数还可以将数据存放在一个特定对象中.history模式浏览器白屏解决方法是在服务端加一个覆盖所有的情况候选资源,必须要服务端在服务器上有对应的模式才能使用,如果服务器没配置,可以先使用默认的hash。

21.常用的块与行属性内标签有哪些？有什么特征

块标签：div、h1~h6、ul、li、table、p、br、form。特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行行标签：span、a、img、textarea、select、option、input。特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）

22.== 和 ===的区别

==是非严格意义上的相等值相等就相等===是严格意义上的相等，会比较两边的数据类型和值大小值和引用地址都相等才相等

23.严格模式的限制

变量必须声明后再使用函数的参数不能有同名属性，否则报错不能使用 with 语句禁止 this 指向全局对象

24.git

git init 初始化仓库git clone 克隆git status 检查文件状态git add. 将文件添加到暂存区git commit -m 描述信息

25.tcp和udp协议

tcp安全性更高 http协议是建立在tcp基础上的udp效率比tcp高容易丢数据

26.vuex的五种状态

mutations（修改state里面的数据，但是他只能执行同步的操作，异步必须写在action里面）state（放数据）action（执行异步操作）getter（计算属性）moudel（允许将单一store拆分多个store并且同时保存在单一的状态中）

传递过程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值

27.什么是防抖和节流，js 如何处理防抖和节流

首先防抖就是触发下一个事件时停止掉上一个事件

节流是触发当前事件需要在上一个事件结束以后

通过设置节流阀(定时器)

28.什么是重绘和回流

重绘：当元素内容以及布局没有发生改变，只是元素外观发生改变（background-color），就会重绘回流：当一部分内容或者布局发生了改变，重新构建页面就会产生回流产生回流一定会造成重绘，但是重绘不一定造成回流

29.Css优先级

!importent>行内> id> 类，伪类，属性>标签，伪元素选择器 > 继承和通配符

30.如何解决盒子塌陷

父盒子设置上边距

overflow：hidden

子盒子脱标

父盒子上 padding

31.清楚浮动的方法

一共有5中方法

父盒子设置高度

overflow：hidden

伪元素

双伪元素

在父盒子末尾添加一个空盒子，设置 clear:both

32.Split（）和 join（）的区别？

split 字符串转换为数组，参数为以某个字符串分隔join 数组转换为字符串参数表示转换为的字符串以什么连接

33.数组去重

1.利用双重for循环，再利用数组方法splice方法去重（es5常用）

2.set去重:准备一个数组，数组解构newset,再准备一个函数存放数组的变量作为函数的判断值，return Array.from(new set(arr))即可

3.数组方法indexof

4.数组方法sort Obj[a]-Obj[b]

34.什么原因会造成内存泄露

全局变量使用不当（没有声明的变量）闭包使用不当定时器/延时器没有清理没有清理的DOM元素引用(dom清空或删除时，事件未清除)

35.第一次加载页面会触发哪几个钩子函数？

beforeCreate

created 数据初始化完成，方法也调用，但是DOM未渲染

beforeMount

mounted DOM和数据挂在完成

36.Vuex 的 5 个核心属性是什么?

state => 基本数据

getters => 从基本数据(state)派生的数据，相当于state的计算属性

mutations => 提交更改数据的方法，同步！

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

简述vuex数据传递过程

37.get和post区别

相同点get请求和post请求底层都是基于TCP/IP协议实现的，使用二者中的任意一个，都可以实现客户端和服务器端的双向交互

最本质的区别

约定和规范：规范：定义GET请求是用来获取资源的，也就是进行查询操作的，POST请求是用来传输实体对象的，用于增删改操作约定：GET请求将参数拼接到URL上进行参数传递 POST请求将参数写入请求正文中传递

非本质区别

缓存不同，get会缓存参数长度限制不同，get请求的参数是通过URL传递的，而URL的长度是有限制的，通常为2K；post请求参数存放在请求正文中，没有大小限制回退和刷新不同，get请求可以直接回退和刷新，不会对用户和程序产生影响；post请求如果直接回滚和刷新，数据将会再次提交历史记录不同，get请求的参数会保存在历史记录中，post请求的参数不会书签不同，get请求的地址可以被收藏为书签，post不会

38.跨域

跨域原因：浏览器出于安全考虑保护资源，同源策略。(协议、域名、端口号)解决跨域：jsonP 但只能使用get 原理-将请求的接口设置给script标签的src属性传递一个函数给后台实现跨域。后台响应的是一个函数调用cors：最常用。反向代理:本地前端发送到本地后端,不会跨域,（同源）本地后端接收请求后转发到其他服务器（服务器和服务器之间不会跨域）代理是需要路径中的特殊标志。

39.三种存储的区别

cookie 设置过期时间删除，即使窗口或浏览器关闭localStorage 存储量大，存储持久数据，浏览器关闭后数据不会丢失除非手动删除sessionStorage临时存储，关闭浏览器是存储内容自动清除

存储大小：

cookie 数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，单笔cookie大得多，可达到5m或更大

40.dom如何实现浏览器内多个标签页之间的通信

websocket.SharedWoeket;也可以调用localStorage、cookies等本地存储方式；localStorage另一个浏览器上下文里被添加、修改或删除时，他都会触发一个事件，我们通过监听事件，控制他的值进行页面信息通信；注意quirks：Safari在无痕模式下设置localStorage值时会抛出，quotaExceededError的异常